problem in Order.CustomerID cell
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Grids
<EjsGrid ModelType="@Model" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150">
<EditTemplate>
<EjsAutoComplete Value="@((context as Order).CustomerID)" DataSource="@Orders">
<AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
</EjsAutoComplete>
</EditTemplate>
</GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" EditType="EditType.NumericEdit" Format="C2" Width="140" TextAlign="@TextAlign.Right"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="yMd" Type="ColumnType.Date" Width="160"></GridColumn>
</GridColumns>
</EjsGrid>
@code{
public List<Order> Orders { get; set; }
public Order Model = new Order();
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}
<EjsGrid ModelType="@Model" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
. . . . . .
<EditTemplate>
<EjsAutoComplete ID="CustomerID" Value="@((context as Order).CustomerID)" DataSource="@Orders">
<AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
</EjsAutoComplete>
</EditTemplate>
</GridColumn>
. . . .
</GridColumns>
</EjsGrid> |
<EjsGrid DataSource="@Orders" @ref="Grid" ModelType="@Model" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150">
<EditTemplate>
@{
<EjsComboBox ID="EmployeeID" Value="@((context as Order).EmployeeID)" TValue="int?" DataSource="@Employees">
<ComboBoxFieldSettings Text="FirstName" Value="EmployeeID"></ComboBoxFieldSettings>
</EjsComboBox>
}
</EditTemplate>
</GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</EjsGrid>
|
<EjsGrid DataSource="@Orders" @ref="Grid" ModelType="@Model" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
. . . . . .
</EjsGrid>
@code{
public List<Order> Orders { get; set; }
EjsGrid<Order> Grid;
public Order Model = new Order();
public List<EmployeeData> Employees { get; set; }
} |