CODEWITHSUNDEEP
jqueryslickgrid
Chandan Reddy
Chandan Reddy

Reputation: 499

Expand and Collapse events in SlickGrid

How can I register to onCollapse and onExpand events on SlickGrid with DataView?

I need to track the status of the groups -- which are expanded and which are collapsed.

Upvotes: 1

Views: 2623

Answers (3)

Shorttylad
Shorttylad

Reputation: 306

I know this is really old but just thought I would share my solution. It is possible to access the click event for expanding or collapsing groups!

My solution was quite straight forward. You need to override handleGridClickEvent set within GroupItemMetadataProvider.

So to do this.. right after you register the groupItemMetadataProvider plugin, you call destroy() to unsubscribe the default handleGridClickEvent like so..

this.grid.registerPlugin(groupItemMetadataProvider);

// unsubscribes the default click event handler for grouped rows so we can provide our own which will save the state of the expanders
groupItemMetadataProvider.destroy();

You can then simply copy the function from within GroupItemMetadataProvider and add in any extra functionality you wish..

// On expander click event. This is attached to the grid.onClick but checks for the expander css class
// The function has been taken from slick.groupitemmetadataprovider.js (handleGridClick) and modified to save the expander states
// to local storage.
function onExpanderClick(e, args) {
    ... 
}

In your function.. to ensure the expander element has been clicked you can look at the css class of the event

$(e.target).hasClass('slick-group-toggle')

you can see the state of the expander using item.collapsed and add whatever functionality you want depending on the state of the expanders.

Finally subscribe your new function as one of the grids onClick events like so..

grid.onClick.subscribe(onExpanderClick);

Upvotes: 0

OlivierH
OlivierH

Reputation: 3890

For those who are still looking for a solution, here is how I implemented it. I had to hide some content in the group row when expanded, so I needed to have a collapsed/expanded class directly on the group row. For this, I used dataView.getItemMetadata : 

var getRowMetadata = function(old_metadata_provider) {
    return function (row) {
        var item = this.getItem(row),
            ret = old_metadata_provider(row);

        //Handle group rows
        if (item.__group) {
            //adding a class
            ret.cssClasses += ' ' + (item.collapsed === 1 ? 'collapsed' : 'expanded');
            //or trigger a custom event....
        }
        //"Normal rows"
        else if (item) {
            ret = ret || {};
            ...
        }
        return ret;
    };
};


....

dataview = new Slick.Data.DataView({
    groupItemMetadataProvider: groupItemMetadataProvider,
    inlineFilters: true
});
dataview.getItemMetadata = getRowMetadata(dataview.getItemMetadata);

Upvotes: 2

kayess
kayess

Reputation: 3394

In short: you can't do that. There are no such events in the SlickGrid object and neither in DataView.

In long:

  1. First method: The grid has an onClick method, which you could subscribe to. However subscribing this event only works for cell or row clicks, even works on the group row but not when you click expand or collapse. This event doesn't get propagated to the - or the + span elements that you can click on the group rows.

  2. Second method The DataView has an on onRowsChanged event, which you could subscribe to as well. For example you can try doing it from your JS debugger console as: dataView.onRowsChanged.subscribe(function(e, args) {console.log(args.rows);}); Using this event could seem that we are one step closer, since the expand/collapse button click raises it. However the args parameter that we are receiving in our anonymous function contains only information about the rows needed to be updated on the grids canvas.

  3. Last chance (a.k.a. don't try these at home or the hackish methods) I have tried all the possible ways to get around this, with no success. I will list these below just as reference (as of SlickGrid v2.2).

    • $('.slick-group').click(function(){console.log()});
    • $('.slick-group-toggle').click(function(){console.log()});

The attempts listed above only works for the first expand or collapse, since after the action, they are getting detached and attached to the DOM and the grid canvas if they fit (based on the DataView.onRowsChanged events args parameter which I have mentioned in point 2. above).

Upvotes: 3

Related Questions