Show or hide grid columns

From pmusers
Jump to: navigation, search

This example shows how to use the grid.showColumn() and grid.hideColumn() functions to show or hide columns in a grid depending on what value is selected in a radio button field outside the grid.


Dynaform: show or hide grid columns.json (right click and select Save Link As)
Author: Amos Batto <amos[at]processsmaker.com>
Tested in: PM 3.3.4 Enterprise with Firefox 60.5


Create the following Dynaform where the user will enter an order list and select in the radio button field whether the delivery of these items will be "Virtual" or "Shipped":

ShowOrHideGridColumnsInDesigner.png

This Dynaform contains the following fields:

  • A radio button field with the ID "typeOfDelivery" and the two options:
    ShowOrHideGridColumnsDeliveryOptions.png
  • A grid with the ID "orderList", which contains the following fields:
    • A textbox with the ID "item"
    • A textbox with the ID "quantity"
    • A textbox with the ID "price"
    • A textbox with the ID "email"
    • A textbox with the ID "address"

Note: It may be necessary to set the grid's layout property to "static", because fields beyond 100% of the width will be truncated.

If the user selects that the "Type of Delivery" will be "Virtual", then the "Email" column will be show and the "Address" column will be hidden in the grid. Selecting "Shipping" will show the "Address" column and hide the "Email" column.

ShowOrHideGridColumnsInUse.png

To implement this functionality, add the following JavaScript to the Dynaform:

function showHideGridColumns(delivery) {
  if (delivery == 'virtual') {
    $("#orderList").showColumn(4); //email
    $("#orderList").hideColumn(5); //address
  }
  else {
    $("#orderList").hideColumn(4); //email
    $("#orderList").showColumn(5); //address
  }
}


$("#typeOfDelivery").setOnchange( function(newVal, oldVal) {
  showHideGridColumns(newVal);
});
                                 
//when Dynaform first loads:
showHideGridColumns( $("#typeOfDelivery").getValue() );