Send selected rows values of a detail template grid

[Juan]

I have a detail template like this example http://demos.telerik.com/aspnet-mvc/grid/detailtemplate. Hte thing is that i want to send the selected rows values to a controller.

When i have a simple grid i send the selected values like this :

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

But when i try to send the selected values of the detail template like this it never call the action Index:

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

 

This is my detail template code:

<script id="client-template" type="text/x-kendo-template">
                    @(Html.Kendo().TabStrip()
                                        .Name("tabStrip_#=CodMarca#")
                                        .SelectedIndex(0)
                                        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
                                        .Items(items =>
                                        {
                                        items.Add().Text("Más Datos").Content(@<text>
                        @(Html.Kendo().Grid<TelerikMvcApp4.Models.MarcaParecido>()
                                               .Name("grid_#=CodMarca#")
                                               .Columns(columns =>
                                               {
                                                   columns.Bound(o => o.DescMarca).Title("Marca").Width(110);
                                                   columns.Bound(o => o.DescTitular).Title("Titular").Width(300);
                                                   columns.Bound(o => o.PorcentajeSimilitud).Title("% Similitud").Width(70)
                                                   .HtmlAttributes(new { style = "text-align:right" });
                                                   columns.Bound(o => o.PorcentajeError).Title("% Error").Width(70)
                                                   .HtmlAttributes(new { style = "text-align:right" });
                                                   columns.Bound(c => c.EnviarCorreo).ClientTemplate("<input type='checkbox' />").Title("¿Enviar?").Filterable(false).Width(120).HtmlAttributes(new { @onclick = "click" });
                                               })
                                                .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .PageSize(5)
                                                .Read(read => read.Action("MarcaParecidoDetalle", "Busqueda", new { codMarca = "#=CodMarca#" }))
                                                )
                                                .Selectable(s => s.Mode(GridSelectionMode.Multiple))
                                                .ToClientTemplate())
                                        </text>
                                        );
                                        })
                                    .ToClientTemplate()
                    )
                </script>

 

I hope someone can help me.

[Konstantin Dikov]

Hello Juan,

In the context of the click handler, the following selector will fail, because it will replace the model value from the parent item only in the context of the template:

$('#grid_#=CodMarca#')

You need to replace the above with a selector that will get reference to the nested grid. For example, if there is only one visible detail template you can use the following:

$(".k-detail-row .k-grid")

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[Juan]

Thanks for your answer. Now it is call the Index Action but it´s sending null tha array in the controller.

This is how I usually declare the controller

public ActionResult Index(MarcaParecido[] GridMarcaPar)
        { ... }

 

The name of the parameter usually calls the same way as the grid name, and in this case that you show me i can't call the parameter like this (obviously)

public ActionResult Index(MarcaParecido[] .k-detail-row .k-grid)
        { ... }

How do you suggest to call my paramater name?

 

And this part to, how can i name this 

items['grid[' + j + '].CodMarca'] = item.CodMarca; //i guess i can' t call this way too items['.k-detail-row .k-grid['+ j +'].CodMarca]

[Konstantin Dikov]

Hi Juan,

The "items['GridMarcaPar[...." part specifies the name of the collection that will be passed to the controller, so for the detail grid you can either use the same syntax or any other valid name. Note that this is not related to the Grid in any way and it is a general question for passing an array to a controller:

• http://stackoverflow.com/questions/5489461/pass-array-to-mvc-action-via-ajax

Regards,
Konstantin Dikov
Telerik by Progress

[Juan]

And another thing, what do you mean by"replace with a selector that will get reference to the nested grid."?

Any idea of how can i do that specially if i have more than one visible detail template.

Sorry for  lots of questions

[Juan]

Any idea  of how can i do this when i have a lots of detail templates that i selected? Because when i put like this:

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;
                }

 

It only select the first detail template and no the others, and i really need to select the other detail templates too.
I'll wait for your answer.

[Konstantin Dikov]

Hi Juan,

You will have to get reference to each detail row and initialize each nested Grid. You can use something like the following:

var items = {};

$('.k-detail-row .k-grid').each(function () {
    var grid = $(this).data("kendoGrid");
    var selectedElements = grid.select();
    for (var j = items.length; j < selectedElements.length + items.length; j++) {
        var item = grid.dataItem(selectedElements[j]);
        items['anyName[' + j + '].CodMarca'] = item.CodMarca;
    }
}

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress