Is it possible to pass a parameter to the javascript function specified in a grid column custom command?

[Legion]

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))))

What I want to do is pass the id specified in the `.Model` line to the javascript functions `meVM.editSalaryIncrease` and `meVM.deleteSalaryIncrease`. When I look at the documentation it always uses `this.dataItem($(e.currentTarget).closest("tr"))` to find the dataItem and get the Id. The problem is I have javascript classes acting as client-side view models. The functions on those view models are defined as arrow functions so that `this` points to the class and I can call private functions. But if I do that here, then `this` will not contain dataItem. All of this could be resolved if I could just call `meVM.editSalaryIncrease(Id)` to pass the parameter. How can I do this?

[Nelson]

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.

[Legion]

I figured it out.

Change the command.Custom line to:

command.Custom("Delete").Click("function(e) { meVM.deleteSalaryIncrease(this, e); }");

And set the function signature in the class to:

deleteSalaryIncrease = (sender, e) =>

 

[Anton Mironov]

Hi Legion,

Thank you for sharing the solution with the community.

Kind Regards,
Anton Mironov