I have a grid that has a child grid and I want to update a cell value by clicking a custom command button but what happens is that it updates the column before the column I want to update. The UpdateFreight worked well before I added the child grid.
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.employeeData" is referred from templatelocaldata.js
dataSource:window.gridData,
allowPaging: true,
toolbarSettings:{showToolbar:true,toolbarItems:[ej.Grid.ToolBarItems.Add,ej.Grid.ToolBarItems.Cancel,ej.Grid.ToolBarItems.Delete,ej.Grid.ToolBarItems.Edit,ej.Grid.ToolBarItems.Update]},
//editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
editSettings:{allowEditing:true,allowAdding:true,editMode:"batch"},
enableAutoSaveOnSelectionChange: false,
pageSettings: { pageSize: 10 },
enableRowHover: false,
columns: [
{ field: "EmployeeID", headerText: "Employee ID", width: 150 },
{ field: "Freight", headerText: "Freight", width: 100},
{
headerText: "Update",
//headerTemplateID: "#employeetemplate",
width: 60,
allowEditing: false,
commands: [
{
type: "details",
buttonOptions: {
text: "Update",
width: "50",
click: "UpdateFreight",
}
}
],
isUnbound: true,
textAlign: ej.TextAlign.Center,
},
],
childGrid: {
dataSource: [],
queryString: "EmployeeID",
allowPaging: true,
pageSettings: { pageSize: 5 },
create: 'childCreate',
columns: [
{ field: "ItemNo", headerText: "Item No.", width: 100 },
{ field: "OrigItemNo", headerText: "Orig. ItemNo", width: 120 },
{ field: "Description", headerText: "Description", width: 310 },
{ field: "ShipQty", headerText: "Ship Qty.", width: 100 },
],
},
});
});
function UpdateFreight(args)
{
var grid = $("#Grid").ejGrid("instance")
var index = this.element.closest("tr").index();
grid.setCellValue(index, "Freight", 0);
}
