Sorting Descending Grouped Column

[andrea c]

Hello,

I'm trying to sort a grouped column in Descending Order without success.

Attached what I'm trying to sort.

Please could you help me?

Kind regards,

Andrea

[Joseph Christ Nithin Issack]

By default, the Grid will group the records in ascending order. You can Group the records in descending order by overriding the following method in the created event of Grid.

Documentation Created event: https://ej2.syncfusion.com/documentation/api/grid/#created

Please refer the below code example:

function created() {

  this.groupModule.groupAddSortingQuery = function (colName) {

    let i = 0;

    while (i < this.parent.sortSettings.columns.length) {

      if (this.parent.sortSettings.columns[i].field === colName) {

        break;

      }

      i++;

    }

    if (this.parent.sortSettings.columns.length === i) {

      this.parent.sortSettings.columns.push({

        field: colName,

        direction: 'Descending',

        isFromGroup: true,

      });

    } else if (!this.parent.allowSorting) {

      this.parent.sortSettings.columns[i].direction = 'Descending';

    }

  };

}

Sample: https://stackblitz.com/edit/jgkzad

Please get back to us for further details.

[andrea c]

Hello,

Thanks for your answer but the solution you provide is not working and also I can't understand from your code example if colName is it a string value annd needs to be declareted before in the code?

Kind regards,

Andrea

[Joseph Christ Nithin Issack]

Hi Andrea,

Sorry for the inconvenience caused.

 To achieve your requirement to sort the grouped columns in descending order we are overriding an internal function here in the `created` event of the EJ2 Grid. The `colName` is an argument passed here in the overridden function which automatically gets the value from the place method it is called.

Please refer the screenshot of the call stack here.

Screenshot:

 

var grid = new ej.grids.Grid({

  dataSource: window.orderData,

  allowGrouping: true,

  created: created,

  editSettings: {

    allowEditing: true,

    allowAdding: true,

    allowDeleting: true,

    mode: 'Dialog',

  },

  allowPaging: true,

  pageSettings: { pageCount: 5 },

  toolbar: ['Add', 'Edit', 'Delete'],

  columns: [

           ------------------------

          -------------------------

  ],

});

grid.appendTo('#Grid');

 

function created() {

  this.groupModule.groupAddSortingQuery = function (colName) { // colName is an argument for this overridden function it is not defined separately it automatically gets the current column name while performing grouping action

    let i = 0;

 

    while (i < this.parent.sortSettings.columns.length) {

      if (this.parent.sortSettings.columns[i].field === colName) {

        break;

      }

 

      i++;

    }

 

    if (this.parent.sortSettings.columns.length === i) {

      this.parent.sortSettings.columns.push({

        field: colName,

 

        direction: 'Descending',

 

        isFromGroup: true,

      });

    } else if (!this.parent.allowSorting) {

      this.parent.sortSettings.columns[i].direction = 'Descending';

    }

  };

}

 

 

Please find the updated sample below.

Sample: https://stackblitz.com/edit/jgkzad-ffodav

Please get back to us for further details.

Regards,

Joseph I.

[andrea c]

Hello Joseph,

Unfortunately the provided solution isn't working.

You can find attached your code implemented in our grid. As you can see we are grouping the column before initialize the grid.

Hope this can be usefulto solve our issue.

Kind regards,

Andrea

[Rajapandiyan Settu]

Hi Andrea,

Thanks for your update.

If you want to group the columns in descending order at initial rendering, we suggest you to sort that column in descending order in initial settings of Grid to achieve your requirement.

Initial Sort: https://ej2.syncfusion.com/documentation/grid/sorting/#initial-sort

 

var grid = new ej.grids.Grid({

  dataSource: data,

  allowGrouping: true,

  allowSorting: true,

  groupSettings: { enableLazyLoading: true, columns: ['CustomerName'] },

  sortSettings: {

    columns: [{ field: 'CustomerName', direction: 'Descending' }], // sort the column in descending order

  },

});

grid.appendTo('#Grid');

 

If you want to Group the columns in descending order after the initial rendering, you can achieve this by overriding the following method in the created event of Grid.

Created: https://ej2.syncfusion.com/documentation/api/grid/#created

 

    function created(args) {

        this.groupModule.groupAddSortingQuery = function (colName) {

            let i = 0;

            while (i < this.parent.sortSettings.columns.length) {

                if (this.parent.sortSettings.columns[i].field === colName) {

                    break;

                    }

                    i++;

            }

            if (this.parent.sortSettings.columns.length === i) {

                this.parent.sortSettings.columns.push({

                    field: colName,

                    direction: 'Descending',

                    isFromGroup: true,

                });

            } else if (!this.parent.allowSorting) {

                this.parent.sortSettings.columns[i].direction = 'Descending';

            }

        }

    }

 

Sample: https://stackblitz.com/edit/ekpzax-xgvtwo

Please get back to us if you need further assistance with this.

Regards,

Rajapandiyan S