Grapcity wijmo grid data behaviour changed after set columnlayout

Posted by: bshastri on 4 May 2023, 5:49 pm EST

    • Post Options:
    • Link

    Posted 4 May 2023, 5:49 pm EST - Updated 4 May 2023, 5:56 pm EST

    after setting columnLayout property of the flex grid, we are facing a data issue. we are setting the filtered state in local storage at column filter time and restoring it back after some operations. but the issue is after restoring the filtered state, grid data behavior changed (row data type showing like a string instead of dropdown). i have also tried to refresh flex grid by this code:

    this.flex.refresh();

    Please find different screenshots of the original grid and after restoring the columnLayout

    original grid:

    grid issue:

  • Posted 7 May 2023, 9:50 pm EST

    Hi,

    It seems you are using the dataMap for the columns to show a dropdown in the flexGrid, the dropdown is not restored after restoring the ‘columnLayout’ because dataMap information is not stored with the columnLayout and when we set the ‘columnLayout’ property, the FlexGrid regenerates the columns, due to which the dataMap is removed from the columns.

    To avoid this issue, you’ll have to attach the dataMap to the grid columns again after restoring the columnLayout. Please refer to the following sample for a demonstration - https://jscodemine.grapecity.com/share/4a3La7DSCUuzQUyRm1dheA/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30

    Regards

  • Posted 7 May 2023, 10:58 pm EST

    Thanks Vivek

    my issue has been solved by doing the above changes, thanks so much.

    can you do one more help? when I am clicking on the clear button on any column filter, it resets all column filters of the grid instead of the current column filter reset

  • Posted 8 May 2023, 4:05 pm EST

    Hi,

    Sorry, but we are unable to replicate the issue on our end, as there is no such behavior observed on our side. Could you please share a small sample in which the issue can be replicated, so that we can investigate the root cause of this issue?

    Also, please share a video recording of the issue.

    Here is the sample in which we tried to replicate the issue - https://jscodemine.grapecity.com/share/4a3La7DSCUuzQUyRm1dheA/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30

    You can also update this sample to replicate the issue and share it with us. In case, if there is something we missed, please let us know.

    Regards

  • Posted 8 May 2023, 7:39 pm EST - Updated 8 May 2023, 7:50 pm EST

    Sure. please check video link for your reference:

    https://www.kapwing.com/w/37UPpf46B8

    Actually, we are displaying all records in the flex grid our Ajax call completes via inline editing. Then again, after Ajax finishes, we are restoring the filtered layout from local storage. so in between somewhere column filter’s clear functionality breaks.

    As explained in the video, if I clear a specific column filter, then only that column filter should clear instead of whole grid data reset.

  • Posted 9 May 2023, 2:21 pm EST

    Hi,

    Sorry, but we are still unable to replicate the issue on our end. Could you please provide some more information about the issue, i.e. -

    1. If you are facing this issue in flexGrid in the initial state, i.e. before restoring the layout from local storage and before any AJAX call.
    2. If you are facing this issue in flexGrid after restoring the layout i.e. after restoring the layout from local storage but no AJAX call processing yet.
    3. If you are facing this issue in flexGrid after restoring the layout from local storage and after the AJAX call processing.

    Also, please provide some code snippets, of how you are restoring the layout and filter definitions and what exact processing is done on flexGrid before and after the AJAX call. Please share a small sample in which the issue can be replicated if possible.

    Regards

  • Posted 9 May 2023, 4:04 pm EST

    ok sure. Here is the code sample, when some Ajax operation completes, we need to set the data source of the flex grid as mentioned below:

    this.data = earningList.filter(x => x.earningID > 0);

    above code will reset any filter state of the grid so to avoid this situation, we are storing the original filtered state in local storage on filter change event like this:

    onFilterChanged(filter, event, clearClicked=false) {
        if (!clearClicked) {
          if (filter.cancel) {
            return; //filter not applied
          }
          if(JSON.parse(filter.filterDefinition).filters.length > 0) {
            this.filterDefination = filter.filterDefinition;
            var state = {
              columns: this.flex.columnLayout,
              filterDefinition: this.filterDefination,
              sortDescriptions: this.flex.collectionView.sortDescriptions.map(function (sortDesc) {
                return { property: sortDesc.property, ascending: sortDesc.ascending };
              })
            };
            localStorage['filterState'] = JSON.stringify(state);
          }
          setTimeout(() => {
            this.restoreFilter();
          }, 50);
        }
        
      }

    To restore the filtered state after the ajax operation from local storage, we are using below code:

    restoreFilter() {
        var filterState = localStorage['filterState'];
        if (!this.clearClicked && filterState !== '') {
          this.gridFilter = new wjGridFilter.FlexGridFilter(this.flex);
          var state = JSON.parse(filterState);
          // restore filter definitions
          this.gridFilter.filterDefinition = state.filterDefinition;
          this.flex.columnLayout = state.columns;
          this.flex.getColumn('workerID').dataMap = this.workerMap;
          this.flex.getColumn('projectID').dataMap = this.costCodeIDMap;
          this.flex.getColumn('addCrewID').dataMap = this.crewMap;
          this.flex.getColumn('craftCode').dataMap = this.craftsMap;
          this.flex.getColumn('separateCheck').dataMap = this.separateCheckMap;
          this.flex.getColumn('eC3').dataMap = this.pdcCodeMap;
          this.flex.getColumn('pdcc').dataMap = this.pdccMap;
          this.flex.getColumn('opcc').dataMap = this.opccMap;
          this.flex.getColumn('eC1').dataMap = this.earningCodeMap;
          this.flex.getColumn('eC2').dataMap = this.earningCodeMap;
          
          // restore sort state
          var view = this.flex.collectionView;
          view.deferUpdate(function () {
              view.sortDescriptions.clear();
              for (var i = 0; i < state.sortDescriptions.length; i++) {
                  var sortDesc = state.sortDescriptions[i];
                  view.sortDescriptions.push(
                      new wjCore.SortDescription(sortDesc.property, sortDesc.ascending)
                  );
              }
          });
        }
      }

    so these all things working properly now but the issue is with column filter’s clear operation, when i clear any column filter, its not clearing column’s filter

  • Posted 9 May 2023, 11:23 pm EST

    Hi,

    As per your description, it seems you just want to retain the flexGrid’s filter state after updating the grid’s itemsSource after the AJAX call operation, as filtering is removed automatically when new itemsSource is assigned the flexGrid. The correct way to implement this would be, changing/assigning the new data source to the flexgrid.collectionView.itemsSource property, instead of directly updating the grid’s itemsSource, like this -

    this.flex.collectionView.sourceCollection = earningList.filter(x => x.earningID > 0);

    Or you can also do it like this,

    this.data = new CollectionView(dataSource);
    // set this.data as flexGrid's 'itemsSource'
    this.data.sourceCollection = earningList.filter(x => x.earningID > 0);

    FlexGrid’s filtering and sorting are implemented on the collectionView level, changing the itemsSource of the flexGrid, assigns a new CollectionView instance as grid’s itemsSource, which results in removal of any filtering and sorting applied on the grid. However, changing/updating the collectionView’s sourceCollection, does not affect the grid’s filtering or sorting.

    Please refer to the following sample for a demonstration, it shows the updation of the collectionView’s sourceCollection on cellEditEnded event - https://jscodemine.grapecity.com/share/cyeDgGw2WkKBxLHjo76kVQ/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30

    I hope this will solve all your issues. In case, if the issue still persists, please let us know.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels