How to hide igGrid columns dynamically

State See Verified Answer
Replies 3 replies
Subscribers 13 subscribers
Views 1607266 views
Users 0 members are here

igGrid

140

Charles Craven-Bartl posted over 7 years ago

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.)

1235

Verified Answer
Ivaylo Hubenov posted over 7 years ago in reply to Charles Craven-Bartl
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
Cancel
Reply

Reject Answer

Cancel
140

Offline Charles Craven-Bartl posted over 7 years ago in reply to Charles Craven-Bartl

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?
Cancel
Reply

Cancel
140

Offline Charles Craven-Bartl posted over 7 years ago

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
}
Cancel
Reply

Cancel