Remove extra column of icons from Angular UI-Grid TreeView

Question

I want to remove extra column of icons for expand and collapse and merge it with my main treebase column. Plunkr Source

In the following link you can see that on a tree

Answer 1

The rowHeader can be hidden just by a property,

showTreeRowHeader: false,

To have the tree expand buttons as part of the first column, you just need to replicate the template as part of the cell. Define the cell template like this,

 { name: 'name', width: '30%' , cellTemplate : "
 -1 }\" ng-click=\"grid.appScope.toggleRow(row,evt)\"> -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'expanded', 'ui-grid-icon-plus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'collapsed'}\" ng-style=\"{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}\">  
{{COL_FIELD CUSTOM_FILTERS}}
" },

This plnkr shows a working model, http://plnkr.co/edit/rkHZs0?p=preview

Now to change the icons, all you need to do is to change the

 -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'expanded', 'ui-grid-icon-plus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'collapsed'}\" ng-style=\"{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}\">

in the cell template. The default template uses ui-grid-icon-plus-squared and ui-grid-icon-minus-squared and can be changed to whatever you like.