Loading data on grid row select

[Ben]

Hi

I have a grid with a detail template that includes a tabstrip with a grid. This works fine but when I select a row on the grid in the detail template I want it to load data based on that row in the grid in the second tab.

This is the code for the details template

<script id="employeesTemplate" type="text/kendo-tmpl">

    @(Html.Kendo().TabStrip()

            .Name("TabStrip_#=ReqId#")

            .SelectedIndex(0)

            .Items(items =>

            {

                items.Add().Text("Exposure Scenarios").Content(@<text>

                    @(Html.Kendo().Grid<Sypol.Matcon.Infrastructure.Models.ExpScen>()

                        .Name("Orders_#=ReqId#")

                        .Columns(columns =>

                        {

                            columns.Bound(o => o.ExpId).Width(101);

                            columns.Bound(o => o.Quantity).Width(140);

                            columns.Bound(o => o.Freq).Width(200);

                            columns.Bound(o => o.Number);

                            columns.Bound(o => o.ContCode);

                            columns.Bound(o => o.SubCont);

                            //columns.ForeignKey(o => o.EXPID, (IEnumerable)ViewData["activities"], "EXPID", "METHOD");

 

                        })

                        .DataSource(dataSource => dataSource

                            .Ajax()

                            .Read(read => read.Action("HierarchyBinding_Orders", "InTray", new { reqID = "#=ReqId#" }))

 

                        )

                        .AutoBind(true)

                        .ToClientTemplate())

                </text>                        

                );

                items.Add().Text("Details").Content(

                    "<div class='employee-details'>" +

                        "<ul>" +

                            "<li><label>Code:</label>#= ExpId#</li>" +

                        "</ul>" +

                    "</div>"

                );               

            })

            .ToClientTemplate())

</script>

I basically want to fill the 'Details' tab with data from the selected row on the grid. At the moment I can only manage to add data from the Parent grid. Is it possible to do this or would I have to create another details template to get this information?

Thanks

[Vladimir Iliev]

Hi Ben,

 
For example you can use the Change event of the child grid to get the selected row dataItem, get the second tab content based on given property from the model and set it using jQuery. Please find the example below:

function onChange(e) {

    //get currently selected dataItem
    grid = e.sender;
    selectedRow = grid.select();
    dataItem = grid.dataItem(selectedRow);

    //get the tabstrip
    gridWrapper = grid.wrapper;
    tabstrip = gridWrapper.closest("[data-role=tabstrip]").data("kendoTabStrip");
    tabContentElement = $(tabstrip.contentElement(1));

    //Request new data for second tab with Query string parameter from selected row
    $.ajax({
        url: "/Home/GetRecordData?id=" + dataItem.recordId
    }).done(function( html ) {
        tabContentElement.html(html);
    });
}

Kind Regards,
Vladimir Iliev
the Telerik team