Sort And Filter Config not applied properly on HandsOnTable Load

Tags: #<Tag:0x00007efc61d1bbe0>
#1

Hi,

We have implemented HandsOnTable with Cell spanning using merge-Cells: option,

cellspanning

and we are saving the sort and filter config as user preference and applying the same on data load.

but, On applying the configs on data load, the cell spanning is removed, it loads as normal cell without spanning, and the sort filter are not applied also.

I’m applying the filter config as like this.

afterInit: function () {

        const filtersPlugin = this.getPlugin('filters');

        const filterConfig = sortFilterConfig.summaryFilterConfig ? sortFilterConfig.summaryFilterConfig : [];

        filterConfig.forEach(fc => {

          fc.conditions.forEach(condition => {

            filtersPlugin.addCondition(fc.column, condition.name, condition.args, fc.operation);

          });

        });

        if (filterConfig && filterConfig.length) {

          filtersPlugin.filter();

        }

      },

and applying the softconfig as like this.

columnSorting: {

        initialConfig: sortFilterConfig.summarySortConfig[0],

        indicator: true,

        sortEmptyCells: false,

        headerAction: true,

      },

Please suggest, What we are doing wrong, and Is it possible to apply filter and soft config on cell spanned grid.?

#2

Hi @prabu.kuppusamy

it looks correctly. Do you get any errors in the console? Is your condition.args an array?

Do you have all those settings enabled

    dropdownMenu: true,
    filters: true,
    columnSorting: true,

I do not know what is the merging structure, summarySortConfig and summaryFilterConfig in your implementation so I’ve made it a bit simpler https://jsfiddle.net/23o86pku/1/
However, you need to change the mergeCells when you filter values as the merged areas change.

Also if you’re using mergeCells and Filters you need to know about those two issues


#3

Thanks for your reponse,

We are not receiving any console error, and those SummarySortConfig, SummaryFilterConfig are we are receiving sort/filter config from db as user preferences and we are applying on load.

From your jsfiddle example, there also I’m facing same issue which i’m facing in my application.

When I filter Action1 with empty cells, the result came up with Action2’s empty cellsl also,

From your reference of Filter and merge cells, those are open issues, Is it?

As you suggested, How we can call again the mergecells once Filter is applied, Here is my code. Kindly suggest.

private prepareGridSettings(sortFilterConfig: GridFilterSortConfigModel) {
    const settings = {
      columns: [...data],
      height: '70vh',
      width: '100%',
      rowHeaders: false,
      colHeaders: true,
      filters: true,
      dropdownMenu: true,
      collapsibleColumns: true,
      hiddenColumns: true,
      // columnSorting: true,
      columnSorting: {
        initialConfig: sortFilterConfig.summarySortConfig[0],
        indicator: true,
        sortEmptyCells: false,
        headerAction: true,
      },
      sortIndicator: true,
      wordWrap: true,
      autoRowSize: true,
      viewportColumnRenderingOffset: 10,
      // fixedColumnsLeft: 1,

      mergeCells: this.conditioningMergeCells(),
      nestedHeaders: [
        [{ label: 'ColumnGroup1', colspan: 8 }, { label: 'ColumnGroup2', colspan: 7 }, { label: 'ColumnGroup3', colspan: 11 }],
        this.dataHeaders
      ],
      afterInit: function () {
        const filtersPlugin = this.getPlugin('filters');
        const filterConfig = sortFilterConfig.summaryFilterConfig ? sortFilterConfig.summaryFilterConfig : [];

        filterConfig.forEach(fc => {
          fc.conditions.forEach(condition => {
            filtersPlugin.addCondition(fc.column, condition.name, condition.args, fc.operation);
          });
        });
        if (filterConfig && filterConfig.length) {
          filtersPlugin.filter();
        }        
      },
      afterFilter: (conditionsStack) => {
        console.log('filter config stack', conditionsStack);
        this.updateFilterConfig(conditionsStack);
      },
      afterColumnSort: (currentSortConfig, destinationSortConfigs) => {
        console.log('sort config stack', currentSortConfig);
        if (currentSortConfig.length > 0 && destinationSortConfigs.length === 0) {
          this.updateSortConfig(currentSortConfig);
        } else {
          this.updateSortConfig(destinationSortConfigs);
        }
      },
    };
    return settings;
  }
#4

Yes, those issues are still opened.

When it comes to merge is might be complicated, as you’d need to check what’s in one column to be able to change mergeCells via updateSettings. I do not know if I’ll be able to share some ideas without a demo that shows your data structure.