calculateSortValue.md

id	GridBaseColumn.calculateSortValue
type	String | function(rowData)

---

shortDescription

Calculates custom values used to sort this column.

param(rowData): Object

The data of the row to which the cell belongs.

return: any

The value to be used in sorting.

context: GridBaseColumn

The this keyword refers to the column's configuration.

---

This property accepts the name of the data source field that provides values used to sort this column.

---

jQuery

<!--JavaScript-->
$(function() {
    $("#{widgetName}Container").dx{WidgetName}({
        columns: [{
            dataField: "Position", // provides column values 
            calculateSortValue: "isOnVacation" // provides values used to sort the Position column
        }]
    });
});

Angular

<!-- tab: app.component.html -->
<dx-{widget-name} ... >
    <dxi-{widget-name}-column
        dataField="Position" <!-- provides column values -->
        calculateSortValue="isOnVacation"> <!-- provides values used to sort the Position column -->
    </dxi-{widget-name}-column>
</dx-{widget-name}>

<!-- tab: app.module.ts -->
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxDataGridModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxDataGridModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

<!-- tab: App.vue -->
<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Position" <!-- provides column values -->
            calculate-sort-value="isOnVacation" <!-- provides values used to sort the Position column -->
        />
    </DxDataGrid>
</template>
<script>
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    // ...
}
</script>

React

<!-- tab: App.js -->
import React from 'react';
import DataGrid, { Column } from 'devextreme-react/data-grid';


function App() {
    // ...
    return (
        <DataGrid ...>
            <Column
                dataField="Position" // provides column values
                calculateSortValue="isOnVacation" // provides values used to sort the Position column
            />
        </DataGrid>
    );
}

export default App;

---

... or a function that returns such values. In the code below, calculateSortValue concatenates the State and City column values to sort the Employee column:

---

jQuery

<!--JavaScript-->$(function() {
    var {widgetName} = $("#{widgetName}Container").dx{WidgetName}({
        columns: [{
            dataField: "Employee",
            sortOrder: "asc",
            calculateSortValue: function (rowData) {
                return rowData.State + rowData.City;
            }
        }]
    }).dx{WidgetName}("instance");
});

Angular

<!-- tab: app.component.html -->
<dx-{widget-name} ... >
    <dxi-{widget-name}-column
        dataField="Employee"
        sortOrder="asc"
        [calculateSortValue]="sortByLocation">
    </dxi-{widget-name}-column>
</dx-{widget-name}>

<!-- tab: app.component.ts -->
import { Dx{WidgetName}Module } from "devextreme-angular";
// ...
export class AppComponent {
    sortByLocation (rowData) {
        return rowData.State + rowData.City;
    }
}

<!-- tab: app.module.ts -->
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxDataGridModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxDataGridModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

<!-- tab: App.vue -->
<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Employee"
            :calculate-sort-value="sortByLocation"
        />
    </DxDataGrid>
</template>
<script>
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return {
            // ...
            sortByLocation(rowData) {
                return rowData.State + rowData.City;
            },
        };
    },
}
</script>

React

<!-- tab: App.js -->
import React from 'react';
import DataGrid, { Column } from 'devextreme-react/data-grid';

function sortByLocation(rowData){
    return rowData.State + rowData.City;
}

function App() {
    // ...
    return (
        <DataGrid ...>
            <Column
                dataField="Employee"
                calculateSortValue={sortByLocation}
            />
        </DataGrid>
    );
}

export default App;

---

[note]

• calculateSortValue does not affect DataGrid group rows. To sort them, implement calculateGroupValue in addition to calculateSortValue. You should also define the groupCellTemplate to apply a custom template for group rows.

  #include btn-open-github with { href: "https://github.com/DevExpress-Examples/devextreme-datagrid-custom-sorting-grouped-column" }

• This property only accepts strings if remote operations are enabled.

[/note]

#####See Also#####

• sortingMethod
• columns[].sortOrder