Update and Add Text to the Expand and Collapse Icons in the Hierarchy Grid

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

How can I change the Expand and Collapse icons in the Kendo UI for jQuery Hierarchy Grid and add text to the icons?

Solution

To achieve the desired scenario:

1. Update the Expand and Collapse icons by using the following CSS rules. For the full list of the Kendo UI Web Font Icons, refer to the list of Font icons.

    <style>
      .k-i-expand:before {
        content: "\e11e";
      }
      .k-i-collapse:before {
        content: "\e121";
      }
    </style>

1. To add text to the icons, write custom logic in the dataBound, detailExpand, and detailCollapse event handlers.

The following example demonstrates the full implementation of the suggested approach.

EditPreviewOpen In Dojo

    <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() {
            this.tbody.find('.k-hierarchy-cell').each(function(_,x){
              x= $(x);
              x.prepend("<span class='expand'>Expand</span>")
            });
          },
          detailExpand: function(e) {
            this.tbody.find('.expand').each(function(_,x){
              x= $(x);
              x.text("Collapse");
              x.removeClass("expand").addClass("collapse");
            });
          },
          detailCollapse: function(e) {
            this.tbody.find('.collapse').each(function(_,x){
              x= $(x);
              x.text("Expand");
              x.removeClass("collapse").addClass("expand");
            });
          },
          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",
              width: "110px",
            }
          ]
        });
      });

      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", width: "110px" },
            { field: "ShipName", title: "Ship Name", width: "300px" }
          ]
        });
      }
    </script>
    <style>
      /* Update Expand icon */
      .k-i-expand:before {
        content: "\e11e";
      }
      /* Update Collapse icon */
      .k-i-collapse:before {
        content: "\e121";
      }
      /* Set a width for the hierarchy column, otherwise the column you swap it with will be shrunk. */
      .k-grid .k-hierarchy-col {
        width: 60px;
      }
      /* Set inline display to the icon to have the text and the icon on the same line */
      .k-grid .k-hierarchy-cell>.k-icon{
        display: inline;
      }
    </style>