Grid hideColumn() is not hiding column

#1

The hideColumn() method seems to simply REMOVE the column instead of setting it hidden.
Later when i call showColumn() ALL THE CHANGES that i have done inside it (modify input value) is restored to its original state.

How can i simply HIDE!!! a grid column and later when i show it to have a modified input value the expected value instead of being restored???

URGENT!!!

#3

10x for replying but I am asking a completely different thing. pls delete ur comment.

#4

Hello Nikolai.

Your described scenario works absolutely correctly for me.
Here is a simple snippet as an example:
https://snippet.dhtmlx.com/doiqv9r1
If the problem still occurs for you please, provide a complete demo or a snippet, where the problem can be reconstructed.

#5

10x for the quick reply Semantik.

In my case i have HTML content in each header column - input element so the user can easily change the title of the column. However when i hide the column and later show the column back (via form checkbox for example) the input element value gets reset and doesnt display what the user typed into it before hiding the column.

In your case u sent me a snippet where there is a button which simply updates a CELL value which is a part of some ROW but thats now what i am experiencing in my case

#6

I’m assuming that it was a performance decision to remove the column when hiding it instead of just making the column visible:false; if you’re not seeing the column, why make the page manage it? When you do a showColumn() function, it just reconstructs the column from the grid configuration. However, the value of the input in your custom HTML isn’t stored in the grid configuration, so it isn’t repopulated when you show the column again. To use the hideColumn() and showColumn() functions and retain the input value, you’ll need to wrap those functions in custom functions that manages the input value.

You’ll need a variable accessible by each of the functions for storing the key/value pairs; because the grid is already an existing object that is probably at a global scale, I would be inclined to just add it as another property on the grid object.

grid.colHeaders = {};

Then your hide function would read the input and store the value before hiding the column.

function customHide(column_id){
    let inp_value = "";
    // code here to get the value of your input; outside the scope of this answer
    grid.colHeaders[column_id] = inp_value;
    grid.hideColumn(column_id);
}

Conversely, the function to show the column should retrieve the value and set it for the input after the column is shown (otherwise the column won’t exist yet)

function customShow(column_id){
    grid.showColumn(column_id);
    // code here to set the value of your input to the value stored in grid.colHeaders[column_id]
}
#7

Sorry, I misread and thought you were talking about the rows. But if I understand you want to keep the header updated with the value specified by you, right?

I changed the @sematik example, and directly update the header of the config object, check if this is really it.

https://snippet.dhtmlx.com/f5e516be

#8

If i have to do that much custom coding just to show/hide a column then what is the point of using a library @ kcasarez?

@ DouglasMeirelles Thank you for the updated snippet. Now its clearly visible what is going on and how ridiculous the showColumn/hideColumn functions behave :frowning: