Customizing Indentation and Icons with a TreeGrid in JavaScript

Showing Hierarchy in TreeGrid

Background:

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

Steps to Complete:

  1. Handle formatItem event to adjust indentation
  2. Add further customization in CSS

Getting Started:

Handle formatItem event to adjust indentation

You can handle the formatItem event of the FlexGrid to adjust the indentation with padding on the nodes:
formatItem: (s,e) => {
      let col = e.getColumn();
      let row = e.getRow();
      // add padding for the column
      if (col.binding == 'name') {
        var padding = row.level * 14;
        if (!row.hasChildren) {
          padding += 21;
        } 
        e.cell.style.paddingLeft = padding + 'px';
      }
    }

 

Add further customization in CSS

The best way to showcase further hierarchy is through customization, styling and icons. This can be achieved through 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 found this article helpful and if you want to access the example application showcasing this code, please click here.

Happy coding!

Andrew Peterson

Technical Engagement Engineer