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

[Gerald]

This is exactly what I am looking for - but it is not working.  When I try running it in your REPL - that does not work either.  Am I missing something?

[Mihaela]

Hi Gerald,

I tested the REPL and the respective data item is logged in the browser console as expected at my end:

Would you share your code to review it?

Best,

Mihaela

[Gerald]

Thank you for the response.  Not sure what is going on - I tried the exact same thing and it does not produce results in the console.  I did get it to work following a slightly different approach though.  When I try to run the REPL example, I also do not get the same results in the console.

[Mihaela]

Hello Gerald,

Would you share the REPL sample that does not work as expected at your end? I will review it and follow up with the respective solution.

Best,

Mihaela