Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
620
IgGrid custom grouping
posted

 I have a iggrid w/ a status column.  The Status column can have 1 of 4 values (Pending, Assigned, Fulfilled, Closed).  I want to setup the "default" grouping on the iggrid as follows:

             Pending *and* Assigned items grouped together, shown first, and expanded by default

             Fulfilled items grouped together, shown second, and collapsed by default

             Closed items grouped together, shown last, and collapsed by default

See the attached screenshot.

My questions:

1) Is there a way to define my own grouping so that I can club Pending and Assigned items into a single "Pending/Assigned" group?

2) Is there a way to control the order that the groups are displayed?  I don't want it to be alphabetical.  I want Pending/Assigned shown first, then Fulfilled, then Closed.

3) Is there a way when the page is loaded to only expand one of the groupings (Pending/Assigned), while keeping the other groupings (Fulfilled and Closed) collapsed?

I am using ignite 15.2.  We are currently using JavaScript to instantiate the grid, but we might change it to be a server side control down the line.

Many thanks for your help  Tory.

  • 29417
    Verified Answer
    Offline posted

    Hello Tory, 

    Thank you for posting in our forum. 

    You could define a custom logic for creating the groups via the groupComparerFunction, however to change the sorting order you would also need to specify a custom comparer function on the data source level - http://help.infragistics.com/jQuery/2015.2/ig.datasource#options:settings.sorting.compareFunc

    Which would be invoked each time any sort operation is executed on the grid ( this includes grouping by another column or changing the sort direction of the groups).

     I’ve attached a sample for your reference with a custom groupComparerFunction and  sorting compareFunc, which have some additional logic for  sorting and groping the “Status” column.

    In this specific example  for the “Status” column the “Assigned” and “Pending” values are treated as equal values (in the custom compareFunc) and are  added to a single group with customGroupName set to "Pending & Assigned" ( in the custom groupComparerFunction).

     As for the auto expansion of a specific group. It’s not possible to specify this out of the box via the grid settings, however you could manually expand it by invoking a mousedown event on the related expansion indicator, for example on the grid’s rendered event:

    rendered: function(){$("td:contains('Pending & Assigned')").parent().find(".ui-iggrid-expandbutton").mousedown();}

     I hope you’ll find this information useful. Let me know if you have any questions.

      

    Best Regards,

    Maya Kirova

    Infragistics, Inc.

    http://ko.infragistics.com/support

     

     

     

     

    sample.zip