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

In this article
Not finding the help you need? Improve this article