Category / Section
How to set one cell value based on the other cell value
1 min read
This knowledge base explains how to set one cell value based on the other cell value in batch editing.
Solution:
We can achieve this requirement by bind keyup event for the columns using cellEdit event and set the value to other cell using setCellValue method of ejGrid.
- Render the Grid as follows.
HTML
<div id="FlatGrid"></div>
JS
<script type="text/javascript">
$(function () {
$("#FlatGrid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: 'batch' },
toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 80},
{ field: "EmployeeID", headerText: "Employee ID", width: 85},
{ field: "CustomerID", headerText: "Customer ID", width: 90 },
{ field: "Freight", headerText: "Freight", format: "{0:C}", width: 85 },
{ field: "CalculatedColumn", template: "<span>{{:EmployeeID * Freight}}</span>", width: 85 }
],
cellEdit: 'gridCellEditEvent'
});
});
</script>
MVC
@(Html.EJ().Grid<OrdersView>("Grid")
.Datasource((IEnumerable<object>)ViewBag.DataSource)
.AllowPaging()
.ToolbarSettings(a => a.ShowToolbar().ToolbarItems(b =>
{
b.AddTool(ToolBarItems.Add);
b.AddTool(ToolBarItems.Edit);
b.AddTool(ToolBarItems.Delete);
b.AddTool(ToolBarItems.Update);
b.AddTool(ToolBarItems.Cancel);
}))
.EditSettings(edit=> edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch))
.ClientSideEvents(events => events.CellEdit("gridCellEditEvent"))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(85).Add();
col.Field("CustomerID").HeaderText("Customer ID").TextAlign(TextAlign.Left).Width(90).Add();
col.Field("Freight").HeaderText("Freight").Width(85).Add(); col.Field("CalculatedColumn").Template("<span>{{:EmployeeID*Freight}}</span>"). Width(85).Add();
})
)
ASP
<ej:Grid ID="Grid" ClientIDMode="Static" runat="server" AllowPaging="True">
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch" ></EditSettings>
<ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel" ></ToolbarSettings>
<ClientSideEvents CellEdit="gridCellEditEvent" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="80" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="85" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
<ej:Column Field="Freight" HeaderText="Freight" Width="85" />
<ej:Column Field="CalculatedColumn" Template="<span>{{:EmployeeID*Freight}}</span>" Width="85"></ej:Column>
</Columns>
</ej:Grid>
CORE
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.datasource" cell-edit="gridCellEditEvent">
<e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"add","edit","delete","update","cancel" })>
</e-toolbar-settings>
<e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true" edit-mode="Batch"></e-edit-settings>
<e-columns>
<e-column field="OrderID" header-text="Order ID" is-primary-key="true" width="80"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="85"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="90"></e-column>
<e-column field="Freight" header-text="Freight" width="85"></e-column>
<e-column field="CalculatedColumn" template="<span>{{:EmployeeID*Freight}}</span>" width="85"></e-column>
</e-columns>
</ej-grid>
Angular
<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true"
[toolbarSettings]="toolbarItems" [editSettings]="editSettings" (cellEdit)="onGridCellEditEvents($event)">
<e-columns>
<e-column field="OrderID" headerText="Order ID" [isPrimaryKey]="true" width="80px"></e-column>
<e-column field="EmployeeID" headertext="Employee ID" width="85px" ></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="90px"></e-column>
<e-column field="Freight" headerText="Freight" width="85px" ></e-column>
<e-column field="CalculatedColumn" width="85px">
<ng-template e-template let-data>
<div>{{(data.EmployeeID*data.Freight)}}</div>
</ng-template>
</e-column>
</e-columns>
</ej-grid>
TS
export class AppComponent {
public editSettings;
public toolbarItems;
public gridData =
constructor() {
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode:"batch"};
this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};
}
onGridCellEditEvents(args:any){
var obj = $('.e-grid').ejGrid('instance');
var gridID = obj.element.attr(“id”);
var freight, empid;
if (args.columnName == "EmployeeID" || args.columnName == "Freight") {
freight = args.rowData.Freight;
empid = args.rowData.EmployeeID;
setTimeout(function (e) {
$("#" + gridID + "EmployeeID").keyup(function (event) {
var gridObj = $("#" + gridID).ejGrid('instance');
empid = $("#" + gridID + "EmployeeID").val();
gridObj.setCellValue(gridObj.selectedRowsIndexes[0], "CalculatedColumn", empid * freight);
});
$("#" + gridID + "Freight").keyup(function (event) {
var gridObj = $("#" + gridID).ejGrid('instance');
freight = $("#" + gridID + "Freight").val();
gridObj.setCellValue(gridObj.selectedRowsIndexes[0], "CalculatedColumn", empid * freight);
});
}, 0);
}
}
- The cellEdit event get triggered when we edit for a cell in Grid. In this event we have bound the keyup event in setTimeOut and we have set the other cell value using setCellValue method of ejGrid.
<script type="text/javascript">
var empid, freight, gridID;
function gridCellEditEvent(args) {
if (args.columnName == "EmployeeID" || args.columnName == "Freight") {
freight = args.rowData.Freight;
empid = args.rowData.EmployeeID;
gridID = this._id;
setTimeout(function (e) {
$("#" + gridID + "EmployeeID").keyup(function (event) {
var gridObj = $("#" + gridID).ejGrid('instance');
empid = $("#" + gridID + "EmployeeID").val();
gridObj.setCellValue(gridObj.selectedRowsIndexes[0], "CalculatedColumn", empid * freight);
});
$("#" + gridID + "Freight").keyup(function (event) {
var gridObj = $("#" + gridID).ejGrid('instance');
freight = $("#" + gridID + "Freight").val();
gridObj.setCellValue(gridObj.selectedRowsIndexes[0], "CalculatedColumn", empid * freight);
});
}, 0);
}
}
</script>
Result:
Figure 1: At Initial Rendering with batch editing enabled.
Figure 2: At Freight column value get changed then CalculatedColumn value get changed.
Figure 3: At EmployeeID column value get changed then CalculatedColumn value get changed.
