如何选择Kendo UI网格的不同细节模板

Question

I have a kendo grid detail template like this example: http://demos.telerik.com/aspnet-mvc/grid/detailtemplate , and i want to select the different details of every master grid at once, but i only can select one detail template of a master grid.

I need to get all the rows selected of every different detail template of a master grid. Here is the javascript code that only get the selected rows of one detail template:

$('#send').click(function () {
            var items = {};
            var grid = $('.k-detail-row .k-grid').data('kendoGrid');
            var selectedElements = grid.select();
            for (var j = 0; j < selectedElements.length; j++) {
                var item = grid.dataItem(selectedElements[j]);
                items['anyName[' + j + '].CodMarca'] = item.CodMarca;
            }
            $.ajax({
                url: '@Url.Action("Index", "Busqueda")',
                type: "POST",
                async: false,
                data: items,
                success: function (result) {
                    console.log(result);
                }
            })
        })

With this part of the code i only get one detail template and no the others:

var grid = $('.k-detail-row .k-grid').data('kendoGrid');

I really need to select the other detail templates too.

Answer 1

You need to iterate through all the detail grids...you are only processing the first one.

When you do this: var grid = $('.k-detail-row .k-grid').data('kendoGrid'); you are just getting a reference to the first detail grid even if $('.k-detail-row .k-grid') returns more than one matching element. This is the way jQuery works...it will return the data() of the first element of the returned array...it will not return the .data() of all the returned matches.

So, you have to iterate through the returned matches yourself, get the grid reference attached to the match, get the selected rows, move on to the next grid/match, ie:

var items = [];
var grids = $('.k-detail-row .k-grid');

// Loop through the grids.                
for (var i = 0; i < grids.length; i++) {
    var grid = $(grids[i]).data('kendoGrid');
    var selectedElements = grid.select();

    // Loop through the selected items of the *current* grid.
    for (var j = 0; j < selectedElements.length; j++) {
        var item = grid.dataItem(selectedElements[j]);

        items.push(item);
    }
}

// Do whatever you want with the collected items.
console.log(items);

Demo