We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to override Grid persistence in Vue Grid

Is it possible to override grid persistence methods to change it's behaviour
I want to do few things
  • use web service to save/load grid settings
  • change only some of the parameters that are persisted
first one is needed to allow users to have default settings for new users (set by power user for specific installation) and also to allow users to have same settings of different computers
second one - we mostly need to save column order, widh and visibility. we have problems how current persistence work - when we change the columns (add or remove some) during system upgrade.


1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 20, 2019 10:18 AM UTC

Hi  Georgi, 

Greetings from the Syncfusion support, 

Query #1:  Need to allow users to have default settings for new users (set by power user for specific installation) and also to allow users to have same settings of different computers 
 
We could see you would like to set the Grid properties based on the user rights. Since we are unaware about the application (complete client or dependent to server-end), we have prepared a  demo with the dropdownlist. Depend on the some roles selected in the dropdown, Grid properties were set using the setProperties method of the Grid. Refer to the following code example.  
 
<div id="app"> 
    <ejs-dropdownlist 
      id="games" 
      :dataSource="sportsData" 
      :fields="localFields" 
      :placeholder="localWaterMark" 
      :popupHeight="height" 
      :width="width" 
      :change="change" 
    ></ejs-dropdownlist> 
 
    <ejs-grid ref="gridObj" :dataSource="data" height="300px" allowPaging="true" :load="GridLoad"> 
     .     .      .      .    
    </ejs-grid> 
  </div> 
export default { 
  data() { 
    return { 
      formatoptions: { type: "dateTime", format: "M/d/y hh:mm:ss ss" }, 
      data: orderDetails.slice(0), 
      sportsData: [ 
        { username: "Admin" }, 
        { username: "User" },  
      ], 
      localFields: { text: "username", value: "username" }, 
      localWaterMark: "Select a user", 
      height: "200px", 
      width: "300px" 
    }; 
  }, 
  methods: { 
    change(args) {       
      var gridProps = JSON.parse(window.localStorage.getItem("defaultGrid")); //Fetch the default Grid properties. 
      var parseGridProps; 
      switch (args.value) { 
         // Bind Grid properties through the setProperties based on username 
        case "Admin": 
          var props = { allowGrouping: true, allowFiltering: true }; 
          parseGridProps = Object.assign(gridProps, props); 
          break; 
        case "User1": 
          var props = { allowGrouping: false, allowFiltering: false }; 
          parseGridProps = Object.assign(gridProps, props); 
          break; 
        case "User2": 
          var props = { allowGrouping: true }; 
          parseGridProps = Object.assign(gridProps, props); 
          break; 
      } 
      this.$refs.gridObj.$el.ej2_instances[0].setProperties(parseGridProps); 
    }, 
 
    GridLoad() { 
      window.localStorage.setItem( 
        "defaultGrid", 
        this.$refs.gridObj.$el.ej2_instances[0].getPersistData() // Store the default Grid in local storage 
      ); 
 

 
 
In Above sample, we have achieved your requirement using local JSON data in client alone. If you have used the data service in back end means share the details to us we will modify the Grid sample with your concern. 

Query #2: Don’t persist the Grid column property in the Grid while enable the persistence. 

We can prevent the column persist in the Grid using dataBound event of Grid. We suggest to use below way to achieve your requirement it is ignore the column persist in addOnPersist function definition. Please refer the below code example for your reference. 
        dataBound: function (args) { 
                var cloned = (grid as any).addOnPersist;  
 
                    (grid as any).addOnPersist = function (key) {                          
                         key = key.filter(item=> item !=="columns")                              
                        return cloned.call(this,key);  
                    };  
      console.log("gridDataBound", args)  
            }, 


We don’t override the persistence behavior with your requirements.  

Please get back to us if you any query. 

Regards, 
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon