Grid: Bind a ClientDetailTemplate to a collection in parent row

8 posts, 0 answers
  1. Daniel Grünberger
    Daniel Grünberger avatar
    55 posts
    Member since:
    May 2008

    Posted 14 Mar 2013 Link to this post

    Hi,

    I have a Grid with a ClientDetailTemplate, which also contains a Grid. Currently the grid has to make a request to the server for each row the user expands. But actually I already have my data loaded in the grid and could provide it in a collection property on the parent row. Is it possible to tell the Childgrid in the template to get the data from the parent row instead of requesting it from the server?

    Thanks in advance. 
  2.
  3. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 18 Mar 2013 Link to this post

    Hello David,


    To skip the request to the server, you could set the dataSource of the detail Grid explicitly in the detailInit event of the master Grid.
    E.g.
    @(Html.Kendo().Grid<Customer>()  
        .Name("Grid")
        ...
        .ClientDetailTemplateId("products")
        .Events(e => e.DetailInit("detailInit"))
        ...
    )
      
    <script id="products" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<Product>()
                   .Name("Products_#=Name#")
                   .ToClientTemplate()
         )
    </script>
      
    <script>
        function detailInit(e) {
            var grid = $("#Products_" + e.data.Name).data("kendoGrid");
            grid.dataSource.data(e.data.Products);
        }
    </script>

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Daniel Grünberger
    Daniel Grünberger avatar
    55 posts
    Member since:
    May 2008

    Posted 18 Mar 2013 Link to this post

    Hi,

    I've tried it and it works, thank you ;)

    On a different page I tried the same approach, but it didn't work. On this page I need all ClientDetailTemplates to be expanded, when the page is loaded. So I call this function in the document.ready handler:
    function expandRows() {
        var grid = $('#commissionGrid').data('kendoGrid');
     
        var rows = grid.tbody.find('>tr.k-master-row');
     
        for (var i = 0; i < rows.length; i++) {
            grid.expandRow(rows.eq(i));
        }
    }

    When I use this function to expand all rows, I receive an exception in the detailInit handler. which says, the the dataSource on 'undefined' cannot be found. It seems like the Grid with the specified ID (#Products_+Name in your example) cannot be found at this point in time. I populate the grid with the "BindTo" method to my model, so I dont have to wait for an additional request to be finished.

    Do you know what could be the problem here? Or is there another way to expand all rows when the page is loaded?

    Greets



  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 18 Mar 2013 Link to this post

    Hello David,


    To expand all master rows, you should bind to the dataBound event (on document ready is too early, because the grid data is not ready) and expand the rows using the expandRow method. Please note that it can also accept a collection of rows.
    E.g.
    .Events(events => events.DataBound("dataBound"))

    function dataBound(e) {
        this.expandRow(this.tbody.find("> tr"));
    }

      

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Daniel Grünberger
    Daniel Grünberger avatar
    55 posts
    Member since:
    May 2008

    Posted 19 Mar 2013 Link to this post

    Hi,

    thank you again for your reply.

    I've tried your solution but unfortunately it still seems to be too early to expand the rows. Maybe that's because I'm loading too much data?

    I've also found something interesting:
    function dataBound(e) {
        //expandAll(); // -> doesnt work
        setTimeout(function() { expandAll(); }, 1); // -> works
    }
    If I call the expand function directly, it doesnt work. But if I call it with an timeout of 1ms, it works.

    I didnt find any event that occurs after the dataBound-event. So do you know a more elegant solution than the setTimeout function?

    Greets.



  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 19 Mar 2013 Link to this post

    Hello David,


    The code that I provided in my previous post is working on my side. The dataBound event is fired after the Grid has received the data. I am attaching a sample solution to demonstrate this. Could you take a look at it and let me know if it covers your scenario? If that is not the case, could you send me a sample project, where the issue is reproducing, so I could test it locally and assist you further?

     

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Dawn
    Dawn avatar
    10 posts
    Member since:
    Apr 2016

    Posted 17 Feb 2017 Link to this post

    I have attempted to implement the above however when I expand the row to see the detail and initdetail is called, but it doesn't seem to be able to find the grid.  I have checked and it is named correctly etc.  I have my main grid with initdetail specified, then this

     

    <script id="PropertyChanges" type="text/kendo-tmpl">
        
    @(Html.Kendo().Grid<AuditChangeDetailVM>()
    .Name("gridAuditChanges_#=AuditID#")
    .Columns(columns =>
    {
    columns.Bound(p => p.ChangeDescription);
    })
    .ToClientTemplate()
    )
    </script>

     

     

    function detailInit(e) {

    var grid = $("#gridAuditChanges_" + e.data.AuditID).data("kendoGrid"); 
                grid.dataSource.data(e.data.Changes);

    }

  14.
  15. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 21 Feb 2017 Link to this post

    Hello Dawn,

    In order to investigate this case we would need a runnable sample example of your scenario. At first sight the code seems fine and the Kendo UI Grid should be accessed successfully.  For example please take a look at the client-hierarchy example. In the detailInit event the child grid instance exists and can be accessed as demonstrated in the code below: 

     

    .Events(ev => ev.DetailInit("detailInit"))

    function detailInit(e) {
            var grid = $("#grid_" + e.data.CategoryID).data("kendoGrid");
        }

     

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top