Category / Section
Can't edit any row except the first row in Grid
1 min read
Problem
The edited/deleted row always getting first row value in the Grid.
Cause
isPrimaryKey property is not set to the primary key column.
Solution
The edited/deleted row always getting first row value can be fixed by setting isPrimaryKey property of "columns" for primary key column in the data source. The editing functionalities can be performed based upon the primary key value in the selected row.
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "CustomerID", headerText: 'Customer ID', width: 90 },
{ field: "EmployeeID", headerText: 'Employee ID', eitType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 80 },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, width: 80, format: "{0:C}" },
{ field: "ShipName", headerText: 'Ship Name', width: 150 },
{ field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90 }
]
});
});
</script>
MVC
@(Html.EJ().Grid<OrdersView>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(80).Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
})
)
ASP
<ej:Grid ID="Grid" runat="server" AllowPaging="True">
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"></ej:Column>
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90"></ej:Column>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" EditType="Dropdown" Width="90" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="Numeric"></ej:Column>
<ej:Column Field="ShipName" HeaderText="ShipName" Width="250" />
<ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" EditType="Dropdown" />
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid>
Screen Shot
