React Gantt - columns

An array of columns in the Gantt.

Selector: Column
Type:

Array<dxGanttColumn | String>

Default Value: undefined

The columns property accepts an array of columns. To configure a column, use a dxGanttColumn object or specify a data source field (as a string value) to which the column is bound.

NOTE
The Gantt UI component does not support column templates.

View Demo

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        columns: [{
            dataField: "title",
            caption: "Subject",
            width: 300
        }, {
            dataField: "start",
            caption: "Start Date"
        }, {
            dataField: "end",
            caption: "End Date"
        }],
        // ...
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt>
    <dxi-column dataField="title" caption="Subject" [width]="300"></dxi-column>
    <dxi-column dataField="start" caption="Start Date"></dxi-column>
    <dxi-column dataField="end" caption="End Date"></dxi-column>
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    // ...      
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxGantt
        :allow-selection="false" >
        <DxColumn
            :width="300"
            data-field="title"
            caption="Subject"
        />
        <DxColumn
            data-field="start"
            caption="Start Date"
        />
        <DxColumn
            data-field="end"
            caption="End Date"
        />            
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, DxColumn
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, DxColumn
            // ... 
        }
    };
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            <Column dataField="title" caption="Subject" width={300} />
            <Column dataField="start" caption="Start Date" />
            <Column dataField="end" caption="End Date" />
            {/* ... */}
        </Gantt>
    );
};

export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .Columns(columns => {
        columns.AddFor(m => m.Title)
            .Caption("Subject")
            .Width(300);
        columns.AddFor(m => m.Start)
            .Caption("Start Date");
        columns.AddFor(m => m.End)
            .Caption("End Date");
    })
    // ...
)
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .Columns(columns => {
        columns.AddFor(m => m.Title)
            .Caption("Subject")
            .Width(300);
        columns.AddFor(m => m.Start)
            .Caption("Start Date");
        columns.AddFor(m => m.End)
            .Caption("End Date");
    })
    // ...
)

alignment

Aligns the content of the column.

Type:

String

Default Value: undefined
Accepted Values: undefined | 'center' | 'left' | 'right'

The default alignment of the content depends on the type of data.

dataType alignment
'number' 'right'
'boolean' 'center'
'string' 'left'
'date' 'left'
'datetime' 'left'

allowFiltering

Specifies whether data can be filtered by this column. Applies only if filterRow.visible is true.

Type:

Boolean

Default Value: true

See Also

allowHeaderFiltering

Specifies whether the header filter can be used to filter data by this column. Applies only if headerFilter.visible is true. By default, inherits the value of the allowFiltering property.

Type:

Boolean

Default Value: true

allowSorting

Specifies whether a user can sort rows by this column at runtime. Applies only if sorting.mode differs from "none".

Type:

Boolean

Default Value: true

NOTE
In a column with calculated values, this property is set to false by default.
See Also

calculateCellValue

Calculates custom cell values. Use this function to create an unbound data column.

Type:

Function

Function parameters:
rowData:

Object

The data of the row to which the cell belongs.

Context: GridBaseColumn

The this keyword refers to the column's configuration.

Return Value: any

A cell's custom value.

Unlike data columns bound to a data field, unbound columns display custom values returned from the calculateCellValue function. The component executes this function multiple times for each record: when records are rendered, when users sort or filter them, and when summaries are computed. To avoid errors and enhance the UI component performance, make sure that properties of the rowData object used in calculation exist and keep calculations inside this function as simple as possible.

In the following code, the calculateCellValue function is used to create an unbound column that displays a calculated sales amount. Data objects contain the Price and UnitsSold fields used in the calculation:

jQuery
index.js
var products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

$(function() {
    $("#ganttContainer").dxGantt({
        dataSource: products,
        columns: [{
            caption: "Sales Amount",
            calculateCellValue: function(rowData) {
                return rowData.Price * rowData.UnitsSold;
            }
        },
        // ...
        ]
    });
});
Angular
app.component.html
app.component.ts
app.service.ts
app.module.ts
<dx-gantt
    [dataSource]="products">
    <dxi-column
        caption="Sales Amount"
        [calculateCellValue]="calculateSalesAmount">
    </dxi-column>
</dx-gantt>
import { Component } from '@angular/core';
import { Product, Service } from './app.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    products: Product[];
    constructor(service: Service) {
        this.products = service.getProducts();
    }

    calculateSalesAmount(rowData) {
        return rowData.Price * rowData.UnitsSold;
    }
}
import { Injectable } from '@angular/core';

export class Product {
    ProductID: number,
    ProductName: string,
    Price: number,
    UnitsSold: number
}

let products: Product[] = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

@Injectable()
export class Service {
    getProducts(): Product[] {
        return products;
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxGanttModule } from 'devextreme-angular';
import { Service } from './app.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [
        Service
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
data.js
<template>
    <DxGantt
        :data-source="products">
        <DxColumn
            caption="Sales Amount"
            :calculate-cell-value="calculateSalesAmount">
        </DxColumn>
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn
} from 'devextreme-vue/gantt';

import service from './data.js';

export default {
    components: {
        DxGantt,
        DxColumn
    },
    data() {
        const products = service.getProducts();
        return {
            products
        }
    },
    methods: {
        calculateSalesAmount(rowData) {
            return rowData.Price * rowData.UnitsSold;
        }
    }
}
</script>
const products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

