Search code examples
dojodgrid

How to change the dgrid-expando-icon in Tree dgrid

Could you please help, how to change the triangle icon expand/collapse to my custom icon (+,-) in the Tree grid. Also, how to remove all the table borders in the grid.Hoping it can be done through css.

@Himanshu - This is not a dojoxGrid rather a dgrid. I looked up in the dgrid.css to see , if I can find something similar, and found these.How do I represent the four states expand(normal,hover) and collapse(normal, hover).

 .dgrid-expando-icon {
 width: 16px;
 height: 16px;
}    
ui-icon {
 width: 16px;
  height: 16px;
  background-image: url("images/ui-icons_222222_256x240.png");
}

Expandor Icon

Solution

  • Use the following CSS in order to change the default icon for dojox.grid.TreeGrid.

    !important allows you to override the default CSS property value.

    .dojoxGridExpandoNode {
    background-image: url('http://findicons.com/files/icons/2625/google_plus_interface_icons/18/star.png') !important;
}

    Live example, changin plus icon to a start:

    http://jsfiddle.net/zx4g3z02/2/