ColumnHider plugin not hiding/showing columns

[rkatluru]

I have a dgrid in a div tag. This div tag will be hidden/shown based on certain business rules. Once the dgrid is visible to the user, Column hiding/unhiding works perfectly fine. When the dgrid has to be shown again (hidden and shown), column hiding is inconsistent. I'm destroying the existing grid, making the store object and the grid object null. But I still face the issue. Hidden property of column object is updated correctly based on user action. But the column is not added to the grid on the UI.

[shahzad31]

Can you provide some code sample? Are you calling grid.resize or grid.refresh after hiding and showing again...it may help.

[rkatluru]

Here are my columns

var columns = {
                         checkbox:selector({ label: '', selectorType: "checkbox", unhidable: true}),
                         name:{label:"name",sortable: true, hidden: false, unhidable: true,renderCell:renderName},
                         startDate:{label:"startDate",sortable: true, hidden: false, unhidable: true,renderCell:renderInitialTaskCreateDate},
                         textKey:{label:"textKey",sortable: true, hidden: false, unhidable: true,renderCell:rendertextKey},
                         textDescription:{label:"textDescription",sortable: true, hidden: false, unhidable: true,renderCell:rendertextDescription},
                         priorityDesc:{label:"priorityDesc",sortable: true, hidden: false, unhidable: true,renderCell:renderPriorityDesc},
                         userKey:{label:"userKey",sortable: true, hidden: false, unhidable: true,renderCell:renderUserKey},
                         phnNumber:{label:"phnNumber",sortable: true, hidden: true, unhidable: false,renderCell:renderphnNumber},
                         forwarded:{label:"Forwarded",sortable: true, hidden: true, unhidable: false,renderCell:renderForwarded},
                         channel:{label:"Channel",sortable: true, hidden: true, unhidable: false,renderCell:renderChannel},
                         assignDate:{label:"assignDate",sortable: true, hidden: true, unhidable: false,renderCell:renderClaimedDateTime},
                         flightDate:{label:'flightDate',sortable: true, hidden: true, unhidable: false,renderCell:renderFlightDateTime},
                         date:{label:"Date", sortable: true, hidden: true, unhidable: false,renderCell:renderDate},
                         status:{label:"status", sortable: true, hidden: true, unhidable: false,renderCell:renderStaus},
                         categoryDesc:{label:"categoryDesc", sortable: true, hidden: true, unhidable: false,renderCell:rendercategoryDesc}
                 };

I have a function to capture the column state change event.

grid.on("dgrid-columnstatechange", function(evt){
                                                          console.log("Column for field " + evt.column.field + " is now " +
                                                    (evt.hidden ? "hidden" : "shown"));
                                            });

I'm calling grid.resize after the grid is loaded.

[kfranqueiro]

This isn't enough code to actually reproduce the issue (for example, it could be due to styling reasons). I tried to reproduce it with something far more reduced and wasn't immediately able to.

Can you start with http://jsfiddle.net/6fytbbz2/ and see if you can modify it to reproduce your issue?

[rkatluru]

My scenario is hard to reproduce on http://jsfiddle.net/6fytbbz2/. But I saw your code. I was wondering if one can write custom code to call grid.toggleColumnHiddenState(id) statement when the grid column options are clicked. Like, when a user clicks on the checkbox on the options to add/remove a column, your test() function should be called. I appreciate your response. Thanks!

[kfranqueiro]

I'm not sure I understand the last question, since toggling the checkboxes in the ColumnHider menu already does effectively perform the logic in toggleColumnHiddenState internally.

If you need to perform other logic in reaction to columns being hidden/shown, dgrid emits a dgrid-columnstatechange event which includes the column that was toggled and whether it is now hidden.