<EjsGrid DataSource="@Orders" AllowPaging="true" EnableHover="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update"})">
<GridEvents OnActionBegin="OnBegin" TValue="Order"></GridEvents>
. . . . . . .. .
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
@*Bind integer value to grid COlumn*@
<GridColumn Field="Employee.EmployeeID" HeaderText="Employee Name" Width="150">
<Template>
@{
var val = (context as Order).Employee.FirstName; // display its corresponding text with column template
<span>@val</span>
}
</Template>
<EditTemplate>
<EjsDropDownList @ref="Ddl" Value="@((context as Order).Employee.EmployeeID)" DataSource="@Employees" Placeholder="Exercise">
<DropDownListFieldSettings Value="EmployeeID" Text="FirstName"></DropDownListFieldSettings>
</EjsDropDownList>
</EditTemplate>
</GridColumn>
. . . . . .
</GridColumns>
</EjsGrid>
@code{
EjsDropDownList<int?, EmployeeData> Ddl { get; set; }
public List<Order> Orders { get; set; }
public static List<EmployeeData> Employees { get; set; }
public void OnBegin(ActionEventArgs<Order> Args)
{
//Save the change in datasource on clicking the udpate button
if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)
{
Args.Data.Employee.EmployeeID = Ddl.Value;
Args.Data.Employee.FirstName = Employees.Where(f => f.EmployeeID == Ddl.Value).FirstOrDefault().FirstName;
}
}
protected override void OnInitialized()
{
.. . . .. . . .
}
|