export default {
    getProducts() {
        return products;
    }
};
React
App.js
data.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column 
} from 'devextreme-react/gantt';

import service from './data.js';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.products = service.getProducts();
    }

    calculateSalesAmount(rowData) {
        return rowData.Price * rowData.UnitsSold;
    }

    render() {
        return (
            <Gantt
                dataSource={this.products}>
                <Column
                    caption="Sales Amount"
                    calculateCellValue={this.calculateSalesAmount}
                />
            </Gantt>
        );
    }
}
export default App;
const products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

export default {
    getProducts() {
        return products;
    }
};

The following features are disabled in an unbound column, but you can enable them as described in this table:

Feature Action that enables it
Editing Implement the setCellValue function.
Sorting Set the allowSorting property to true.
Filtering Set the allowFiltering property to true.
Searching Set the allowSearch property to true.
Grouping (DataGrid only) Set the allowGrouping property to true.

To invoke the default behavior, call the defaultCalculateCellValue function and return its result.

jQuery
index.js
$(function() {
    $("#ganttContainer").dxGantt({
        columns: [{
            calculateCellValue: function(rowData) {
                // ...
                return this.defaultCalculateCellValue(rowData);
            }
        }]
    });
});
Angular
app.component.ts
app.component.html
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    calculateCellValue(rowData) {
        // ...
        const column = this as any;
        return column.defaultCalculateCellValue(rowData);
    }
}
<dx-gantt ... >
    <dxi-column ...
        [calculateCellValue]="calculateCellValue">
    </dxi-column>
</dx-gantt>
Vue
App.vue
<template>
    <DxGantt ... >
        <DxColumn ...
            :calculate-cell-value="calculateCellValue">
        </DxColumn>
    </DxGantt>
</template>

<script>
// ...
export default {
    // ...
    data() {
        return {
            calculateCellValue: function(rowData) {
                // ...
                const column = this as any;
                return column.defaultCalculateCellValue(rowData);
            }
        }
    }
}
</script>
React
App.js
// ...
class App extends React.Component {
    calculateCellValue(rowData) {
        // ...
        const column = this as any;
        return column.defaultCalculateCellValue(rowData);
    }

    render() {
        return (
            <Gantt ... >
                <Column ...
                    calculateCellValue={this.calculateCellValue}
                />
            </Gantt>
        );
    }
}
export default App;
NOTE
The this keyword refers to the column's configuration.
See Also

calculateDisplayValue

Calculates custom display values for column cells. Requires specifying the dataField or calculateCellValue property. Used in lookup optimization.

Type:

String

|

Function

Function parameters:
rowData:

Object

The data of the row to which the cell belongs.

Context: GridBaseColumn

The this keyword refers to the column's configuration.

Return Value: any

The value for the cell to display.

This property accepts the name of the data source field that provides display values...

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        columns: [{
            dataField: "countryID", // provides values for editing
            calculateDisplayValue: "country" // provides display values
        }]
    });
});
Angular
HTML
TypeScript
<dx-gantt ... >
    <dxi-column
        dataField="countryID" <!-- provides values for editing -->
        calculateDisplayValue="country"> <!-- provides display values -->
    </dxi-column>
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxGantt>
        <DxColumn          
            data-field="countryID" <!-- provides values for editing -->
            calculate-display-value="country"> <!-- provides display values -->  
        />
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn 
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn 
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column
} from 'devextreme-react/gantt';

class App extends React.Component {
    // ...

