Altering and hiding fields without updating the complete fields configuration

[floriandammeyer]

I am transitioning from Datatables (http://datatables.net) to js-grid because Datatables is bloated and dusty and js-grid made a very good first impression on me.

However, I am missing convenient ways of altering or hiding fields that I temporarily don't want to show. Updating the complete 'fields' option via $('#my_grid').jsGrid('option', 'fields', []); seems too cumbersome, because in addition to the changed field, I also always need to include the static fields that I never intend to change in the configuration array.

A utility method like jsGrid.alterField(column_name, new_settings) or jsGrid.alterField(column_name, key, value) would be really helpful for reducing overhead.

Hiding a column via CSS is not ideal either, because that messes up the widths of the other columns that have been calculated by js-grid. Datatables has a "visible" property for each field. This way, you can preconfigure all columns, even the ones that you don't want to show immediately. When the time has come, you can simply change the "visible" property to true and the preconfigured column will show up. In combination with the abovementioned alterField() method you could easily show and hide columns with the benefit of js-grid recalculating the widths of the other columns, so that everything looks nice all the time.

A call to $('#my_grid').jsGrid('alterField', 'my_hidden_column', 'visible', true); would make my hidden column show up and re-render the table, so that all widths are recalculated nicely.

[tabalinas]

Thank you very much for valuable feedback.
Your suggestions are worth to be implemented.

[floriandammeyer]

If I found the time to dig deeper into the inner workings of jsGrid, I could fork it and add this feature myself, but unfortunately I guess I won't have the time for that any time soon.

[tabalinas]

Added method fieldOption(fieldName | fieldIndex, optionName, [optionValue]) to set field options.
Added option visible to all fields.

[Plush-Animal]

Hello,

Please,... сan you say, how we can use this method?
Because I don't understand, where need write and that.
For example, how i write now:

$("#jsGrid") .jsGrid({
inserting : false,
filtering: true,
editing: true,
visible:true,
fields:  [
...
{ name: "EmailContent", visible: false, type: "text", width: 50,height: "auto", title:'Email'},
...
],
});

But it dosn't work!

Help

[tabalinas]

Are you sure you downloaded latest version? Since it's not released yet, you have to build script yourself, because dist dir contains last released scripts.

[Plush-Animal]

Yes, I am sure that downloaded the latest version. We downloaded the new 2 folders: src & test.
It's enough?

[tabalinas]

Am I right, that you downloaded latest sources and reference files from src in your page?
Option visible for the grid doesn't make sense, it works only for the field. Just checked, visible: false for the field works fine. Ensure you use latest scripts (try to find 'visible' in jsgird.core.js), and check whether a field can be hidden with visible: false

[SkyStalker]

So, in fact this feature is doesn't work. We were unable to use it. It actually not hide, but destroy element from DOM. If we use it, we can't get access to data of hidden field.

[tabalinas]

@SkyStalker, the original case was meant to provide an API to change field config, and this is implemented.
What kind of data are you trying to get from fields? Could you just store them in the data item itself?

[jaslam94]

@tabalinas the field value should be hidden but preserved and be able to be sent over to the server using insertItem function.