How To : Sort Column and Toggle Group through Code in WijGrid

  • 0 Comments

WijGrid allows to interactively sort any column or expand/collapse any group. However, some customers have a requirement wherein they need to apply sorting on a specific column or toggle any particular group through code, based on some user action or manipulation. This blog demonstrates how this can be achieved by creating custom methods for sorting programmatically and expanding/collapsing only one group through jQuery. To start with, we would refer the online demo to create a Wijgrid with grouping. Now, we would access the specific column on which we want to apply sorting and set its sortDirection property. Here is the custom method which you can use directly : 

//sort any specific column  
function sortBy($table, dataKey, sortDirection) {  
  if ($table.data('wijgrid')) { // check that wijgrid is bound to the element  
    // find widget by dataKey  
    var column = $.grep($table.wijgrid('columns'), function (widgetInstance) {  
    return widgetInstance.options.dataKey === dataKey;  
  });  

  if (column && column.length) {  
    // change sortDirection using widget factory so wijgrid tracks the change and perform sorting automatically:  
     switch (column[0].element.c1field('option', 'sortDirection')) {  
       case 'none':  
         column[0].element.c1field('option', 'sortDirection', sortDirection);  
         break;  
       case 'ascending':  
         column[0].element.c1field('option', 'sortDirection', 'descending');  
         break;  
       case 'descending':  
         column[0].element.c1field('option', 'sortDirection', 'ascending');  
         break;  
       default:  
      }  
    }  
  }  
}

The second part describes how you can toggle any specific group through code. For doing so, you need the indexes of GroupedColumn and the specific group you want to expand. Once we get this information, we would check its expanded state and change it accordingly. The following method will do the job for you: 

//expand any specific group  
function toggleGroup($grid, groupedColumnIndex /* 1-based */, groupIndex /* 0-based */) {  
   var column = $grid.wijgrid("option", "columns")[groupedColumnIndex - 1],  
   //get expanded state of group  
   ei = column.groupInfo.expandInfo[groupIndex];  

   if (ei.isExpanded) {  
     ei.collapse();  
   } else {  
     ei.expand();  
   }  
 }

You may also refer to this sample for complete implementation.

MESCIUS inc.