Edit this page

Conditionally Hide Hierarchical Grids

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
Operating System All
Browser All
Browser Version All

Description

How can I show just a child Grid on certain elements in the hierarchical Grid?

Solution

  1. Subscribe to the dataBound event of the Grid.
  2. Loop through the rows to remove the expand arrow on the desired items by using the remove jQuery method.
<div id="grid" /></div>

<script>
  $(document).ready(function() {
    var element = $("#grid").kendoGrid({
      dataSource: {
        type: "odata",
        transport: {
          read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
        },
        pageSize: 6,
        serverPaging: true,
        serverSorting: true
      },
      height: 600,
      sortable: true,
      pageable: true,
      detailInit: detailInit,
      dataBound: function() {
        var data = this.dataSource.data();

        $.each(data, function(i, row) {
          if (row.get("Title") == "Sales Representative") {
            $('tr[data-uid="' + row.uid + '"] ').find(".k-hierarchy-cell a").remove();;
          }
        });
      },
      columns: [{
          field: "FirstName",
          title: "First Name",
          width: "110px"
        },
        {
          field: "LastName",
          title: "Last Name",
          width: "110px"
        },
        {
          field: "Country",
          width: "110px"
        },
        {
          field: "City",
          width: "110px"
        },
        {
          field: "Title"
        }
      ]
    });
  });

  function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
      dataSource: {
        type: "odata",
        transport: {
          read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 10,
        filter: {
          field: "EmployeeID",
          operator: "eq",
          value: e.data.EmployeeID
        }
      },
      scrollable: false,
      sortable: true,
      pageable: true,
      columns: [{
          field: "OrderID",
          width: "110px"
        },
        {
          field: "ShipCountry",
          title: "Ship Country",
          width: "110px"
        },
        {
          field: "ShipAddress",
          title: "Ship Address"
        },
        {
          field: "ShipName",
          title: "Ship Name",
          width: "300px"
        }
      ]
    });
  }
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy