Search results

Sorting

The Grid component has support to sort data bound columns in ascending or descending order. This can be achieved by setting allowSorting property as true.

To dynamically sort a particular column, click on its column header. The order switch between Ascending and Descending each time you click a column header for sorting.

To use Sorting, you need to inject Sort module in the provide section.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowSorting='true' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Sort } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  provide: {
    grid: [Sort]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
  • Grid column sorted in Ascending order. If you click on an already sorted column, then toggles the sort direction.
  • You can apply and clear sorting by invoking sortColumn and clearSorting methods.
  • To disable Sorting for a particular column, by specifying columns.allowSorting to false.

Initial Sort

By default, the Grid records are not sorted at initial rendering. To apply sort at initial rendering, set the field and direction in sortSettings.columns.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowSorting='true' :sortSettings='sortOptions' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Sort } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      sortOptions: { columns: [{ field: 'OrderID', direction: 'Ascending' }, { field: 'ShipCity', direction: 'Descending' }] }
    };
  },
  provide: {
    grid: [Sort]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Sorting Events

During the sort action, the Grid component triggers two events. actionBegin event triggers before the sort action start and actionComplete event triggers after the sort action complete. Using these events you can perform any actions.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :actionComplete='actionHandler' :actionBegin='actionHandler' :allowSorting='true' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Sort } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  methods: {
    actionHandler: function(args) {
        alert(args.requestType + ' ' + args.type); // custom Action
    }
  },
  provide: {
    grid: [Sort]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

args.requestType is current action name. For example in sorting, the args.requestType value is ‘sorting’.

Sort Comparer

You can customize the default sort action for a column by defining column.sortComparer property. The sort comparer function has the same functionality like Array.sort sort comparer.

In the following example, custom sort comparer function was defined in Customer ID column.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowSorting='true' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' :sortComparer='sortComparer' headerText='Customer ID' width=150></e-column>
                <e-column field='Freight' headerText='Freight' width=100 format='C2'></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Sort } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  methods: {
    sortComparer: function(reference, comparer) {
        if (reference < comparer) {
            return -1;
        }
        if (reference > comparer) {
            return 1;
        }
        return 0;
    }
  },
  provide: {
    grid: [Sort]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Touch Interaction

When you tap Grid header on touchscreen devices, then the selected column header is sorted. Also, it will show a popup Sorting for multi-column sorting. To sort multiple columns, tap the popupMulti Sorting and then tap the desired Grid headers.

The following screenshot represents a Grid touch sorting in the device.

Touch Interaction