Issue with the use of "(Re)Storing state" of a data-table with "headermenu:true"

Webix JS
1

I have an issue with the use of “(Re)Storing state” of a data-table with “headermenu:true”. The options in headermenu are not in sync when I show/hide columns. My Code:

<!DOCTYPE html>
<html>
       <head>
               <title>Quick start with DataTable</title>
               <link rel="stylesheet" href="./codebase/webix.css" type="text/css" charset="utf-8">
               <script src="./codebase/webix.js" type="text/javascript" charset="utf-8"></script>
               <link rel="stylesheet" type="text/css" href="./samples/common/samples.css">
               <script src="./samples/common/testdata.js" type="text/javascript" charset="utf-8"></script>
 
       </head>
       <body>
               <div class='header_comment'>Minimal code to init DataTable</div>
               <div id="testA"></div>
         <hr>
               <div id="testB" class='sample_comment'></div>
 
       <script>
 
       var grid = new webix.ui({
                       container:"testA",
                       view:"datatable",
                       columns:[
                                       { id:"title",    header:"Film title", width:250 },
                                       { id:"year",    header:"Released" , width:80, sort: "int" },
                                       { id:"votes",   header:"Votes",  width:100 },
                     { id:"rating",   header:"Rating",         width:100, },
                     { id:"dummy",   header:"Dummy column", width:100, hidden:true }
                               ],
                       autowidth:true,
                       autoheight:true,
             select:"row",
             multiselect:true,
             data:small_film_set,
             dragColumn:'order',
             headermenu: true,
             resizeColumn:true,
             on:{
                     onSelectChange:function(){
                         var text = "Selected: "+ grid.getSelectedId(true).join();
                         console.log(text);
                         document.getElementById('testB').innerHTML = text;
                     }
                 }
       });
 
     webix.storage.local.put("originalState", grid.getState());
 
     webix.attachEvent('unload', function(){
         console.log('Inside unload');
         console.log(grid.getState());
         webix.storage.local.put("state", grid.getState());
     });
 
     var state = webix.storage.local.get("state");
     if (state)
     {
         grid.setState(state);
         console.log("IsColumnVisible: " + grid.isColumnVisible('votes'));
     }
 
       </script>
</body>
</html>

Please help.

Thanks,
Siva

2

I can confirm the issue. Fix will be included in the next build

As quick solution use the next code after changing visibility state of columns

grid.setState(state);
$$(grid.config.headermenu).clearAll();
grid.callEvent("onStructureLoad",[]);

http://webix.com/snippet/763338f7

3

Thank you!!

4

If you have an active license you can grab Webix 2.1.8 that contains a fix for this issue.