Customizing Indentation and Icons with a TreeGrid in Angular

Background:

There may be times when default styling does not meet your applications needs, and you want to adjust the style of your TreeGrid columns so you can more easily understand the hierarchy. This can be achieved with Wijmo by following this article.

Steps to Complete:

1. Customize Indentation with the formatItem Event
2. Replace the Default Tree Icons Using CSS

Getting Started:

Customize Indentation with the formatItem Event

This will determine how far each row is indented based on its hierarchy level.

onFormatItem(e: FormatItemEventArgs) {
  const col = e.getColumn();
  const row = e.getRow();

  if (col.binding === 'name') {
    let padding = (row.level || 0) * 14;

    // Extra space for leaf nodes so icons line up
    if (!row.hasChildren) {
      padding += 21;
    }

    e.cell.style.paddingLeft = `${padding}px`;
  }
}

Replace the Default Tree Icons Using CSS

The default expand/collapse icons can be replaced using CSS selectors that target Wijmo’s built-in glyph classes.

/* app.component.css */
.wj-flexgrid .wj-cell:has(.wj-glyph-down-right) {
  display: flex;
}
.wj-flexgrid .wj-cell:has(.wj-glyph-right) {
  display: flex;
  align-items: center;
}

.wj-glyph-down-right {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAABm0lEQVR4nL2Ty0rDQBSGo0+gvoAbO9PW9gGE6tbqS4jgFQVBH6A7qy/QRZLqRlwI7UxAtK1IN2qrdCm+gVovoLtaTXrkjJcmmcSmgg4cCJPJl//M/x9F+c+VUlK9ejgX00JsEgufca9rkBbdG9Ao39AIu9UpB0cRfqNTls7E9/sDwfQQH9Mov5dAct2pITbaGUZ4MwBMFJ5V/aCfbQZRJinNeLWvU775Cxh8FEs7YOic24BsxPAFSO8Iqzvc36Isbj+wM3IID5dPUJyvSLDCzBk8Xj3DbqLg2FcjxvA3MEvyE/aXpcUqtMwWmA0TDqZP2/vzVTCbFlhmC0oLVZdBRrJtCDGSbiXHKxfiQwGdOoHiXEXA8EfltZqkXKVsvG1IOBfzuqvyak0A3homWK+WqKPlc897Ve0tixETEyAf/FIqYEveMI2wa1CgxxUblvZzFZUWZmWDbC6vSznEcGJIu84gYfXtQdbnOS04Rt2Mnk7ZS5bkE54wOzSQUsLqHWGKo32W9jIKDcA7823zp4XuYxww+KKGeFRy86/XO/G5aIX/VUs6AAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  border: none !important; /* Make sure to remove border */
}

.wj-glyph-right {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZ0lEQVR4nNWTQS8DQRTHh4+BIzMiLkgEH8SBL+AblEX6PcwQm27dZGbbTSUOraYXB9yEUAQHDq20iYpD9cnbEnZ3Ztpr/8lL9vD2l/f+83+EDKx2xg/HOFObnMmyYPIe6+fb2Z/Ij/YNAgJDnMptztSHYAq0RWULwdhLbEqT9LCg6sAIihWn0rNCcbL4T8FqBdy5wAKWjs2zyJq55TK0P7/g9aIO7qwBSmVL66lgaivevDedg8fSC6BsUD7pbyTXDV8w2RyBnhugVJU0/qkHk08R6FkN3JkolDN1p1kZs6YH7k75UA2eQ2DtsgGZ+UK8p6qb8MQEu/WfQlj9qgHeQkEXn6JuQscKu25qYaL70qkEEJ++ewF/jfmVCnTaHXi7aYK3eGQK97tgakSbRd2Ux2unkF3Sw4zT/QrPSFCV7ff0BJOZnvccQnHS2PqJNalM9YSRf0JP8QIwtJizsKgscqrWjZ4NhL4BeNMpwMOfx2cAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  border: none !important;
}

You can of course accomplish more of the styling through the formatItem event if you prefer, this is just one way of adding customization.

I hope you find this article helpful. Happy coding!

Code for reference:

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { FlexGrid, FormatItemEventArgs, Column, Row } from '@mescius/wijmo.grid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('treeGrid', { static: true }) treeGrid: FlexGrid;

  data = [
    {
      name: 'Electronics',
      sales: 120000,
      children: [
        { name: 'Phones', sales: 55000 },
        { name: 'Laptops', sales: 65000 }
      ]
    },
    {
      name: 'Home',
      sales: 95000,
      children: [
        { name: 'Furniture', sales: 50000 },
        { name: 'Kitchen', sales: 45000 }
      ]
    }
  ];

  onFormatItem(e: FormatItemEventArgs) {
    const col: Column = e.getColumn();
    const row: Row = e.getRow();

    if (col.binding === 'name') {
      let padding = (row.level || 0) * 14;

      // Add extra padding for leaf nodes so the icons align
      if (!row.hasChildren) {
        padding += 21;
      }

      e.cell.style.paddingLeft = `${padding}px`;
    }
  }
}

<!-- app.component.html -->
<div style="margin: 20px;">
  <h2>Angular TreeGrid with Custom Indentation & Icons</h2>

  <wj-flex-grid #treeGrid
                [itemsSource]="data"
                [childItemsPath]="'children'"
                [autoGenerateColumns]="false"
                (formatItem)="onFormatItem($event)">

    <wj-flex-grid-column [binding]="'name'" header="Name"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'sales'" header="Sales"></wj-flex-grid-column>

  </wj-flex-grid>
</div>