How to hide igGrid columns dynamically

I have a combo box with two entries for types of User : Standard and Authoriser

I have a igGrid that lists the users – a simplified view of the column definitions is shown below.

columns: [{
key: ‘UserId’,
dataType: ‘string’,
headerText: ‘User Id’,
hidden: false
}, {
key: ‘UserName’,
dataType: ‘string’,
headerText: ‘User Name’,
hidden: false
},{
key: ‘SpendLimit’,
dataType: ‘number’,
headerText: ‘Spend Limit’,
hidden: false
}]

When the combo box ‘Standard’ option is selected I want the SpendLimit column to be hidden completely as this property is not valid for Standard users.  When the combo box ‘Authoriser’ option is selected I want the SpendLimit column to become visible again as this property is valid for Authorisers – each Authoriser has a spend limit.

Basically, I just want to bind to the hidden property of the SpendLimit column setting hidden to true if the Standard option is selected and setting hidden to false if the Authoriser option is selected.

How do I do this?  (I don’t want to use the hiding feature which allows the user to show or hide columns as the SpendLimit column should never be visible for the Standard users.)

I don't know why I didn't think of this first: I just set up a boolean variable for each column that may be hidden and set the grid column hidden property to evaluate that variable value:

var hideSpendLimit = false;

if (user.isAuthoriser === true){

hideSpendLimit = false;

} else {

hideSpendLimit = true;

}

,{
key: 'SpendLimit',
dataType: 'number',
headerText: 'Spend Limit',
hidden: hideSpendLimit
}

Actually, this still doesn't work as it seems that the hidden property is only referenced when the grid is initialised.  If another user is selected which changes the hideSpendLimit value this is not being picked up and evaluated by the column hidden property at run time.  

Any ideas any one?

 

Hello Charles,

A column cannot change its state (hidden or shown) dynamically.

What you could do is destroy the grid and render it again with the new "hideSpendLimit" value. For example:

$("#combo").igCombo({
    ... ,
    selectionChanged: function(evt, ui) {
        $("#grid").igGrid("destroy");
        $("#grid").igGrid({
            //grid definition
        }
    }
});

Please feel free to contact me if you need further assistance.

Regards,
Ivaylo Hubenov
Entry-level developer