Get cell value in a selected row in Grid with clicking a button

[CHIHPEI]

Scenario:

I had a grid with datas,
and in the last cell of each row there is a command custom button with click event,
which the click event will leads to a javascript function,
I would like to access the specific cell value of the selected row.

Tried:

I've noticed that Telerik UI for jQuery has the "select" method Telerik UI for jQuery Select method,
and I got the row with instructions,
but how can I get the cell value?
got no idea since I am new with jQuery,
I'll show what I've tried below

MyView.cshtml

<div>
        @(Html.Kendo().Grid<MyViewModel>()
        .Name("my-kendogrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ItemName).Title("Moniter").Width(75);
            columns.Bound(c => c.EqStartTime).Title("StartTime").Width(50).Format("{0:yyyy-MM-dd HH:mm:ss}");
            columns.Bound(c => c.EqEndTime).Title("EndTime").Width(50).Format("{0:yyyy-MM-dd HH:mm:ss}");
            columns.Command(c => c.Custom("MyForm").Click("getRowValue")).Title("Datas").Width(30);
        })
        .Pageable()
        .Scrollable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("GetData", "QueryData", new { ID = instId, startTime = startTime, endTime = endTime }))
            .Model(m => {
                m.Id(id => id.id);
                m.Field(f => f.id).Editable(false);
            })
        )
        )
</div>

 

MyJavascript.js

function getRowValue() {
    
    // What I've tried so far
    var grid = $("#my-kendogrid").data("kendoGrid")
    var rows = grid.select();

    //get seleted Row while clicking the inline button

    //get cell value in the row
}

[Mihaela]

Hello CHIHPEI,

Thank you for the provided code snippets.

You can get the dataitem of the selected Grid row as per the example below:

function getRowValue(e) {
        e.preventDefault();
        var grid = $("#my-kendogrid").data("kendoGrid"); //Get an instance of the Grid
        var dataItem = grid.dataItem($(e.currentTarget).closest("tr")); //pass the selected Grid row element to the dataItem() method
        console.log(dataItem);
        var selectedItemName = dataItem.ItemName; //Get the "ItemName" value of the selected Grid row
}

Here is a REPL example for your reference:

https://netcorerepl.telerik.com/GcYjwZPF20LwhZUe56

If you have any further questions, don't hesitate to let me know.

 

Regards, Mihaela Progress Telerik

[CHIHPEI]

Hi Mihaela,

thanks for helping.

This is exactly what I'm looking for.

Big thanks again