Main grid with multiple nested subgrids

2 posts, 0 answers
  1. tam
    tam avatar
    13 posts
    Member since:
    Apr 2015

    Posted 17 May 2015 Link to this post

     

    Hello,

    Please give me an idea how to do multiple nested subgrids.  please see the attachment for more details.

    I have a main grid (one row), a subgrid1 (9 rows) and below the subgrid1 with 5 hyperlinks.

    If a user clink on a hyperlink then a subgrid2 will show the data. If the user click on the different hyperlink then the subgrid2 will be updated.

    My question:

    how to add 5 hyperlinks below subgrid1.

    how to show subgrid2 when a user click on a hyperlink.

    Thank you!!! 

     

  2. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 19 May 2015 Link to this post

    Hello Tam,

    I would suggest you to use detailTemplate in order to add hyperlinks and subgrids. Please take a look at the example below: 

    <script id="template" type="text/kendo-tmpl">
        <a id="show" href="\\#">Show</a>
     
        @(Html.Kendo().Grid<OrderViewModel>()
            ...
                 .HtmlAttributes(new { style = "display: none;" })
            .ToClientTemplate())
    </script>

    Since the Grids should be hidden initially, you could add the display: none CSS property via the HtmlAttributes() method. In order to display them, you can use the click event  of the links as demonstrated below: 

    $("#grid").on("click", "#show", function (e) {
            e.preventDefault();
     
            var grid = $(this).next(".k-grid").show();
     
    });

     

    Regards,
    Plamen Lazarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top