Persisted State

[Christian DAquino]

Is there a bug on persisted states on version 19.2.55? The grid works fine on first render, but it looks like the settings are not being registered properly on the local storage.

Here is an example of a local storage of one of my grids. There was supposed to be a sort on column 'id' and filter on column 'project' but both settings are blank.

{"pageSettings":{"pageSize":21,"pageSizes":["21","50","All"],"currentPage":1,"pageCount":8,"totalRecordsCount":151},"sortSettings":{"columns":[],"allowUnsort":true},"filterSettings":{"type":"Excel","columns":[],"ignoreAccent":false,"enableCaseSensitivity":false},"groupSettings":{"enableLazyLoading":false,"columns":[],"showDropArea":true,"showToggleButton":false,"disablePageWiseAggregates":false,"allowReordering":false,"showGroupedColumn":false},"columns":[{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"configs_locations_id","width":"120","foreignKeyValue":"location","foreignKeyField":"id","index":0,"uid":"grid-column238","editType":"dropdownedit","visible":true,"columnData":[{"id":1,"location":"Australia","created_at":"2020-06-12T10:19:32.000Z","updated_at":"2021-05-22T19:11:20.000Z","flag":"au.png"}],"type":"string"},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Ascending","field":"id","isPrimaryKey":"true","width":"100","index":1,"uid":"grid-column239","foreignKeyField":"id","visible":true,"type":"number"},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"csel_options_clients_id","type":"string","width":"100","foreignKeyValue":"description","foreignKeyField":"id","index":2,"uid":"grid-column240","editType":"dropdownedit","visible":true,"columnData":[{"id":3,"description":"Chevron","created_at":"2020-06-07T13:42:35.000Z","updated_at":null,"deleted_at":null},{"id":1,"description":"Rentals","created_at":"2020-06-07T13:42:20.000Z","updated_at":null,"deleted_at":null},{"id":5,"description":"Santos","created_at":"2020-06-07T13:42:50.000Z","updated_at":null,"deleted_at":null},{"id":4,"description":"Shell","created_at":"2020-06-07T13:42:41.000Z","updated_at":null,"deleted_at":null},{"id":2,"description":"Woodside","created_at":"2020-06-07T13:42:28.000Z","updated_at":null,"deleted_at":null}]},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"project","type":"string","width":"130","index":3,"uid":"grid-column241","foreignKeyField":"project","visible":true},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"csel_options_scopes_id","type":"string","width":"130","foreignKeyValue":"name","foreignKeyField":"id","index":4,"uid":"grid-column242","editType":"dropdownedit","visible":true,"columnData":[{"id":1,"name":"ISM"},{"id":2,"name":"Mobilization"},{"id":3,"name":"Demob"},{"id":4,"name":"Overhaul"},{"id":6,"name":"Refurbishment/SN"}]},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"csel_options_headerstatuses_id","type":"string","width":"150","foreignKeyValue":"name","foreignKeyField":"id","index":5,"uid":"grid-column243","editType":"dropdownedit","visible":true,"columnData":[{"id":1,"name":"Pending","class":"secondary"},{"id":2,"name":"Approved","class":"primary"},{"id":3,"name":"Ready for Closeout","class":"primary"},{"id":4,"name":"Cancelled","class":"warning"}]},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"project_manager","type":"string","width":"150","foreignKeyValue":"name","foreignKeyField":"id","index":6,"uid":"grid-column244","editType":"dropdownedit","visible":true,"columnData":[{"id":7,"name":"Christian D'Aquino - Admin","configs_locations_id":1,"resourceId":7},{"id":182,"name":"John Weiss","configs_locations_id":1,"resourceId":182}]},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"delivery_planner","type":"string","width":"150","foreignKeyValue":"name","foreignKeyField":"id","visible":false,"index":7,"uid":"grid-column245","editType":"dropdownedit","columnData":[{"id":96,"name":"Jeremy Saw","configs_locations_id":1,"resourceId":96},{"id":94,"name":"June Lobley","configs_locations_id":1,"resourceId":94},{"id":116,"name":"Mat Goodchild","configs_locations_id":1,"resourceId":116}]},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"workshop_hours","type":"number","width":"150","visible":false,"index":8,"uid":"grid-column246","foreignKeyField":"workshop_hours"},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"etm","type":"string","width":"150","visible":false,"index":9,"uid":"grid-column247","foreignKeyField":"etm"},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"created_by","type":"string","width":"150","index":10,"uid":"grid-column248","foreignKeyField":"created_by","visible":true},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"created_at","type":"date","format":"dd/MM/yy","width":"150","index":11,"uid":"grid-column249","foreignKeyField":"created_at","visible":true},{"disableHtmlEncode":true,"allowSorting":true,"allowResizing":true,"allowFiltering":true,"allowGrouping":true,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":true,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","field":"updated_at","type":"date","format":"dd/MM/yy","width":"150","index":12,"uid":"grid-column250","foreignKeyField":"updated_at","visible":true},{"disableHtmlEncode":true,"allowSorting":false,"allowResizing":true,"allowFiltering":false,"allowGrouping":false,"allowReordering":true,"showColumnMenu":true,"enableGroupByFormat":false,"allowEditing":true,"showInColumnChooser":false,"allowSearching":true,"autoFit":false,"sortDirection":"Descending","width":"200","commands":[{"buttonOption":{"content":"Edit","cssClass":"e-button action-edit","iconCss":"e-icons e-edit"},"uid":"gridcommand601"},{"buttonOption":{"content":"SEL","cssClass":"e-button action-sel","iconCss":"e-icons e-sel"},"uid":"gridcommand602"}],"index":13,"uid":"grid-column251","textAlign":"Right","visible":true,"type":null}],"searchSettings":{"key":"","fields":[]},"selectedRowIndex":-1}

[Sujith Kumar Rajkumar]

Hi Christian, 

 

Greetings from Syncfusion support. 

 

We checked the reported problem but unfortunately were unable to reproduce it as the persistence was properly restored in the Grid on page reload. You can check the below sample for reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168346/ze/GridPersistence71373945 

 

Based on the provided information we suspect that you are mentioning on enabling persistence(using enablePersistence property) and performing sort/filter action the persisted data is not present in the local storage immediately. If so, we would like to let you know that the persisted data will be updated in the local storage only when the Grid is destroyed(either manually or on page refresh). And on next render the Grid will be able to access the persisted data and restore it to the Grid. 

 

Please check the below image of persisted data for filter and sort actions, 

 

 

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R 

[Christian DAquino]

Hi Sujith,

I can't compile your code with version 19.2.55. Would you be able to show a working example in something like codesandbox.io please?

Thanks.

[Sujith Kumar Rajkumar]

Hi Christian, 

 

We faced problems while trying to update the Syncfusion packages to the latest version in codesandbox as the dependent packages were not properly getting installed. And that is why we had shared you a local Vue sample with the latest version. So please let us know what issue you are facing in the Grid component with error details, video demonstration(if possible) and Grid code file based on which we will validate from our end and provide the further details. 

 

Regards, 

Sujith R 

[Christian DAquino]

Hi Sujith,

Please find attached a video and my code below. This was using

"@syncfusion/ej2-vue-grids": "^19.2.57",

<template>

  <q-page padding>

    <ejs-grid

      ref='TestGrid'

      id='TestGrid'

      :dataSource='dataSource'

      :enablePersistence='true'

      :allowPaging='true'

      :allowGrouping='true'

      :allowSorting='true'

      :allowFiltering='true' :filterSettings='filterSettings'

      :allowReordering='true'

      :allowEditing='false'

      height=250

      rowHeight=27

      :allowResizing='true'

      :allowMultiSorting='true'

      :sortSettings="sortSettings"

      >

        <e-columns>

          <e-column field='id' headerText='ID' isPrimaryKey='true' />

          <e-column field='name' headerText='Name' />

          <e-column field='surname' headerText='Surname' />

        </e-columns>

    </ejs-grid>

  </q-page>

</template>

<script>

import Vue from 'vue'

import {

  GridPlugin,

  ColumnChooser,

  // ColumnMenu,

  ExcelExport,

  Filter,

  ForeignKey,

  Group,

  Page,

  Resize,

  Search,

  Sort,

  CommandColumn

} from '@syncfusion/ej2-vue-grids'

Vue.use(GridPlugin)

export default {

  data () {

    return {

      dataSource: [

        { id: 1, name: 'Christian', surname: 'DAquino' },

        { id: 2, name: 'Carla', surname: 'DAquino' }

      ],

      editSettings: {

        allowAdding: true,

        allowEditing: true,

        allowDeleting: true,

        allowTaskbarEditing: true,

        showDeleteConfirmDialog: true

      },

      sortSettings: {

        columns: [

          { field: 'id', direction: 'Descending' }

        ]

      },

      filterSettings: {

        type: 'Excel'

      }

    }

  },

  provide: {

    grid: [

      ColumnChooser,

      // ColumnMenu,

      ExcelExport,

      Filter,

      ForeignKey,

      Group,

      Page,

      Resize,

      Search,

      Sort,

      CommandColumn

    ]

  }

}

</script>

<style>

  /* @import '~@syncfusion/ej2-base/styles/material.css';

  @import '~@syncfusion/ej2-buttons/styles/material.css';

  @import '~@syncfusion/ej2-calendars/styles/material.css';

  @import '~@syncfusion/ej2-dropdowns/styles/material.css';

  @import '~@syncfusion/ej2-inputs/styles/material.css';

  @import '~@syncfusion/ej2-navigations/styles/material.css';

  @import '~@syncfusion/ej2-lists/styles/material.css';

  @import '~@syncfusion/ej2-layouts/styles/material.css';

  @import '~@syncfusion/ej2-popups/styles/material.css';

  @import '~@syncfusion/ej2-splitbuttons/styles/material.css';

  @import '~@syncfusion/ej2-grids/styles/material.css';

  @import '~@syncfusion/ej2-richtexteditor/styles/material.css';

  @import '~@syncfusion/ej2-treegrid/styles/material.css';

  @import '~@syncfusion/ej2-vue-gantt/styles/material.css'; */

  .max-grid-height {

    height: calc(30px + 70vh);

    /* min-height: 100vh */

  }

</style>

Attachment: 20210828_152641_2ea2b1dc.zip

[Manivel Sellamuthu]

Hi Christian, 

Thanks for your update. 

We have checked the video demonstration and code example. We are able to replicate the reported issue “when routing the Grid settings are not persisted in local storage” at our end. We have already logged the bug for the same as “Enablepersistence was not maintained filter setting when routing to another page”. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and it will be included with our upcoming Sep 01, 2021 Patch release. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

FB Link: https://www.syncfusion.com/feedback/27908/enablepersistence-was-not-maintained-filter-setting-when-routing-to-another-page 

Regards, 

Manivel 

[Manivel Sellamuthu]

Hi Christian, 

We are glad to announce that our Essential JavaScript2 patch release (v19.2.59) has been rolled out successfully. In this release we have added the fix for “Enablepersistence was not maintained when routing to another page” issue. So please update your package to this version to include the fix. 

Feedback Link: https://www.syncfusion.com/feedback/27908/enablepersistence-was-not-maintained-filter-setting-when-routing-to-another-page 

Release Notes: https://ej2.syncfusion.com/documentation/release-notes/19.2.59/?type=all#grid 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 

Manivel