Clever Geek Handbook

Extensible grid UI-GRID. Expand one line programmatically

I want to hide the + icon in the left column and add another icon.

When the user clicks on the new icon, I want to programmatically expand that particular line.

I see that there is gridApi.expandable.expandAllRows ();

Is there a way to expand just one line?

+3


source to share


2 answers


If you want to change the default icon plus a different icon, you can simply override the template for expandableRowHeader.

$templateCache.put('ui-grid/expandableRowHeader',
    "<div class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" ng-click=\"grid.api.expandable.toggleRowExpansion(row.entity)\"></i></div></div>"
  );


You can change and change them to a different icon of your choice. ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\"

+3


source


You can use the toggleRowExpansion function, add this attribute to the desired element that will trigger this switch:



ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"

+5


source






More articles:


All Articles