Do i have access to grid row data inside a command column?

1 Answer 16 Views
Data Source Grid Templates
John
Top achievements
Rank 1
Veteran
John asked on 21 May 2021, 02:46 PM

We have two grids in our site that have a custom command button declared similarly to this:

columns.Command(cmd => cmd.Custom("Unaudit").Click("unaudit")).Width(60);

unaudit is a javascript function.  Works ok but inside unaudit we have to jump through hoops to get the data we want, the id of the record in that grid row.


        var id = this.dataItem($(e.currentTarget).closest("tr")).ID;

Is there a way to access the data object and pass just a field to the javascript function?
example (not working)

columns.Command(cmd => cmd.Custom("Unaudit").Click("unaudit(data.ID)")).Width(60);

Help is appreciated.  Thanks.  Note that if i am required to use a client template column instead, i do know how to do that but was hoping i wouldn't have to do that.

 

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 26 May 2021, 12:28 PM

Hello John,

Yes, I confirm that the required behavior is absolutely achievable.

Furthermore, you are totally correct with the approach of getting the closest row. As in your example, the "id" variable is actually the needed row. In order to get the dataItem of this row(the model with all properties - id, name, etc.), I would recommend trying the dataItem method of the Kendo UI Grid:

var dataItem = grid.dataItem(put the founded row here);
I hope this information helps.

 

Kind Regards,
Anton Mironov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

John
Top achievements
Rank 1
Veteran
commented on 26 Jul 2021, 01:20 PM

that looks like i need to use javascript to do that, which means client template?
Anton Mironov
Telerik team
commented on 29 Jul 2021, 11:42 AM

Hi John,

No Client Template is needed for the case.

In order to achieve the desired behavior, use a Custom Command button as follows:

columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(180);
In the "Click" Event handler(the "showDetails" function), get the needed row and use it for getting the dataItem:
    function showDetails(e) {
        var grid = $("#grid").data("kendoGrid");
        var row = $(e.currentTarget).closest("tr")[0];
        var dataItem = grid.dataItem(row);
        console.log(dataItem.OrderID);
    }
Attached is a sample project that I prepared for the case. It includes the approach above.

Make the needed tests locally and let me know if this is the expected behavior(clicking a custom button will log the "OrderID" property of the Model in the Developer Tools Console).

Best Regards,
Anton Mironov

Tags
Data Source Grid Templates
Asked by
John
Top achievements
Rank 1
Veteran
Answers by
Anton Mironov
Telerik team
Share this question
or