How to override Grid persistence in Vue Grid

[Georgi Panayotov]

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.

[Seeni Sakthi Kumar Seeni Raj]

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 

      ); 

 

 

Sample link: https://codesandbox.io/s/vue-template-v4i4j 

 

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