'Kendo-Grid Header for expandable-icon column

I'm wondering if I can write something or display something in the header of the "Expand-Icon"-column of my Kendo-Grid in angular. I couldn't find any explanation for this problem in the docs.

example-grid

Solution 1:^[1]

Yes you can. My example uses Kendo jQuery but I'm sure it can be done in Angular. The point is once the grid is rendered then you should be able to manipulate the DOM. In this example, the header is a user icon. Try it in the Telerik DOJO.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
</head>
<body>
  
<script id="detail-template" type="text/x-kendo-template">
  <div>
    Name: #: name #
  </div>
  <div>
    Age: #: age #
  </div>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: kendo.template($("#detail-template").html()),
  dataBound: function(e) {
    let $header = e.sender.element.find('.k-grid-header th.k-hierarchy-cell.k-header');
    $header.append('<span class="k-icon k-i-user"></span>');
  },
});
</script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jpllosa

'Kendo-Grid Header for expandable-icon column

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]