Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
143922 | Apr 10,2019 05:02 PM UTC | Apr 15,2019 11:21 AM UTC | ASP.NET Core - EJ 2 | 5 |
![]() |
Tags: DataGrid |
@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add("Add");
toolbarItems.Add("Delete");
toolbarItems.Add("Update");
toolbarItems.Add("Cancel");
// create custom toolbar
toolbarItems.Add(new { text = "Edit", tooltipText = "Edit", id = "Edit" });
}
<ejs-grid id="Grid" allowPaging="true" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>
<e-data-manager url="/home/UrlDatasource" batchUrl="/Home/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
. . . .
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
args.originalEvent.stopPropagation();
if (args.item.id === 'Edit') {
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
// check row is selected or not
if (grid.getSelectedRecords().length === 0) {
grid.selectRow(0) // if no row selected then select first row
}
// edit cell using editCell Method
grid.editModule.editCell(Math.min(...grid.getSelectedRowIndexes()), "CustomerID");
}
}
</script> |
@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add("Add");
toolbarItems.Add("Delete");
toolbarItems.Add("Update");
toolbarItems.Add("Cancel");
toolbarItems.Add(new { text = "Edit", tooltipText = "Edit", id = "Edit" });
}
<ejs-grid id="Grid" allowPaging="true" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>
<e-data-manager url="/home/UrlDatasource" batchUrl="/Home/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="130" textAlign="Right"></e-grid-column>
<e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
args.originalEvent.stopPropagation();
if (args.item.id === 'Edit') {
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
if (grid.getSelectedRecords().length > 0 && grid.selectionModule.target.nodeName === "TD") {
// based on the target we have edit the column
grid.editModule.editCell(Math.min(...grid.getSelectedRowIndexes()), grid.getColumns()[parseInt(grid.selectionModule.target.getAttribute('aria-colindex'))].field);
}
}
}
</script> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.