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

1 Answer 98 Views
Grid
Legion
Top achievements
Rank 1
Iron
Legion asked on 08 May 2024, 06:01 PM

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
Top achievements
Rank 1
commented on 14 May 2024, 05:53 AM

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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Legion
Top achievements
Rank 1
Iron
answered on 09 May 2024, 05:03 PM

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
Telerik team
commented on 13 May 2024, 09:32 AM

Hi Legion,

Thank you for sharing the solution with the community.


Kind Regards,
Anton Mironov

Tags
Grid
Asked by
Legion
Top achievements
Rank 1
Iron
Answers by
Legion
Top achievements
Rank 1
Iron
Share this question
or