Conditionally Hide Expand Icons for the Detail Template in the Grid

Environment

Product	Telerik UI for ASP.NET Core Grid
Product Version	2024.1.130

Description

How can I hide the expand icon for the detail template in a Telerik UI for ASP.NET Core Grid based on a HasChildren value that is defined as Model property?

Solution

1. Traverse the rows of the parent Grid within the DataBound event.
2. To retrieve the data item, access the <tr> element by using the dataItem() client-side method of the Grid.
3. Conditionally hide the icon based on the HasChildren field.

    <script id="template" type="text/kendo-tmpl"> // Child Grid
        @(Html.Kendo().Grid(@childData)
            .Name("grid#=Id#")
            .Columns(columns =>
            {
                columns.Bound(p => p.ChildName).Title("Child Name");
            })
            .Pageable()
            .Sortable()
            .Filterable()    
            .DataSource(dataSource => dataSource        
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)        
             )
             .ToClientTemplate()
        )
    </script>

    @(Html.Kendo().Grid(@parentData) // Parent Grid
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ParentName).Title("Parent Name");

        })
        .Events(events => events.DataBound("onDataBound"))
        .Pageable()
        .Sortable()
        .Filterable()    
        .ClientDetailTemplateId("template")
        .DataSource(dataSource => dataSource        
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)        
         )
    )

    <script id="template" type="text/html"> // Child Grid
        <kendo-grid mobile="Disabled" name="grid#=Id#" is-in-client-template="true">
            <columns>
                <column field="ChildName" title="Child Name">
                </column>
            </columns>
            <datasource type="DataSourceTagHelperType.Ajax" page-size="20"  server-operation="false" data="@childData">
            </datasource>
            <filterable enabled="true">
            </filterable>
            <scrollable enabled="true" />
            <pageable enabled="true">
            </pageable>
            <sortable enabled="true" />
        </kendo-grid>
    </script>

    // Parent Grid
    <kendo-grid mobile="Disabled" name="grid" detail-template-id="template" on-data-bound="onDataBound">
        <columns>
            <column field="ParentName" title="Parent Name">
            </column>
        </columns>
        <datasource type="DataSourceTagHelperType.Ajax" page-size="20"  server-operation="false" data="@parentData">
        </datasource>
        <filterable enabled="true">
        </filterable>
        <scrollable enabled="true" />
        <pageable enabled="true">
        </pageable>
        <sortable enabled="true" />
    </kendo-grid>
    <script>
        function onDataBound(e){
            var items = e.sender.items();
            items.each(function(){
              var row = $(this);
              var dataItem = e.sender.dataItem(row);
              if(!dataItem.HasChildren){
                row.find(".k-hierarchy-cell").html("");
              }
            })
        }
    </script>    

    public class Parent {
        public int Id {get;set;}
        public string ParentName {get;set;}
        public bool HasChildren {get;set;}
    }

    public class Child {
        public int Id {get;set;}
        public int ParentId {get;set;}
        public string ChildName {get;set;}
    }

    <script>
        function onDataBound(e){
            var items = e.sender.items(); // 1. Gather the DOM element representations of the rows.
            items.each(function(){ // 2. Traverse through each of the rows.
              var dataItem = e.sender.dataItem(row); // 3. Obtain the dataItem counter-part of the row.
              if(!dataItem.HasChildren){ // 4. Assert the for the HasChildren field.
                row.find(".k-hierarchy-cell").html(""); // 5. Hide the expand icon.
              }
            })
        }
    </script> 

For a full implementation of the aforementioned approach, refer to the following Telerik REPL examples:

• Telerik REPL for ASP.NET Core HtmlHelper Example
• Telerik REPL for ASP.NET Core TagHelper Example

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core

• Server-Side API Reference of the Grid for ASP.NET Core

• TagHelper API Reference of the Grid for ASP.NET Core

• Hide Expand Icon Based on Field Value Telerik REPL (HtmlHelper)

• Hide Expand Icon Based on Field Value Telerik REPL (TagHelper)

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base