Optional Hierarchy Grid

4 posts, 1 answers
  1. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 14 Feb 2018 Link to this post

    Does the capability exist to only have a hierarchy grid available for specific records.  Basically is there a way to dynamically set the .ClientDetailTemplateId?
  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    119 posts

    Posted 15 Feb 2018 Link to this post

    Hello Erik,

    The functionality you describe can be implemented by taking advantage of Kendo UI Template Conditionals inside the template specified by the ClientDetailTemplateId property; you can read more about Templates and their syntax here.

    For example:

    <div>
       @(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
          .Name("Grid")
          .Columns(columns =>
          {
             columns.Bound(p => p.ID);
             columns.Bound(p => p.Name);
          })
          .Filterable()
          .Sortable()
          .ClientDetailTemplateId("template")
          .DataSource(dataSource => dataSource
             .Ajax()
             .Read(read => read.Action("Grid_Read", "Home"))
             .Model(model => { model.Id(p => p.ID); })
          )
       )
    </div>
     
    <script id="template" type="text/kendo-tmpl">
       #if(ID > 2){#
          @(Html.Kendo().Grid<MvcApplication1.Models.TestFullCalender>()
             .Name("grid_#=ID#")
             .Columns(columns =>
             {
                columns.Bound(o => o.id).Width(70);
                columns.Bound(o => o.title).Width(70);
             })
             .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("Grid_ReadChild", "Home", new { ID = "#=ID#" }))
             )
             .Pageable()
             .Sortable()
             .ToClientTemplate()
          )
       #}#
    </script>

    I hope this helps!

    Regards,
    Eduardo Serra
    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.
  3. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 15 Feb 2018 Link to this post

    Your answer gets me almost there. Is it possible to completely hide the expandable triangle indicator that is shown on the far-left of the parent grid on each row?  I would prefer for the records that do not have the details grid available to not even allow the user to try and expand them.
  4. Answer
    Eduardo Serra
    Admin
    Eduardo Serra avatar
    119 posts

    Posted 16 Feb 2018 Link to this post

    Hello Erik,

    Hiding the expand arrow is also possible and could be considered as an alternative to the solution provided before. We can hide it by subscribing to the dataBound event of the Kendo UI Grid API and looping through the rows in order to remove the arrow using jQuery's remove method.

    I have prepared a sample in the Kendo UI Dojo demonstrating the approach described above; you can take a look at it here.

    I hope this helps!

    Regards,
    Eduardo Serra
    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.
Back to Top