This is a migrated thread and some comments may be shown as answers.

Optional Hierarchy Grid

3 Answers 189 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 14 Feb 2018, 05:21 PM
Does the capability exist to only have a hierarchy grid available for specific records.  Basically is there a way to dynamically set the .ClientDetailTemplateId?

3 Answers, 1 is accepted

Sort by
0
Eduardo Serra
Telerik team
answered on 15 Feb 2018, 04:59 PM
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.
0
Erik
Top achievements
Rank 1
answered on 15 Feb 2018, 06:47 PM
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.
0
Accepted
Eduardo Serra
Telerik team
answered on 16 Feb 2018, 06:10 PM
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.
Tags
Grid
Asked by
Erik
Top achievements
Rank 1
Answers by
Eduardo Serra
Telerik team
Erik
Top achievements
Rank 1
Share this question
or