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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Override Grid persistence

Thread ID:

Created:

Updated:

Platform:

Replies:

150064 Dec 19,2019 07:02 AM UTC Dec 20,2019 10:18 AM UTC Vue 1
loading
Tags: Data Grid
Georgi Panayotov
Asked On December 19, 2019 07:02 AM UTC

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 [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon