ModelType
property must be provided with named model before using template columns.
...
<EjsGrid @ref="@grid" DataSource="@gridData" TValue="OrdersDetails" ModelType="@model" AllowPaging="true" AllowSelection="true">
<GridColumns>
. . . . . .
<Template>
@{
var order = (context as OrdersDetails);
<div class="image">
<EjsButton @ref="button" @onclick="@OnClick" CssClass="e-flat">Select</EjsButton>
</div>
}
</Template>
</GridColumn>
...
</GridColumns>
</EjsGrid>
@code{
EjsGrid<OrdersDetails> grid { get; set;}
public List<OrdersDetails> gridData { get; set; }
public OrdersDetails model = new OrdersDetails();
...
} |
...
<EjsGrid @ref="@grid" DataSource="@gridData" TValue="OrdersDetails" ModelType="@model" AllowPaging="true" AllowSelection="true">
<GridColumns>
. . . .
<Template>
@{
var order = (context as OrdersDetails);
<div class="image">
<EjsButton @ref="button" @onclick="@OnClick" CssClass="e-flat">Select</EjsButton>
</div>
}
</Template>
</GridColumn>
...
</GridColumns>
</EjsGrid>
@code{
EjsGrid<OrdersDetails> grid { get; set;}
...
private async void OnClick(UIMouseEventArgs args)
{
var data = await this.grid.GetSelectedRecords(); //you can get the selected records details
Console.WriteLine(data[0].OrderID);
}
}
|
@using Syncfusion.EJ2.Blazor.Grids
<EjsGrid DataSource="@GridData" ModelType="@Model” AllowPaging="true">
<GridColumns>
<GridColumn HeaderText="Timespan">
<Template>
@{
<span>@timespan</span>
}
</Template>
</GridColumn>
...
</GridColumns>
</EjsGrid>
@code{
public List<OrdersDetails> GridData { get; set; }
TimeSpan timespan { get; set; } = new TimeSpan(365, 21, 19, 45);
public OrdersDetails Model = new OrdersDetails();
} |