Send selected rows values of a detail template grid

7 posts, 0 answers
  1. Juan
    Juan avatar
    24 posts
    Member since:
    Oct 2016

    Posted 26 Nov 2016 Link to this post

    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.

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 28 Nov 2016 Link to this post

    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
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Juan
    Juan avatar
    24 posts
    Member since:
    Oct 2016

    Posted 28 Nov 2016 in reply to Konstantin Dikov Link to this post

    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]

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 28 Nov 2016 Link to this post

    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:

    Regards,
    Konstantin Dikov
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  5. Juan
    Juan avatar
    24 posts
    Member since:
    Oct 2016

    Posted 28 Nov 2016 in reply to Konstantin Dikov Link to this post

    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

  6. Juan
    Juan avatar
    24 posts
    Member since:
    Oct 2016

    Posted 29 Nov 2016 Link to this post

    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.

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 30 Nov 2016 Link to this post

    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
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Back to Top