Kendo Grid: get all data from row with checked radio button

Question

I've looked all over for help on this, which should be extremely easy, but I can't find exactly what I need. Here is my jsFiddle, which contains a super basic Kendo grid. I just want to get all data for the row that is currently selected (using a column of radio buttons) when the button is clicked.

http://jsfiddle.net/HTXua/412/

I know that when a row is selected, it is altering a property in the css class. Therefore, the row that I am trying to retrieve is going to have the property:

.detailGridRowSelector:checked

I have managed to implement the first row using checkboxes (instead of radio buttons) and count how many are checked, but I can't access the data for some reason!

var dataSource = {
data: [
    {
    "first": "Adam",
    "last": "Paul"},
    {
    "first": "Shannon",
    "last": "Harris"},
    {
    "first": "Frank",
    "last": "Rolinson"},
    ]
};

var columns = [
    {
        template:'<input type="radio" class="detailGridRowSelector" title="Select Lines" name="radioLineSelector" />', width: 20
        },
    {
field: "first",
title: "First Name",
width: "90px"},
{
field: "last",
title: "Last Name",
width: "90px"},
];

    $("#grid1").kendoGrid({
    dataSource: dataSource,
    columns: columns,
});

$("#getInfoButton").bind("click", function () {

    var lineData ="line data would be set here";
    //I know the selected row has the property: .detailGridRowSelector:checked
    alert(lineData);

});

Answer 1

You should do:

// Get a reference to the grid
var grid = $("#grid1").data("kendoGrid");
// Get checked row by getting the input and then the row containing the input
var row = $("input:checked", grid.tbody).closest("tr");
// Get the item
var item = grid.dataItem(row);
// Format and display item
alert (JSON.stringify(item));

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/HTXua/414/