Conditionally Hide Hierarchical Grids

Environment

Product	Progress® Kendo UI® Grid for jQuery
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-v4",
        transport: {
          read: "https://demos.telerik.com/service/v2/odata/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-v4",
        transport: {
          read: "https://demos.telerik.com/service/v2/odata/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

• API Reference of the dataBound Event
• API Reference of the jQuery remove Method