Demos
Grid(Vue)
Sorting
Overview

Sorting (Vue)

The FlexGrid control supports sorting via the source CollectionView. By default, clicking on any column header will sort the data based on the column that was clicked.

Clicking the same column header again will revert the sort order. Control-clicking the column header will remove the sort.

You may customize the sorting behavior using the grid's showSort and allowSorting properties.

Learn about FlexGrid | FlexGrid API Reference

This example uses Vue.

JavaScript
Angular
Vue
React
app.vue
index.html
Copy to CodeMine
<template>
    <div class="container-fluid">
        <div className="panel-group">
            <div className="panel panel-default">
                <div className="panel-heading">
                    <h4 className="panel-title">
                    Set Sort Order
                    </h4>
                </div>
                <div className="panel-body">
                    <ul className="list-inline">
                    <li>FlexGrid </li>
                    <li>
                        <select id="cboFlexGridSortOrder" @change="cboFlexGridSortOrder_change">
                        <option value="AscDesc" selected>AscDesc</option>
                        <option value="DescAsc">DescAsc</option>
                        <option value="AscDescNone">AscDescNone</option>
                        <option value="DescAscNone">DescAscNone</option>
                        </select>
                    </li>
                    </ul>
                    <ul className="list-inline">
                    <li>Columns </li>
                    <li>
                        <select id="cboColumns" @change="cboColumns_change">
                        <option value="-1" selected>--Select Column--</option>
                        </select>
                    </li>
                    <li>
                        <select id="cboColumnSortOrder" @change="cboColumnSortOrder_change" disabled>
                        <option value="null" selected>Default</option>
                        <option value="AscDesc">AscDesc</option>
                        <option value="DescAsc">DescAsc</option>
                        <option value="AscDescNone">AscDescNone</option>
                        <option value="DescAscNone">DescAscNone</option>
                        </select>
                    </li>
                    </ul>
                    <ul className="list-inline" id="colList">
                    </ul>
                </div>
            </div>
        </div>
        <wj-flex-grid :deferResizing="true" :itemsSource="data" :initialized="flexInitialized" :sortOrder="'AscDesc'">
            <wj-flex-grid-column :binding="'id'" :header="'ID'" :width="60" :allowSorting="false"></wj-flex-grid-column>
            <wj-flex-grid-column :binding="'country'" :header="'Country'" :sortOrder="'AscDescNone'"></wj-flex-grid-column>
            <wj-flex-grid-column :binding="'sales'" :header="'Sales'" :sortOrder="'DescAsc'"></wj-flex-grid-column>
            <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'"></wj-flex-grid-column>
        </wj-flex-grid>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as wjGrid from '@mescius/wijmo.grid';

const data = ref(_getData());
const flex = ref(null);
const cboFlexGridSortOrderRef = ref(null);
const cboColumnsRef = ref(null);
const cboColumnSortOrderRef = ref(null);
const colListRef = ref(null);

onMounted(function () {
    cboFlexGridSortOrderRef.value = document.querySelector("#cboFlexGridSortOrder");
    cboColumnsRef.value = document.querySelector("#cboColumns");
    cboColumnSortOrderRef.value = document.querySelector("#cboColumnSortOrder");
    colListRef.value = document.querySelector("#colList");

    cboFlexGridSortOrderRef.value.value = wjGrid.SortOrder[flex.value.sortOrder];

    for (let c = 0; c < flex.value.columns.length; c++) {
      let col = flex.value.columns[c];
      if (col.allowSorting) {
        cboColumnsRef.value.options.add(new Option(col.header, c.toString()));
      }
      let sortOrder = flex.value.columns[c].sortOrder == null ? col.allowSorting ? 'Default' : 'null' : wjGrid.SortOrder[flex.value.columns[c].sortOrder];
      let li = document.createElement('li');
      let liContent = document.createElement('p');
      liContent.innerHTML = col.header + " - <b>" + sortOrder + "</b>";
      li.appendChild(liContent);
      colListRef.value.appendChild(li);
    }
});

function flexInitialized(flexgrid) {
    flex.value = flexgrid;
}

function cboFlexGridSortOrder_change() {
    flex.value.sortOrder = wjGrid.SortOrder[cboFlexGridSortOrderRef.value.value];
}

function cboColumns_change() {
    if (cboColumnsRef.value.value == "-1")
        cboColumnSortOrderRef.value.setAttribute('disabled', 'disabled');
    else {
        cboColumnSortOrderRef.value.removeAttribute('disabled');
        let selCol = parseInt(cboColumnsRef.value.value);
        cboColumnSortOrderRef.value.value = flex.value.columns[selCol].sortOrder == null ? null : wjGrid.SortOrder[flex.value.columns[selCol].sortOrder];
    }
}

function cboColumnSortOrder_change() {
    let selCol = parseInt(cboColumnsRef.value.value);
    let selSortOrder = cboColumnSortOrderRef.value.value;
    if (selSortOrder == 'null')
        selSortOrder = 'Default';
    if (selCol != -1) {
        flex.value.columns[selCol].sortOrder = selSortOrder == 'null' ? null : wjGrid.SortOrder[selSortOrder];
        colListRef.value.children[selCol].innerHTML = flex.value.columns[selCol].header + " - <b>" + selSortOrder + "</b>";
    }
}

function _getData() {
    let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
        data = [];
    for (let i = 0; i < countries.length; i++) {
        data.push({
            id: i,
            country: countries[i],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
        });
    }
    return data;
}
</script>

<style>
.wj-flexgrid {
    height: 200px;
    margin: 10px 0;
}
</style>
<template> <div class="container-fluid"> <div className="panel-group"> <div className="panel panel-default"> <div className="panel-heading"> <h4 className="panel-title"> Set Sort Order </h4> </div> <div className="panel-body"> <ul className="list-inline"> <li>FlexGrid </li> <li> <select id="cboFlexGridSortOrder" @change="cboFlexGridSortOrder_change"> <option value="AscDesc" selected>AscDesc</option> <option value="DescAsc">DescAsc</option> <option value="AscDescNone">AscDescNone</option> <option value="DescAscNone">DescAscNone</option> </select> </li> </ul> <ul className="list-inline"> <li>Columns </li> <li> <select id="cboColumns" @change="cboColumns_change"> <option value="-1" selected>--Select Column--</option> </select> </li> <li> <select id="cboColumnSortOrder" @change="cboColumnSortOrder_change" disabled> <option value="null" selected>Default</option> <option value="AscDesc">AscDesc</option> <option value="DescAsc">DescAsc</option> <option value="AscDescNone">AscDescNone</option> <option value="DescAscNone">DescAscNone</option> </select> </li> </ul> <ul className="list-inline" id="colList"> </ul> </div> </div> </div> <wj-flex-grid :deferResizing="true" :itemsSource="data" :initialized="flexInitialized" :sortOrder="'AscDesc'"> <wj-flex-grid-column :binding="'id'" :header="'ID'" :width="60" :allowSorting="false"></wj-flex-grid-column> <wj-flex-grid-column :binding="'country'" :header="'Country'" :sortOrder="'AscDescNone'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'sales'" :header="'Sales'" :sortOrder="'DescAsc'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script setup> import { ref, onMounted } from "vue"; import * as wjGrid from '@mescius/wijmo.grid'; const data = ref(_getData()); const flex = ref(null); const cboFlexGridSortOrderRef = ref(null); const cboColumnsRef = ref(null); const cboColumnSortOrderRef = ref(null); const colListRef = ref(null); onMounted(function () { cboFlexGridSortOrderRef.value = document.querySelector("#cboFlexGridSortOrder"); cboColumnsRef.value = document.querySelector("#cboColumns"); cboColumnSortOrderRef.value = document.querySelector("#cboColumnSortOrder"); colListRef.value = document.querySelector("#colList"); cboFlexGridSortOrderRef.value.value = wjGrid.SortOrder[flex.value.sortOrder]; for (let c = 0; c < flex.value.columns.length; c++) { let col = flex.value.columns[c]; if (col.allowSorting) { cboColumnsRef.value.options.add(new Option(col.header, c.toString())); } let sortOrder = flex.value.columns[c].sortOrder == null ? col.allowSorting ? 'Default' : 'null' : wjGrid.SortOrder[flex.value.columns[c].sortOrder]; let li = document.createElement('li'); let liContent = document.createElement('p'); liContent.innerHTML = col.header + " - <b>" + sortOrder + "</b>"; li.appendChild(liContent); colListRef.value.appendChild(li); } }); function flexInitialized(flexgrid) { flex.value = flexgrid; } function cboFlexGridSortOrder_change() { flex.value.sortOrder = wjGrid.SortOrder[cboFlexGridSortOrderRef.value.value]; } function cboColumns_change() { if (cboColumnsRef.value.value == "-1") cboColumnSortOrderRef.value.setAttribute('disabled', 'disabled'); else { cboColumnSortOrderRef.value.removeAttribute('disabled'); let selCol = parseInt(cboColumnsRef.value.value); cboColumnSortOrderRef.value.value = flex.value.columns[selCol].sortOrder == null ? null : wjGrid.SortOrder[flex.value.columns[selCol].sortOrder]; } } function cboColumnSortOrder_change() { let selCol = parseInt(cboColumnsRef.value.value); let selSortOrder = cboColumnSortOrderRef.value.value; if (selSortOrder == 'null') selSortOrder = 'Default'; if (selCol != -1) { flex.value.columns[selCol].sortOrder = selSortOrder == 'null' ? null : wjGrid.SortOrder[selSortOrder]; colListRef.value.children[selCol].innerHTML = flex.value.columns[selCol].header + " - <b>" + selSortOrder + "</b>"; } } function _getData() { let countries = "US,Germany,UK,Japan,Italy,Greece".split(","), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } return data; } </script> <style> .wj-flexgrid { height: 200px; margin: 10px 0; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Sorting</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="compiler.js" type="module"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.js'); </script> </head> <body> <div id="app"> </div> </body> </html>
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: '../plugin-vue/index.js' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.vue2.chart.analytics": "npm:@mescius/wijmo.vue2.chart.analytics/index.js", "@mescius/wijmo.vue2.chart.animation": "npm:@mescius/wijmo.vue2.chart.animation/index.js", "@mescius/wijmo.vue2.chart.annotation": "npm:@mescius/wijmo.vue2.chart.annotation/index.js", "@mescius/wijmo.vue2.chart.finance.analytics": "npm:@mescius/wijmo.vue2.chart.finance.analytics/index.js", "@mescius/wijmo.vue2.chart.finance": "npm:@mescius/wijmo.vue2.chart.finance/index.js", "@mescius/wijmo.vue2.chart.hierarchical": "npm:@mescius/wijmo.vue2.chart.hierarchical/index.js", "@mescius/wijmo.vue2.chart.interaction": "npm:@mescius/wijmo.vue2.chart.interaction/index.js", "@mescius/wijmo.vue2.chart.radar": "npm:@mescius/wijmo.vue2.chart.radar/index.js", '@mescius/wijmo.vue2.chart.map': 'npm:@mescius/wijmo.vue2.chart.map/index.js', "@mescius/wijmo.vue2.chart": "npm:@mescius/wijmo.vue2.chart/index.js", "@mescius/wijmo.vue2.core": "npm:@mescius/wijmo.vue2.core/index.js", "@mescius/wijmo.vue2.gauge": "npm:@mescius/wijmo.vue2.gauge/index.js", "@mescius/wijmo.vue2.grid.detail": "npm:@mescius/wijmo.vue2.grid.detail/index.js", "@mescius/wijmo.vue2.grid.filter": "npm:@mescius/wijmo.vue2.grid.filter/index.js", "@mescius/wijmo.vue2.grid.grouppanel": "npm:@mescius/wijmo.vue2.grid.grouppanel/index.js", '@mescius/wijmo.vue2.grid.search': 'npm:@mescius/wijmo.vue2.grid.search/index.js', "@mescius/wijmo.vue2.grid.multirow": "npm:@mescius/wijmo.vue2.grid.multirow/index.js", "@mescius/wijmo.vue2.grid.sheet": "npm:@mescius/wijmo.vue2.grid.sheet/index.js", '@mescius/wijmo.vue2.grid.transposed': 'npm:@mescius/wijmo.vue2.grid.transposed/index.js', '@mescius/wijmo.vue2.grid.transposedmultirow': 'npm:@mescius/wijmo.vue2.grid.transposedmultirow/index.js', "@mescius/wijmo.vue2.grid": "npm:@mescius/wijmo.vue2.grid/index.js", "@mescius/wijmo.vue2.input": "npm:@mescius/wijmo.vue2.input/index.js", "@mescius/wijmo.vue2.olap": "npm:@mescius/wijmo.vue2.olap/index.js", "@mescius/wijmo.vue2.viewer": "npm:@mescius/wijmo.vue2.viewer/index.js", "@mescius/wijmo.vue2.nav": "npm:@mescius/wijmo.vue2.nav/index.js", "@mescius/wijmo.vue2.base": "npm:@mescius/wijmo.vue2.base/index.js", '@mescius/wijmo.vue2.barcode.common': 'npm:@mescius/wijmo.vue2.barcode.common/index.js', '@mescius/wijmo.vue2.barcode.composite': 'npm:@mescius/wijmo.vue2.barcode.composite/index.js', '@mescius/wijmo.vue2.barcode.specialized': 'npm:@mescius/wijmo.vue2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);