View Full Version : Row Expander Plugin Extension

6 May 2015, 2:55 AM
I am using row Expander Plugin to Expand/Collapse Rows .

I am also able to Expand All/Collapse all the rows by using some buttons (which are not part of Grid).

Is it possible to add a +/- Icon in the grid Header as a column (above the Exapnder Column) for this purpose ?

So lets say the Default icon is +, once user Clicks it it sshould toggle to _ and Viceversa.

The grid Should look like this

Name| + |Address |Age
ABC| + | XYZ | 60
CDE | + |GHI |40

Any help on this is higly appreciated .

6 May 2015, 4:44 AM
I've never done this but it looks like there's icon and iconCls configs for the header. You can define a CSS class and add it to the iconCls. Assign a click event to it and add code to expand the row. Or if in the grid header you mean to toggle all rows, set that click event to loop through the rows and expand the rows.

6 May 2015, 5:02 AM
Yes That was my approach if , the +/- Column is a part of Original Grid's Column Configuaration . The Expander Column is getting Created by using Row Expnader Plug In .

more Specifically in the addExpander() method of Row Expander plugin .

plugins: [{
ptype: 'rowexpander',
expandOnEnter: true,
expandOnDblClick: false,
selectRowOnExpand: true,
rowBodyTpl: [],
addExpander: function() {
var me = this,
expanderGrid = me.grid,
expanderHeader = me.getHeaderConfig();

// If this is the normal side of a lockable grid, find the other side.
if (expanderGrid.ownerLockable) {
expanderGrid = expanderGrid.ownerLockable.lockedGrid;
expanderGrid.width += expanderHeader.width;
expanderGrid.headerCt.insert(1, expanderHeader);


So I belive the HeaderConfig is responsible for the creation of Columns (with + as cell value ). I am intrested to place teh Icons in this column Header.

6 May 2015, 8:04 AM
I don't think getHeaderConfig() is the right method. The API docs say that's used for a CheckboxModel - something completely different. Try this:

expanderHeader = me.getHeader();