Saturday, February 28, 2015

Enable Column Show/Hide for Gridx Table Coach View in IBM BPM

This is post will be useful for those who want to extend Grid Table from Kolban TK with show/Hide columns functionality.

Gridx Table from Kolban TK has awesome functionality packed with it, but am not going in detail about all of it. You can check this by going through the bpmwiki url for Gridx Table. I would like to give details on how to customize the Gridx Table to add show/Hide columns functionality.

Below are the steps to do the customisation:

1. Gridx API provides a module to show/hide columns in the grid (table). we need to add that as an AMD dependency to the Coach View as shown in the below figure.


2. Now go to the Variables tab and add a variable hideColumns in the Configuration Options, which will accept a comma seperated string of column numbers to hide. Below image shows the variable to be added under configuration options.



3. Now go to the load script in the Behaviour tab and find the String "Modules" and add the module alias "HiddenColumns" to the  Modules list of teh gridx as shown Below.


for ease of copying this code, I am pasting the code here.

          // Define the modules that we will always include
var modules = [
 ColumnResizer,
 CellWidget,
 Edit,
 Focus,
 SingleSort,
 Bar,
 GridXMenu,
 HiddenColumns, // cusomtisation to hide/show columns
 exportCSV // customisation added for export to excel
];

4. Add the below code in the load Script in Behaviour tab to get the value of the hideColumns variable which we added in the step 2.

          var hideColumns   = kolbantkCommon.getOptionValue("hideColumns", 0);

5. In the load script in behaviour tab, search for this.gridx.startup();  and add the below code just above this line.

          if(hideColumns!=null && hideColumns!=""){
         var colIds=hideColumns.split(",");
          for(var i=0;i<colIds.length;i++){
              this.gridx.hiddenColumns.add(colIds[i]);
         }
}

6.  Now go to the change script in the behaviour tab, add the below code.

 
                 else if (event.property == "hideColumns") {
          // Customisation added to hide columns
           var cols=event.newVal;
          var colIds=cols.split(",");
          this.gridx.hiddenColumns.clear();
          for(var i=0;i<colIds.length;i++){
            this.gridx.hiddenColumns.add(colIds[i]);
        }

for reference am adding image showing where to add it in change event Script.













with this customisation coach view is ready with show/hide columns functionality.

In the coach below is format in which we need to add the value to the hideColumns variable of the coach view.
Example:

1. To hide one column in the table.
      In this example, in order to hide columns number 3, the value should be as shown below.


2. To hide multiple columns in a table.
  In this example, in order to hide the columns 5,6&7, the value should be as shown below.









Hope this usefull !!!
You might also like below posts on Gridx :
Export to Excel in Gridx Table



4 comments:

  1. how export to pdf and export to csv?

    ReplyDelete
  2. Hi Filipe,
    The only option that I am aware of for export to PDF is to write a servlet and deploy it on some server and call that servlet from your coach.
    For CSV, you can use this servlet approach or you can use the approach from my other post, http://www.ibpmcoding.com/2015/02/export-to-excel-in-gridx-table-coach.html

    ReplyDelete
  3. Hi Pradeep,

    I am using GridX table from kolban for one of features. I am fetching the list of 100+ records and few are already selected (i.e. checked). Issue is that when use clicks on them, they are able to uncheck those rows.
    Requirement is that those which are already checked should be read only.
    They should not be allowed to be checked again? Any Idea?

    ReplyDelete
  4. I am using the gridx table for my applications.
    requirement is that rows which are already selected, should not be unselected by user.
    I am displaying 100+ records and once which are selected, user is able to unselect that as well. which is a issue?

    ReplyDelete