UI-GRID Expandable Grid. Programatically expand one row

只谈情不闲聊 提交于 2019-12-23 17:12:17

问题


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

When the user clicks the new Icon I want to programatically expand that specific row.

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

Is there a way to expand just one row?


回答1:


If all you want is to change the default plus icon to a different icon, you can simply override the template for the 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 the ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" and change them to a different icon of your choice.




回答2:


You can use toggleRowExpansion function, add this attribute to the desired element which will be trigger this toggle:

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



来源:https://stackoverflow.com/questions/30629189/ui-grid-expandable-grid-programatically-expand-one-row

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!