Loading data on grid row select

2 posts, 0 answers
  1. Ben
    Ben avatar
    7 posts
    Member since:
    Nov 2012

    Posted 24 Jan 2013 Link to this post


    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">




                .Items(items =>


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



                            .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


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








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

                            "<ul>" +

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

                            "</ul>" +






    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?

  2. Vladimir Iliev
    Vladimir Iliev avatar
    2155 posts

    Posted 28 Jan 2013 Link to this post

    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
            url: "/Home/GetRecordData?id=" + dataItem.recordId
        }).done(function( html ) {

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
Back to Top