columns visible & responsive

Massimo74

hi in this example I have 3 questions ...
1st question .... I would like the name of the column "Columns1" but its button "Button Columns1"
"Columns2" but its "CustomColumns2" button
2nd question .... if I put the column with the "desktop" class and I am in "tablet-l" mode and I want to see that table, it does not make me add it
3rd question ...... I have bStateSave: true, but when I re-enter it I reset the columns based on the class "desktop" or "tablet-l" etc .... depending on the screen and does not take into account the status previous one

colin

Hi @Massimo74 ,

Can you confirm that link relates to those questions - I'm not seeing the Responsive extension now any "Columns1".

Cheers,

Colin

Massimo74

My error please Here

colin

Hi @Massimo1974 ,

1. There's no tidy way of doing - I used an switch statement in the columnText - see here.
2. This looks like the same issue as your other thread, unless I'm missing something.
3. Yep, stateSave stores the visibility of the table, when hidden by the button, but it doesn't really make any sense to store that based on the screen size, since the screen size would define that anyway.

Cheers,

Colin

Massimo74

1st ok thanks
2nd I check and I tell you
3rd I don't want to memorize it based on the size of the screen, but I'd like to see by default column 1 and 2, but if the user removes the 2 and puts the 3 at its reopening it should stay with the 1 and the 3 and not come back with the 1 and 2, I hope I explained myself.
if there is a saved status that takes that, otherwise put the defaul configuration

colin

Yep, on 3, if I hide column 1 with the Column visibility button and restart it, then column 1 remains hidden. You're suggesting that's not the case, but it is for me. Could you give step by step instructions with your (or my) fiddle, to demonstrate what you're saying, please.

Massimo74

step 1°
Example here
i have column 2 (desktop) colvis work - columns 3 and 4 (none) colvis not work ....WHY ???

if in the list of colvis columns I insert it is because I want it to be selected, instead if I put "none" it never lets me select it

colin

I'm not following. You've specified class none for those two columns, and as described here, that means the Responsive extension will never show those columns in the table view. Note that Responsive is separate to ColVis, so that button is still listing all columns so they can be made visible/invisible.

You can restrict which columns are shown, which you're doing here:

         buttons: [ {
             extend: 'colvis', 
             columns : [0,1,2,3,4],
         }],  

so I'm really not clear what you're trying to do. It would be easier if you step back and say what you're trying to achieve.

Massimo74

I would like to get some columns visible and some not visible but all selectable and so far ok because I could use

"columnDefs": [
    {"visible": false, "targets": 0}
and in this case the bStateSave works regularly .... but then I would like to have responsive columns indicating responsive: {
          details: false,
          breakpoints: [
            {name: 'desktop', width: Infinity},
            {name: 'tablet-l', width: 1200},
            {name: 'tablet-p', width: 992},
            {name: 'mobile-l', width: 576},
            {name: 'mobile-p', width: 320}
           ]
        },

but once I insert the responsive columns the bStateSave no longer works but only takes into account the size of the display ....

in a few words I would like to set visible standard columns based on screen size, but if a user adds or removes some of them, then I have to keep that view requested.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

but once I insert the responsive columns the bStateSave no longer works but only takes into account the size of the display ....

We discussed this one before, and the visibility state is being saved - you can tell by calling column().visible(), or by the icon styling in the button collection.

I'm still not clear on the aim, but the code is open-source, so feel free to modify it to get the behaviour you want.

Massimo74

hi colin do you think I can use stateLoaded to restore the columns previously displayed? including filters and sorting etc ... in a few words top up the state saved by "stateSave" is there a quick method ??

I had thought of uploading standar based on the display settings, but if there is a saved state, reload that
un qualcosa del genere ....HERE
or in any case make 2 states 1 ° the one based on the display, the 2nd based on the changes made by the user, a status of initialization and another of charging

colin

Yep, you can top up the saved state information, see stateSaveParams. See also this example where the Select extension information is also being added to the saved state.

Colin

Massimo74

thanks Colin i have a copy example....
here
did you mean something like that? according to you it can be good ???

colin

Yep

Massimo74

sure that's okay ?? it seems myvisible doesn't work, it doesn't change on colvis click and it doesn't save true or false visibility
here

colin

It can be good, as I showed you in my example. If there's a specific issue, like you just stated, it would be faster to explicitly say what isn't working in your first question, rather than expect other people to try and find it and then resolve it too.

With visibility, by default columns are visible - if you want to make columns invisible, call column().visible() and pass in false. In your initComplete, you're not passing in any arguments, so that the first usage of column().visible(), i.e. just a getter. If you want to set the visibility to hide a column, use the second usage.

colin

Also, you're saving the selected state of the rows, but you haven't enabled the Select extension extension.

Massimo74

stateSaveParams: function(settings, data) {   
         data.myvisible = this.api().columns().visible().join(', '); 
} 
 stateLoadParams: function(settings, data) {               
          savedVisible = data.myvisible;               
},
initComplete: function() {               
               this.api().columns([0,1,2,3,4,5,6]).visible(savedVisible);               
               this.api().state.save();
},

THIS NOT WORK HERE

if use

stateSaveParams{
data.myvisible = this.api().columns({visible:true})[0];
}
 stateLoadParams: function(settings, data) {               
          savedVisible = data.myvisible;               
},
initComplete: function() {               
               this.api().columns(savedVisible).visible();               
               this.api().state.save();
},

the my var "myvisible" not enhanced...
please where is the problem ???

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

You need to read the manual and add debug to your scripts.

columns().visible(), called in your stateSaveParams, as a getter returns an

API instance with the result set containing a boolean value for each column the selector matched. The boolean values indicate: true if the column is visible, false if it is not.

When columns().visible() is called as a setter, it gets passed in a boolean, not an API instance with an array. You'll need to iterate through the columns and make them visible/invisible in turn.

Massimo74

on the statsSaveParams I have "My data load: true,false,false,false,false,false, true"
My example.
ok i scroll the columns and put them visible one by one, but it doesn't work .... Why