Here's my grid:
@(Html.Kendo().Grid<SalaryIncrease>()
.Name("SalaryIncreaseGrid")
.Columns(columns =>
{
columns.Command(command =>
{
command.Custom("Edit").Click("meVM.editSalaryIncrease");
command.Custom("Delete").Click("meVM.deleteSalaryIncrease");
}).Width(100);
columns.Bound(p => p.FiscalYear).Title("Fiscal Year").Width(250);
columns.Bound(p => p.SalaryIncreaseCategory.Name).Title("Salary Increase Category").Width(400);
columns.Bound(p => p.CurrencyId).Title("Currency").Width(250);
columns.Bound(p => p.IncreaseAmount).Title("Increase Amount").Width(500).Format("{0:###,##0.00}");
columns.Bound(p => p.EffectiveDate).Title("Effective Date").Width(500).Format("{0:yyyy-MM-dd}");
})
.Pageable(pageable => pageable
.Refresh(false)
.PageSizes(new[] { 5, 10, 25, 50, 100 })
.ButtonCount(6)
)
.Sortable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Scrollable()
.ColumnMenu(menu => { menu.ComponentType("modern"); })
.Events(e => e.DataBound("meVM.onSalaryIncreaseGridDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(10)
.Model(model => model.Id(p => p.Id))
.ServerOperation(false)
.Read(read => read.Url("/Employee/ManageEmployee?handler=SalaryIncrease_Read").Type(HttpVerbs.Get))))
You can modify your Kendo Grid setup to pass the Id to the editSalaryIncrease and deleteSalaryIncrease functions directly without relying on this.dataItem($(e.currentTarget).closest("tr")). Here's how you can do it:
Modify the column definitions in your grid to include the Id as a hidden column:
columns.Bound(p => p.Id).Hidden();
This will ensure that the Id is included in the grid's data but not visible to the user.
Update the command buttons (Edit and Delete) to pass the Id to the respective JavaScript functions:
columns.Command(command =>
{
command.Custom("Edit").Click("function(e) { meVM.editSalaryIncrease(e.dataItem.Id) }");
command.Custom("Delete").Click("function(e) { meVM.deleteSalaryIncrease(e.dataItem.Id) }");
}).Width(100);
In the above code, e.dataItem.Id is used to access the Id property of the clicked row's data item.
Modify your JavaScript view model (meVM) to accept the Id parameter in the editSalaryIncrease and deleteSalaryIncrease functions:
var meVM = {
editSalaryIncrease: function(id) {
// Your edit logic using the passed id
},
deleteSalaryIncrease: function(id) {
// Your delete logic using the passed id
},
// Other view model functions and properties
};
Now, when you click the Edit or Delete buttons in the grid, the respective JavaScript functions will receive the Id of the corresponding row, allowing you to perform actions based on that Id.
This approach bypasses the need to use this.dataItem($(e.currentTarget).closest("tr")) and directly passes the Id as a parameter to your functions.