Skip to content

Latest commit

 

History

History
163 lines (147 loc) · 4.95 KB

change-hierarchy-grid-expand-collapse-icons.md

File metadata and controls

163 lines (147 loc) · 4.95 KB
title description type page_title slug tags ticketid res_type component
Update and Add Text to the Expand and Collapse Icons in the Hierarchy Grid
Learn how to update and add text to the Expand and Collapse icons in a Kendo UI for jQuery hierarchical Grid.
how-to
Update and Add Text to Expand and Collapse Icons - Kendo UI Hierarchy Grid for jQuery
update-hierarchy-grid-expand-collapse-icons
jquery, grid, hierarchy, expand, collapse, icons, add, text, kendo grid
1586958
kb
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.

    <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>

See Also