Switching the column sort order between ascending and descending order in Vue Grid

[Tom McNeer]

Hi,

I have multiple data grids showing reporting data. The initial sort order of records in the grid is set within a sortSettings object.

However, when clicking to sort on a column, I see a strange behavior: along with ascending and descending sorts, I see a return to the original sorting of the records.

For example: a numeric column is not initially sorted at all. The initial order in sortSettings is by a date column, so the numeric column is not in a defined order. Clicking the sort header on the numeric column sorts it in ascending order. A second click sorts it in descending order. But a third click - which should sort it ascending - returns the initial order defined in the sortSettings.

Is there a way to prevent this behavior? In my mind, a column sort action should simply sort records based on that column's value. It's very confusing to the user to click a sort header and not have the records sorted according to that column's value.

[Praveenkumar Gajendiran]

Hi Tom,

Thanks for contacting Syncfusion support. 

By default in EJ2 Grid, the sorting order will be as ascending -> descending -> none. 

When first click a column header it sorts the column in ascending. Again click the same column header, it will sort the column in descending. A repetitive third click on the same column header will clear the sorting. This is our default behavior.

Based on your query, we suspect that your requirement is to switch the sort order between Ascending and Descending only. For this We suggest you to use the following solution to achieve your requirement.

Code Example: 

<template> 

  <div class="col-lg-12 control-section"> 

    <div> 

      <ejs-grid 

        ref="grid" 

        id="grid" 

        :dataSource="data" 

        allowSorting="true" 

        :sortSettings="initialSort" 

        :actionComplete="actionComplete" 

      > 

        <e-columns> 

          <e-column 

            field="OrderID" 

            headerText="Order ID" 

            width="100" 

            textAlign="Right" 

            :isPrimaryKey="true" 

          ></e-column> 

          <e-column 

            field="CustomerID" 

            headerText="Customer ID" 

            width="100" 

          ></e-column> 

          <e-column 

            field="Freight" 

            headerText="Freight" 

            width="100" 

            format="C2" 

            textAlign="Right" 

          ></e-column> 

          <e-column 

            field="EmployeeID" 

            headerText="Employee ID" 

            width="100" 

          ></e-column> 

          <e-column 

            field="OrderDate" 

            headerText="Order Date" 

            width="130" 

            :format="formatoptions" 

            textAlign="Right" 

          ></e-column> 

          <e-column 

            field="ShipCountry" 

            headerText="Ship Country" 

            width="150" 

          ></e-column> 

          <e-column 

            field="FirstName" 

            headerText="FirstName" 

            width="100" 

          ></e-column> 

          <e-column 

           field="LastName" 

            headerText="LastName" 

            width="100" 

          ></e-column> 

        </e-columns> 

      </ejs-grid> 

    </div> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Edit, 

  CommandColumn, 

  Toolbar, 

  Group, 

  Sort, 

  ForeignKey, 

} from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

 

Vue.use(GridPlugin); 

var c; 

// var index; 

export default { 

  data: function () { 

    return { 

      data: data, 

      formatoptions: { type: "date", format: "dd/MM/yyyy" }, 

      initialSort: { 

        columns: [ 

          { field: "Freight", direction: "Ascending" }, 

          { field: "CustomerID", direction: "Descending" }, 

        ], 

      }, 

      pageSettings: { pageCount: 5 }, 

    }; 

  }, 

  methods: { 

    actionComplete: function (args) {         

      if (args.requestType === "sorting" && !args.direction) {    

        var index = args.target.closest("th").cellIndex; 

        var column = this.$refs.grid.ej2Instances.getColumnByIndex(index).field;
// here we sort the same column with Ascending direction by using sortColumn method when a repetitive third click on the same column  

        this.$refs.grid.ej2Instances.sortColumn(column, "Ascending", true);   

      } 

    }, 

  }, 

  provide: { 

    grid: [Edit, Toolbar, Group, CommandColumn, Sort, ForeignKey], 

  }, 

}; 

</script> 

API Link: https://ej2.syncfusion.com/vue/documentation/api/grid/#sortcolumn

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/sorting/#sort-order

We have prepared a sample based on this for your reference,

Sample: https://codesandbox.io/s/297565-edit-in-single-click-forked-7l9v7?file=/src/App.vue

Please get back to us if you need further assistance.

Regards,
Praveenkumar G