获取所有行的完整数据，其中通过jquery在telerik网格中选中复选框并将其存储在数组中

Question

I am using Telerik grid in MVC 3 and I have a grid having some columns, and each row has a checkbox. On the submit of the Ok button I want all the data of the grid to be fetch, from the row in which the checkbox is checked. I want to get records of each column to be stored in a separate array. And I want to do this using a jquery.

What should I do for this?

I did something like this to get the count of checkboxes checked in a grid:

function getData() {
    debugger;
    var Records = $(':checked');
    var checkedRecords = Records.length - 2;
    if (checkedRecords < 1) {
        alert('Check a few checkboxes first.');
        return checkedRecords;
    }
    else {
        alert("RecordsChecked: " + checkedRecords);
    }
}

getData() is a function which will called on click of Ok button.

Please suggest me something...

This is my Telerik grid code:

<% Html.Telerik().Grid<Model>()
        .Name("TelerikGrid")
        .ToolBar(toolbar => toolbar.Template(
                            Html.Resource("Grid")))
                             .DataKeys(keys =>
                             {
                                 keys.Add(o => o.EmployeeID);
                             })
            .Columns(columns =>
            {
                columns.Bound(m => m.EmployeeID)
                   .ClientTemplate("<input type='checkbox' name='Employee1' onclick='return function1(this);' id='Employee1' />")
                columns.Bound(m => m.EmpFName).Title("F Name").ReadOnly(true).Width(65);
                columns.Bound(m => m.EmpLName).Title("L Name").ReadOnly(true).Width(70);
                columns.Bound(m => m.Task).Title("Task")
                    .ClientTemplate("<div id='textbox1'><input type='textbox' name='Task' id='Task' disabled='disabled' new { style='width:55px'} value='<#=Task#>' /></div>").Width(53);
            })
            .DataBinding(databinding => databinding
                                    .Ajax()
                                    .Select("GetData", "Home”)
            )
        .Selectable()
        .Render();
    %>

Answer 1

I don't think we understand each other. But I will give you an answer that works with a Telerik Grid rendered as a table. So suppose this is your grid:

<table cellspacing="0"><colgroup>
<col style="width:45px">
<col style="width:100px"><col style="width:200px"><col><col style="width:120px"></colgroup><tbody>
<tr><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10248</td><td>Paul Henriot</td><td>59 rue de l'Abbaye</td><td>07/04/1996</td></tr>
<tr class="t-alt"><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10249</td><td>Karin Josephs</td><td>Luisenstr. 48</td><td>07/05/1996</td></tr>
<tr><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10250</td><td>Mario Pontes</td><td>Rua do Paço, 67</td><td>07/08/1996</td></tr>
<tr class="t-alt"><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10251</td><td>Mary Saveley</td><td>2, rue du Commerce</td><td>07/08/1996</td></tr>
<tr><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10252</td><td>Pascale Cartrain</td><td>Boulevard Tirou, 255</td><td>07/09/1996</td></tr>
<tr class="t-alt"><td><input type='checkbox' name='SelectedEmployee' id='SelectedEmployee' /></td><td>10253</td><td>Mario Pontes</td><td>Rua do Paço, 67</td><td>07/10/1996</td></tr>
</tbody></table>

So your grid has the following columns, in order, from left to right:

• the checkbox - first column
• the id of an employee - second column
• the name of an employee - third column

Now to answer your question:

On the submit of the Ok button I want all the data of the grid to be fetch, from the row in which the checkbox is checked

You can call a function that will build your array object in jquery like this:

function readGrid() {
    var employees = [];

    $('[name="SelectedEmployee"]:checked').each(function() {
        var row = $(this).closest('tr');                                
        var emp = {
            // we start at 2 because the first one is the checkbox
            // also it would be easier if you have an id for each of the column
            // and do this row.find('#idCol') / row.find('#nameCol')
            id: row.find('td:nth-child(2)').text(),
            name: row.find('td:nth-child(3)').text(),
        };                
        employees.push(emp);
    });       
}