Ajax hierarchy grid is loading several times

4 posts, 0 answers
  1. ShareDocs
    ShareDocs avatar
    91 posts
    Member since:
    Oct 2012

    Posted 03 Dec 2017 Link to this post

    Hi,

    I have a hierarchy grid which is filled by a model after a post action ("search").

    In the search action i filled the model "Class" which contains an array of "Student".

    I checked with debugger the search action and i found out that all of the data was loaded successfully, also the inner grids data.( I actually saw the data in the view)

    The problem is that after the perfect first loading - surprisingly, the "search" action repeats itself for each inner-grid separately.

    My question is: how to prevent reloading  for each inner-grid?

    This is my code:

    @(Html.Kendo().Grid(Model.Class)
               .Name("ClassGrid")
               .Columns(column =>
               {
                   column.Bound(c => c.CodeClass).ClientTemplate("<a> #=CodeClass#  -  #=ClassName#</a>");
                   column.Bound(c => c.NumOfStudents);
               })
                    .Sortable()
                   .Groupable()
                   .ClientDetailTemplateId("HierarchyRows")
                   .Events(events => events.DetailInit("onDetailInit"))
                   .DataSource(data => data
                       .Ajax()
                       .PageSize(15)
                       .ServerOperation(false)
               ))

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

        @(Html.Kendo().Grid<Models.Student>()

                .Name("grid_#=NumStudent#")
                .Columns(s=>
                {
                            s.Bound(b => b.Age);

                            s.Bound(b => b.FirstName);
                })
                .Pageable()
               .DataSource(data => data .Ajax()
                                               .PageSize(5)
                                               .ServerOperation(false)
              )
            .ToClientTemplate()
        )
    </script>

    function onDetailInit(e) {
           var gridDetail = $("#grid_" + e.data.NumStudent).data("kendoGrid");
           gridDetail.dataSource.data(e.data.Classes);
        }

    I'll be glad to receive your help,
    Elad.

  2. ShareDocs
    ShareDocs avatar
    91 posts
    Member since:
    Oct 2012

    Posted 03 Dec 2017 in reply to ShareDocs Link to this post

    Hi,

    I forgot to ask anything else:

    If I have a lot of records (over two thousand) and I load them all at once ,

    the table will not load slowly ?

    Thanks,

    Elad .

  3. Stefan
    Admin
    Stefan avatar
    2479 posts

    Posted 05 Dec 2017 Link to this post

    Hello, Elad,

    In general, the Grid should make requests to the server only if it is bound to dataSource, as the Read is not set in the declarations, I can assume that it is making a request to a default URL. In this scenario, I can suggest setting the child Grid to autoBind false in order to not make initial requests to the server on load:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind

    https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridBuilder#methods-AutoBind(System.Boolean)

    As for the performance - it should not cause any noticeable issues as I noticed that both the Parent and the Child Grids have pageSize. The initial request could be slower only if the internet connection is weak, but this is not in control of Kendo UI or the developer making the application.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. ShareDocs
    ShareDocs avatar
    91 posts
    Member since:
    Oct 2012

    Posted 05 Dec 2017 in reply to Stefan Link to this post

    Hi,

    I added to the inner grid  " .AutoBind(false)"

    and that solved the problem!

    Thank you!

    Elad.

Back to Top