    render() {
        return (
            <Gantt>
                <Column 
                    dataField="countryID"  <!-- provides values for editing -->
                    calculateDisplayValue="country"  <!-- provides display values -->  
                />
            </Gantt>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Gantt()
    .Columns(columns => columns.Add()
        .DataField("CountryID")
        .CalculateDisplayValue("Country")
    )
)
@(Html.DevExtreme().Gantt() _
    .Columns(Sub(columns)
        columns.Add() _
            .DataField("CountryID") _
            .CalculateDisplayValue("Country")
    End Sub)        
)

... or a function that combines display values. Specify this function only if all data processing operations are executed on the client.

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        columns: [{
            dataField: "countryID", // provides values for editing
            calculateDisplayValue: function (rowData) { // combines display values
                return rowData.capital + " (" + rowData.country + ")";
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-gantt ... >
    <dxi-column
        dataField="countryID" <!-- provides values for editing -->
        [calculateDisplayValue]="getCountryWithCapital"> <!-- combines display values -->
    </dxi-column>
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxGantt>
        <DxColumn       
            data-field="countryID" <!-- provides values for editing -->
            :calculate-display-value="getCountryWithCapital" <!-- combines display values -->
        />
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn 
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn 
    },
    methods: {
        getCountryWithCapital(rowData) {
            return rowData.capital + " (" + rowData.country + ")";
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column
} from 'devextreme-react/gantt';

class App extends React.Component {
    // ...

    render() {
        return (
            <Gantt>
                <Column
                    dataField="countryID" <!-- provides values for editing -->                 
                    calculateDisplayValue={this.getCountryWithCapital} <!-- combines display values -->
                />
            </Gantt>
        );
    }

    getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Gantt()
    .Columns(columns => columns.Add()
        .DataField("CountryID")
        .CalculateDisplayValue(new JS("getCountryWithCapital"))
    )
)

<script>
    function getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }        
</script>
@(Html.DevExtreme().Gantt() _
    .Columns(Sub(columns)
        columns.Add() _
            .DataField("CountryID") _
            .CalculateDisplayValue(New JS("getCountryWithCapital"))
    End Sub)        
)

<script>
    function getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }        
</script>

The UI component uses the specified display values in sorting, searching, and grouping (in case of DataGrid).

Do not use this property to format text in cells. Instead, use the format, customizeText, or cellTemplate property.

calculateFilterExpression

Specifies the column's custom rules to filter data.

Type:

Function

Function parameters:
filterValue: any

A user input value.
Contains an array if the selectedFilterOperation is one of the following: "between", "anyof", "noneof".

selectedFilterOperation:

String

| null

A selected filter operation.

target:

String

A UI element used to filter data.
Possible values: "filterRow", "headerFilter", "filterBuilder", "search".

Context: GridBaseColumn

The this keyword refers to the column's configuration.

Return Value:

Filter Expression

A filter expression.

The calculateFilterExpression function should return a filter expression. A basic filter expression has the following format:

[selector, comparisonOperator, filterValue]

  • selector
    A dataField or function that returns column values. Pass this.calculateCellValue if your column contains calculated values.

  • comparisonOperator
    One of the following operators: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".

  • filterValue
    A user input value. Values from the selector are compared to this value.

A filter expression for the "between" operation has a different format:

[ [selector, ">=", startValue], "and", [selector, "<=", endValue] ]

The default "between" implementation is inclusive (filter results include the boundary values). In the following code, the calculateFilterExpression function implements an exclusive "between" operation:

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [{
            calculateFilterExpression: function (filterValue, selectedFilterOperation, target) {
                // Override implementation for the "between" filter operation
                if (selectedFilterOperation === "between" && $.isArray(filterValue)) {
                    const filterExpression = [
                        [this.dataField, ">", filterValue[0]], 
                        "and", 
                        [this.dataField, "<", filterValue[1]]
                    ];
                    return filterExpression;
                }
                // Invoke the default implementation for other filter operations
                if(!this.defaultCalculateFilterExpression) 
                    return [this.dataField, 'contains', filterValue];  
                return this.defaultCalculateFilterExpression.apply(this, arguments);
            },
            // ...
        }]
    });
});
Angular
TypeScript
HTML
import { DxGanttModule } from "devextreme-angular";
import { Column } from 'devextreme/ui/data_grid';
// ...
export class AppComponent {
    calculateFilterExpression (this: Column, filterValue, selectedFilterOperation, target) {
        // Override implementation for the "between" filter operation
        if (selectedFilterOperation === "between" && Array.isArray(filterValue)) {
            const filterExpression = [
                [this.dataField, ">", filterValue[0]], 
                "and", 
                [this.dataField, "<", filterValue[1]]
            ];
            return filterExpression;
        }
        // Invoke the default implementation for other filter operations
        if(!this.defaultCalculateFilterExpression) 
            return [this.dataField, 'contains', filterValue];  
        return this.defaultCalculateFilterExpression.apply(this, arguments);
    }
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
<dx-gantt ... >
    <dxi-column ...
        [calculateFilterExpression]="calculateFilterExpression">
    </dxi-column>
</dx-gantt>
Vue
App.vue
<template>
    <DxGantt>
        <DxColumn ...
            :calculate-filter-expression="calculateFilterExpression"
        />
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn
    },
    data() {
        return {
            calculateFilterExpression (filterValue, selectedFilterOperation, target) {
                // Override implementation for the "between" filter operation
                if (selectedFilterOperation === "between" && Array.isArray(filterValue)) {
                    const filterExpression = [
                        [this.dataField, ">", filterValue[0]], 
                        "and", 
                        [this.dataField, "<", filterValue[1]]
                    ];
                    return filterExpression;
                }
                // Invoke the default implementation for other filter operations
                if(!this.defaultCalculateFilterExpression) 
                    return [this.dataField, 'contains', filterValue];  
                return this.defaultCalculateFilterExpression.apply(this, arguments);
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column
} from 'devextreme-react/gantt';

function calculateFilterExpression (filterValue, selectedFilterOperation, target) {
    // Override implementation for the "between" filter operation
    if (selectedFilterOperation === "between" && Array.isArray(filterValue)) {
        const filterExpression = [
            [this.dataField, ">", filterValue[0]], 
            "and", 
            [this.dataField, "<", filterValue[1]]
        ];
        return filterExpression;
    }
    // Invoke the default implementation for other filter operations
    if(!this.defaultCalculateFilterExpression) 
        return [this.dataField, 'contains', filterValue];  
    return this.defaultCalculateFilterExpression.apply(this, arguments);
}

export default function App() {
    return (
        <Gantt>
            <Column ...
                calculateFilterExpression={calculateFilterExpression}
            />
        </Gantt>
    );
}

View Demo

NOTE

If you specify a custom header filter data source, a header filter item's value field can contain a single value (for example, 0) or a filter expression. If it is a filter expression, the calculateFilterExpression function does not apply.

If you use the search panel, the DataGrid may invoke the calculateFilterExpression function multiple times for lookup columns. The first call is to filter the lookup's data source, and subsequent calls are to filter the DataGrid's data source.

DataGrid uses "anyof" and "noneof" filter values for headerFilter. If you specify calculateFilterExpression for headerFilter, return an array of filterExpressions:

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [{
            calculateFilterExpression(filterValue, selectedFilterOperation, target){
                if (target == "headerFilter") {
                    // ...
                    let filterExpression = ["myDataField", "contains", customValue];
                    return [filterExpression];
                }
            }
            // ...
        }]
    });
});
Angular
TypeScript
HTML
import { DxGanttModule } from "devextreme-angular";
import { Column } from 'devextreme/ui/data_grid';
// ...
export class AppComponent {
    calculateFilterExpression(this: Column, filterValue, selectedFilterOperation, target){
        if (target == "headerFilter") {
            // ...
            let filterExpression = ["myDataField", "contains", customValue];
            return [filterExpression];
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
<dx-gantt ... >
    <dxi-column ...
        [calculateFilterExpression]="calculateFilterExpression">
    </dxi-column>
</dx-gantt>
Vue
App.vue
<template>
    <DxGantt>
        <DxColumn ...
            :calculate-filter-expression="calculateFilterExpression"
        />
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn
    },
    data() {
        return {
            calculateFilterExpression(filterValue, selectedFilterOperation, target){
                if (target == "headerFilter") {
                    // ...
                    let filterExpression = ["myDataField", "contains", customValue];
                    return [filterExpression];
                }
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column
} from 'devextreme-react/gantt';

function calculateFilterExpression(filterValue, selectedFilterOperation, target){
    if (target == "headerFilter") {
        // ...
        let filterExpression = ["myDataField", "contains", customValue];
        return [filterExpression];
    }
}

export default function App() {
    return (
        <Gantt>
            <Column ...
                calculateFilterExpression={calculateFilterExpression}
            />
        </Gantt>
    );
}
See Also

calculateSortValue

Calculates custom values used to sort this column.

Type:

String

|

Function

Function parameters:
rowData:

Object

The data of the row to which the cell belongs.

Context: GridBaseColumn

The this keyword refers to the column's configuration.

Return Value: any

The value to be used in sorting.

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

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        columns: [{
            dataField: "Position", // provides column values 
            calculateSortValue: "isOnVacation" // provides values used to sort the Position column
        }]
    });
});
Angular
app.component.html
app.module.ts
<dx-gantt ... >
    <dxi-column
        dataField="Position" <!-- provides column values -->
        calculateSortValue="isOnVacation"> <!-- provides values used to sort the Position column -->
    </dxi-column>
</dx-gantt>
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
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
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 gantt = $("#ganttContainer").dxGantt({
        columns: [{
            dataField: "Employee",
            sortOrder: "asc",
            calculateSortValue: function (rowData) {
                return rowData.State + rowData.City;
            }
        }]
    }).dxGantt("instance");
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
    <dxi-column
        dataField="Employee"
        sortOrder="asc"
        [calculateSortValue]="sortByLocation">
    </dxi-column>
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    sortByLocation (rowData) {
        return rowData.State + rowData.City;
    }
}
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
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
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 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. Refer to the following GitHub repository for an example: DataGrid - How to apply custom sorting to a grouped column.

See Also

caption

Specifies a caption for the column.

Type:

String

Default Value: undefined

Use this property to display a descriptive or friendly name for the column. If this property is not set, the caption will be generated from the name of the dataField.

cellComponent

An alias for the cellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

cellRender

An alias for the cellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

cellTemplate

Specifies a custom template for data cells.

Type:

template

Template Data:
Name Type Description
column

TreeList Column

The column's properties.
columnIndex

Number

The index of the cell's column.
component

TreeList

The UI component's instance.
data

Object

The data of the row to which the cell belongs.
displayValue any

The cell's display value. Differs from the value field only when the column uses lookup or calculateDisplayValue.
oldValue any

The cell's previous raw value. Defined only if repaintChangesOnly is true.
row

TreeList Row

The cell's row.
rowIndex

Number

The index of the cell's row. Begins with 0 on each page.
Refer to Column and Row Indexes for more information.
rowType

String

The row's type.
text

String

displayValue after applying format and customizeText.
value any

The cell's raw value.
watch

Function

Allows you to track a variable and respond to value changes. Applies when repaintChangesOnly is true.
This function has the following parameters:

  • getter(data): Function
    A function that returns the variable that should be tracked.

  • handler(newValue): Function
    A function called when this variable changes.

NOTE
If you implement two-way data binding in your template, make sure that you have switched off the built-in implementation of this feature by setting the twoWayBindingEnabled property to false.

View Demo

See Also

cssClass

Specifies a CSS class to be applied to the column.

Type:

String

Default Value: undefined

In the following code, this property is assigned a cell-highlighted CSS class that customizes the position column's cell and header styles:

jQuery
index.js
styles.css
$(function() {
    $("#ganttContainer").dxGantt({
        dataSource: [{
            ID: 1,
            position: "CTO"
        }, // ...
        ],
        columns: [ "ID", {
            dataField: "position",
            cssClass: "cell-highlighted"
        } ],
    });
})
.dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

.dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}
Angular
app.component.html
app.component.ts
app.module.ts
app.component.css
<dx-gantt ...
    [dataSource]="employees">
    <dxi-column dataField="ID"></dxi-column>
    <dxi-column dataField="position" cssClass="cell-highlighted"></dxi-column>
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    employees = [{
        ID: 1,
        position: "CTO"
    }, // ...
    ];
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
::ng-deep .dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

::ng-deep .dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}
Vue
App.vue
<template>
    <DxGantt ...
        :data-source="employees">
        <DxColumn data-field="ID" />
        <DxColumn data-field="position" css-class="cell-highlighted" />
    </DxGantt>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGantt, DxColumn } from 'devextreme-vue/gantt';

const employees = [{
    ID: 1,
    position: "CTO"
}, // ...
];

export default {
    components: {
        DxGantt,
        DxColumn
    },
    data() {
        employees
    }
};
</script>
<style>
.dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

.dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}
</style>
React
App.js
styles.css
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Gantt, Column } from 'devextreme-react/gantt';

const employees = [{
    ID: 1,
    position: "CTO"
}, // ...
];

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Gantt ...
                dataSource={employees}>
                <Column dataField="ID" />
                <Column dataField="position" cssClass="cell-highlighted" />
            </Gantt>
        );
    }
}
export default App;
.dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

.dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}
ASP.NET MVC Controls
Razor C#
styles.css
@(Html.DevExtreme().Gantt()
    .DataSource(new JS("employees"))
    .Columns(c => {
        c.Add().DataField("ID");
        c.Add().DataField("position").CssClass("cell-highlighted");
    })
)
<script type="text/javascript">
    var employees = [{
        ID: 1,
        position: "CTO"
    }, // ...
    ];
</script>
.dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

.dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}

customizeText

Customizes the text displayed in column cells.

Type:

Function

Function parameters:
cellInfo:

Object

Information on the current cell.

Object structure:
Name Type Description
valueText

String

The formatted value converted to a string.
value

String

|

Number

|

Date

The cell's raw value.
target

String

The UI element where the customizeText function was called: "row", "filterRow", or "headerFilter".
groupInterval

String

|

Number

This parameter is not in effect for the Gantt.
Context: GridBaseColumn

The this keyword refers to the column's configuration.

Return Value:

String

The text the cell should display.

jQuery
index.js
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [{
            dataField: "Miles",
            customizeText: function(cellInfo) {
                return cellInfo.value + " mi";
            }
        }]
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
<dxi-column
    dataField="Miles"
    [customizeText]="customizeText"
></dxi-column>
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    customizeText(cellInfo) {
        return cellInfo.value + " mi";
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxGantt ... >
        <DxColumn
            data-field="Miles" 
            :customize-text="customizeText"
        />
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGantt, DxColumn } from "devextreme-vue/gantt";

export default {
    components: {
        DxGantt,
        DxColumn
    },
    methods: {
        customizeText(cellInfo) {
            return cellInfo.value + " mi";
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt, { Column } from "devextreme-react/gantt";

class App extends React.Component {
    customizeText = (cellInfo) => {
        return cellInfo.value + " mi";
    }
    render() {
        return (
            <Gantt ... >
                <Column dataField="Miles" customizeText={this.customizeText} />
            </Gantt>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
    //...
    .Columns(columns => {
        columns.Add().DataField("Miles")
            .CustomizeText("customizeText");
    })
)

<script type="text/javascript">
    function customizeText(cellInfo) {
        return cellInfo.value + " mi";
    }
</script>
NOTE

  • The specified text is not used to filter data. If it should be, specify the calculateCellValue function instead.

  • The this keyword refers to the column's configuration.

See Also

dataField

Binds the column to a field of the dataSource.

Type:

String

Default Value: undefined

The columns array can contain column objects and data field names as strings. If you use column objects, specify the dataField property to bind the object to a column from a data source:

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [
            "CustomerID",
            { dataField: "EmployeeID", width: 200 },
            "OrderDate",
            { dataField: "Freight", format: "fixedPoint" },
            "ShipName",
            "ShipCity"
        ]
    });
});
Angular
HTML
TypeScript
<dx-gantt ... >
    <dxi-column dataField="CustomerID"></dxi-column>
    <dxi-column dataField="EmployeeID" [width]="200"></dxi-column>
    <dxi-column dataField="OrderDate"></dxi-column>
    <dxi-column dataField="Freight" format="fixedPoint"></dxi-column>
    <dxi-column dataField="ShipName"></dxi-column>
    <dxi-column dataField="ShipCity"></dxi-column>
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxGantt ... >
        <DxColumn data-field="CustomerID" />
        <DxColumn data-field="EmployeeID" :width="200" />
        <DxColumn data-field="OrderDate" />
        <DxColumn data-field="Freight" format="fixedPoint" />
        <DxColumn data-field="ShipName" />
        <DxColumn data-field="ShipCity" />
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column
} from 'devextreme-react/gantt';

export default function App() {
    return (
        <Gantt ... >
            <Column dataField="CustomerID" />
            <Column dataField="EmployeeID" width={200} />
            <Column dataField="OrderDate" />
            <Column dataField="Freight" format="fixedPoint" />
            <Column dataField="ShipName" />
            <Column dataField="ShipCity" />
        </Gantt>
    );
}
NOTE

Review the following notes about data binding:

  • If you create an unbound column (use the calculateCellValue function), specify the columns[].name property instead of dataField.

  • Data field names cannot be equal to this and should not contain the following characters: ., :, [, and ].

  • Column caption is generated from the dataField value. If you want to use a custom caption, specify it in the caption property. Unlike dataField, caption can contain any characters.

See Also

dataType

Casts column values to a specific data type.

Type:

String

Default Value: undefined
Accepted Values: 'string' | 'number' | 'date' | 'boolean' | 'object' | 'datetime'

If a data field provides values of one data type, but the UI component should cast them to another, specify the proper type in this property. In the following code, values of the ID and hireDate fields are cast to numeric and date data types, respectively.

jQuery
JavaScript
$(function() {
    $("#gantt").dxGantt({
        // ...
        dataSource: [{
            ID: "1",
            hireDate: 1491821760000
        }, // ...
        ],
        columns: [{
            dataField: "ID",
            dataType: "number"
        }, {
            dataField: "hireDate",
            dataType: "date"
        }]
    });
})
Angular
HTML
TypeScript
<dx-gantt ...
    [dataSource]="employees">
    <dxi-column
        dataField="ID"
        dataType="number">
    </dxi-column>
    <dxi-column 
        dataField="hireDate"
        dataType="date">
    </dxi-column>
</dx-gantt>
import { DxGanttModule } from 'devextreme-angular';
// ...
export class AppComponent {
    employees = [{
        ID: "1",
        hireDate: 1491821760000
    }, // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxGanttModule 
    ],
    // ...
})
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .DataSource(new JS("employees"))
    .Columns(c => {
        c.Add()
            .DataField("ID")
            .DataType(GridColumnDataType.Number);
        c.Add()
            .DataField("hireDate")
            .DataType(GridColumnDataType.Date);
    })
)
<script>
    var employees = [{
        ID: "1",
        hireDate: 1491821760000
    }, // ...
    ];
</script>
Vue
<template>
    <DxGantt ...
        :data-source="employees">
        <DxColumn
            data-field="ID"
            data-type="number"
        />
        <DxColumn
            data-field="hireDate"
            data-type="date"
        />
    </DxGantt>
</template>
<script>
import { DxGantt, DxColumn } from 'devextreme-vue/gantt';

const employees = [{
    ID: '1',
    hireDate: 1491821760000
}, // ...
];

export default {
    components: {
        DxGantt,
        DxColumn
    },
    data() {
        employees
    }
};
</script>
React
import React from 'react';
import { Gantt, Column } from 'devextreme-react/gantt';

const employees = [{
    ID: '1',
    hireDate: 1491821760000
}, // ...
];

class App extends React.Component {
    render() {
        return (
            <Gantt ...
                dataSource={employees}>
                <Column dataField="ID" dataType="number" />
                <Column dataField="hireDate" dataType="date" />
            </Gantt>
        );
    }
}
export default App;
See Also

encodeHtml

Specifies whether HTML tags are displayed as plain text or applied to the values of the column.

Type:

Boolean

Default Value: true

When true, HTML tags are displayed as plain text; when false, they are applied to the values of the column. If you disable this property, malicious code can be executed. Refer to the following help topic for more information: Potentially Vulnerable API - encodeHtml.

falseText

In a boolean column, replaces all false items with a specified text. Applies only if showEditorAlways property is false.

Type:

String

Default Value: 'false'

See Also

filterOperations

Specifies available filter operations. Applies if allowFiltering is true and the filterRow is visible.

Selector: FilterOperation
Type:

Array<String>

Default Value: undefined
Accepted Values: '=' | '<>' | '<' | '<=' | '>' | '>=' | 'contains' | 'endswith' | 'isblank' | 'isnotblank' | 'notcontains' | 'startswith' | 'between' | 'anyof' | 'noneof'

The following table lists available filter operations by data type. Users can apply these filter operations in the filter row. The Gantt uses the first operation in each array as the default operation for the specified data type.

dataType filterOperations
"string" [ "contains", "notcontains", "startswith", "endswith", "=", "<>" ]
"numeric" [ "=", "<>", "<", ">", "<=", ">=", "between" ]
"date" [ "=", "<>", "<", ">", "<=", ">=", "between" ]

The nested filter builder also allows users to select from an extended set of operations that include "anyof", "noneof", "isblank", "isnotblank", and names of custom operations (if any).

The filterOperations property can also accept an empty array. In this case, the selectedFilterOperation applies, and users cannot change it.

See Also

filterType

Specifies whether a user changes the current filter by including (selecting) or excluding (clearing the selection of) values. Applies only if headerFilter.visible and allowHeaderFiltering are true.

Type:

String

Default Value: 'include'
Accepted Values: 'exclude' | 'include'

See Also

filterValue

Specifies the column's filter value displayed in the filter row.

Type: any
Default Value: undefined
Raised Events: onOptionChanged

This value is applied using the selectedFilterOperation.

NOTE
The filter row and header filter can work simultaneously. If you specify the filterValue property to set up the filter row, it limits the filter values for the header filter and vice versa: if you specify the filterValues property to set up the header filter, it limits the filter row's filter values.

filterValues

Specifies values selected in the column's header filter.

Type:

Array<any>

Default Value: undefined
Raised Events: onOptionChanged

Note that you should convert date strings into JavaScript Date objects before using them in the filter expression.

If the headerFilter.groupInterval property is set, each value in the filterValues array specifies the beginning of an interval instead of an exact value:

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [{
            dataField: "ID",
            dataType: "number",
            headerFilter: { groupInterval: 100 },
            filterValues: [500, 700], // Filter intervals are 500-600 and 700-800
        },
        // ...
        ]
    })
});
Angular
app.component.html
app.module.ts
<dx-gantt ... >
    <dxi-column
        dataField="ID"
        dataType="number"
        [filterValues]="[500, 700]"> <!-- Filter intervals are 500-600 and 700-800 -->
        <dxo-header-filter
            [groupInterval]="100">
        </dxo-header-filter>
    </dxi-column>
</dx-gantt>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxGantt>
        <DxColumn
            data-field="ID"
            data-type="number"
            :filter-values="[500, 700]"> <!-- Filter intervals are 500-600 and 700-800 -->
            <DxHeaderFilter
                :group-interval="100"
            />
        </DxColumn>
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn,
    DxHeaderFilter
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn,
        DxHeaderFilter
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column,
    HeaderFilter
} from 'devextreme-react/gantt';

export default function App() {
    return (
        <Gantt>
            <Column
                dataField="ID"
                dataType="number"
                filterValues={[500, 700]}> {/* Filter intervals are 500-600 and 700-800 */}
                <HeaderFilter
                    groupInterval={100}>
                </HeaderFilter>
            </Column>
        </Gantt>
    );
}
NOTE
The filter row and header filter can work simultaneously. If you specify the filterValue property to set up the filter row, it limits the filter values for the header filter and vice versa: if you specify the filterValues property to set up the header filter, it limits the filter row's filter values.
See Also

format

Formats a value before it is displayed in a column cell.

Selector: Format
Type:

Format

Default Value: ''

See the format section for information on accepted values.

In the following code, the "fixedPoint" format type with a precision of 2 decimal places is applied to column values:

jQuery
index.js
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [{
            // ...
            format: {
                type: "fixedPoint",
                precision: 2
            }
        }]
    });
});
Angular
app.component.html
app.module.ts
<dx-gantt ... >
    <dxi-column ... >
        <dxo-format
            type="fixedPoint"
            [precision]="2">
        </dxo-format>
    </dxi-column>
</dx-gantt>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxGantt ... >
        <DxColumn ... >
            <DxFormat
                type="fixedPoint"
                :precision="2"
            />
        </DxColumn>
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn,
    DxFormat
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn,
        DxFormat
    },
    data() {
        // ...
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column,
    Format
} from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt>
                <Column ... >
                    <Format
                        type="fixedPoint"
                        precision={2}
                    />
                </Column>
            </Gantt>
        );
    }
}
export default App;

The format property also limits user input in cells that use the DateBox UI component for editing. For cells that use the NumberBox UI component, you can specify the editorOptions.format property, as shown in the following demo:

View Demo

See Also

headerCellComponent

An alias for the headerCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

headerCellRender

An alias for the headerCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

headerCellTemplate

Specifies a custom template for column headers.

Type:

template

Template Data:
Name Type Description
column

TreeList Column

The settings of the column to which the header belongs.
columnIndex

Number

The index of the column to which the header belongs.
component

TreeList

The UI component's instance.

See Also

headerFilter

Specifies data settings for the header filter.

Selector: HeaderFilter
Type:

Object

Default Value: undefined

View Demo

See Also

minWidth

Specifies the minimum width of the column.

Type:

Number

Default Value: undefined

See Also

selectedFilterOperation

Specifies a filter operation that applies when users use the filter row to filter the column.

Type:

String

Default Value: undefined
Accepted Values: '<' | '<=' | '<>' | '=' | '>' | '>=' | 'between' | 'contains' | 'endswith' | 'notcontains' | 'startswith'
Raised Events: onOptionChanged

The following table lists default selected filter operations by data type:

dataTypeDefault filter operation
"string""contains"
"number""="
"date""="
See Also

sortIndex

Specifies the index according to which columns participate in sorting.

Type:

Number

Default Value: undefined
Raised Events: onOptionChanged

This property accepts an integer specifying the index of the column in a collection of columns with applied sorting. For example, consider the following data source that can provide data for three columns.

JavaScript
const dataSource = [
    { firstName: "John", lastName: "Doe", title: "Sales Manager" },
    { firstName: "Michael", lastName: "King", title: "Sales Representative" },
    // ...
];

To sort data first by the "Last Name" and then by the "First Name" column, use the following code. Note that the sortOrder property should also be specified.

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [
            { dataField: "firstName", sortIndex: 1, sortOrder: "asc" },
            { dataField: "lastName", sortIndex: 0, sortOrder: "asc" },
            // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-gantt ... >
    <dxi-column dataField="firstName" [sortIndex]="1" sortOrder="asc"></dxi-column>
    <dxi-column dataField="lastName" [sortIndex]="0" sortOrder="asc"></dxi-column>
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxGantt ... >
        <DxColumn
            data-field="firstName"
            :sort-index="1"
            sort-order="asc"
        />
        <DxColumn
            data-field="lastName"
            :sort-index="0"
            sort-order="asc"
        />
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column
} from 'devextreme-react/gantt';

export default function App() {
    return (
        <Gantt ... >
            <Column
                dataField="firstName"
                sortIndex={1}
                sortOrder="asc"
            />
            <Column
                dataField="lastName"
                sortIndex={0}
                sortOrder="asc"
            />
        </Gantt>
    );
}

You can set the sortIndex property at design time to specify initial sorting, or change this property using the columnOption method to sort at runtime.

sortingMethod

Specifies a custom comparison function for sorting. Applies only when sorting is performed on the client.

Type:

Function

Function parameters:
value1: any

A value to be compared.

value2: any

A value to be compared.

Context: GridBaseColumn

The this keyword refers to the column's configuration.

Return Value:

Number

Specifies whether value1 goes before value2.

Default Value: undefined

This function accepts two cell values and should return a number indicating their sort order:

  • Less than zero
    value1 goes before value2.
  • Zero
    value1 and value2 remain unchanged relative to each other.
  • Greater than zero
    value1 goes after value2.

The string comparison is culture-insensitive by default. Use the following code to make it culture-sensitive:

jQuery
JavaScript
$(function () {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [{
            dataField: "fieldName",
            sortingMethod: function (value1, value2) {
                // Handling null values
                if(!value1 && value2) return -1;
                if(!value1 && !value2) return 0;
                if(value1 && !value2) return 1;
                // Determines whether two strings are equivalent in the current locale
                return value1.localeCompare(value2);
            }
        }]
    });
});
Angular
TypeScript
HTML
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    sortStringsConsideringCulture (value1, value2) {
        // Handling null values
        if(!value1 && value2) return -1;
        if(!value1 && !value2) return 0;
        if(value1 && !value2) return 1;
        // Determines whether two strings are equivalent in the current locale
        return value1.localeCompare(value2);
    }
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
<dx-gantt ... >
    <dxi-column
        dataField="fieldName"
        [sortingMethod]="sortStringsConsideringCulture">
    </dxi-column>
</dx-gantt>
Vue
App.vue
<template>
    <DxGantt ... >
        <DxColumn
            data-field="fieldName"
            :sorting-method="sortStringsConsideringCulture"
        />
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt, {
    DxColumn
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        DxColumn
    },
    // ...
    methods: {
        sortStringsConsideringCulture (value1, value2) {
            // Handling null values
            if(!value1 && value2) return -1;
            if(!value1 && !value2) return 0;
            if(value1 && !value2) return 1;
            // Determines whether two strings are equivalent in the current locale
            return value1.localeCompare(value2);
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Gantt, {
    Column
} from 'devextreme-react/gantt';

function sortStringsConsideringCulture (value1, value2) {
    // Handling null values
    if(!value1 && value2) return -1;
    if(!value1 && !value2) return 0;
    if(value1 && !value2) return 1;
    // Determines whether two strings are equivalent in the current locale
    return value1.localeCompare(value2);
}

export default function App() {
    return (
        <Gantt ... >
            <Column
                dataField="fieldName"
                sortingMethod={sortStringsConsideringCulture}
            />
        </Gantt>
    );
}
NOTE
The sortingMethod's value1 and value2 are the values returned from the calculateSortValue function if the latter is specified.

sortOrder

Specifies the sort order of column values.

Type:

String

Default Value: undefined
Accepted Values: undefined | 'asc' | 'desc'
Raised Events: onOptionChanged

By default, rows are sorted according to the data source. To sort rows in an ascending or descending order, set the sortOrder property to "asc" or "desc". If you need to sort by multiple columns, specify the sortIndex. Otherwise, each sorted column will get a sort index according to its position in the columns array.

View Demo

See Also

trueText

In a boolean column, replaces all true items with a specified text. Applies only if showEditorAlways property is false.

Type:

String

Default Value: 'true'

See Also

visible

Specifies whether the column is visible, that is, occupies space in the table.

Type:

Boolean

Default Value: true
Raised Events: onOptionChanged

DataGrid Demo TreeList Demo

visibleIndex

Specifies the position of the column regarding other columns in the resulting UI component.

Type:

Number

Default Value: undefined
Raised Events: onOptionChanged

Visible indexes are normalized after the UI component's creation: the leftmost column is assigned an index of 0; the rightmost column's index becomes equal to the number of visible columns minus 1; other columns get the indexes in between.

IMPORTANT
This index is used in column reordering only. Do not confuse it with the visible column index, which is used to manipulate cells by calling methods, such as getCellElement(rowIndex, visibleColumnIndex), editCell(rowIndex, visibleColumnIndex), etc.
See Also

width

Specifies the column's width in pixels or as a percentage. Ignored if it is less than minWidth.

Type:

Number

|

String

Default Value: undefined

The property supports the following types of values:

  • Number
    The column's width in pixels.

  • String
    A CSS-accepted column width measurement (for example, "55px", "80%" and "auto") except relative units such as em, ch, vh, etc.

    NOTE
    Fixed columns ignore widths specified as a percentage.

DataGrid Demo TreeList Demo

See Also