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
- Traverse the rows of the parent Grid within the
DataBoundevent. - To retrieve the data item, access the
<tr>element by using thedataItem()client-side method of the Grid. - Conditionally hide the icon based on the
HasChildrenfield.
<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: