Angular Gantt - columns
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.
jQuery
$(function() { $("#gantt").dxGantt({ columns: [{ dataField: "title", caption: "Subject", width: 300 }, { dataField: "start", caption: "Start Date" }, { dataField: "end", caption: "End Date" }], // ... }); });
Angular
<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
<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
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
@(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
@(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
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.
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.
allowSorting
Specifies whether a user can sort rows by this column at runtime. Applies only if sorting.mode differs from "none".
calculateCellValue
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
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
<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
<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
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
$(function() { $("#ganttContainer").dxGantt({ columns: [{ calculateCellValue: function(rowData) { // ... return this.defaultCalculateCellValue(rowData); } }] }); });
Angular
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
<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
// ... 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;
this
keyword refers to the column's configuration.See Also
- columns[].customizeText
- columns[].calculateDisplayValue
calculateDisplayValue
Calculates custom display values for column cells. Requires specifying the dataField or calculateCellValue property. Used in lookup optimization.
This property accepts the name of the data source field that provides display values...
jQuery
$(function() { $("#ganttContainer").dxGantt({ columns: [{ dataField: "countryID", // provides values for editing calculateDisplayValue: "country" // provides display values }] }); });
Angular
<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
<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
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
@(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
$(function() { $("#ganttContainer").dxGantt({ columns: [{ dataField: "countryID", // provides values for editing calculateDisplayValue: function (rowData) { // combines display values return rowData.capital + " (" + rowData.country + ")"; } }] }); });
Angular
<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
<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
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
@(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
A user input value.
Contains an array if the selectedFilterOperation
is one of the following: "between", "anyof", "noneof".
A UI element used to filter data.
Possible values: "filterRow", "headerFilter", "filterBuilder", "search".
A filter expression.
If you filter data remotely, the filter expression must not contain functions.
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. Passthis.calculateCellValue
if your column contains calculated values.comparisonOperator
One of the following operators: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".filterValue
A user input value. Values from theselector
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
$(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
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
<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
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> ); }
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.
See Also
- filterValue
- columns[].filterValue
- columns[].selectedFilterOperation
- columns[].filterValues
- columns[].filterType
- columns[].filterOperations
calculateSortValue
This property accepts the name of the data source field that provides values used to sort this column.
jQuery
$(function() { $("#ganttContainer").dxGantt({ columns: [{ dataField: "Position", // provides column values calculateSortValue: "isOnVacation" // provides values used to sort the Position column }] }); });
Angular
<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
<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
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
$(function() { var gantt = $("#ganttContainer").dxGantt({ columns: [{ dataField: "Employee", sortOrder: "asc", calculateSortValue: function (rowData) { return rowData.State + rowData.City; } }] }).dxGantt("instance"); });
Angular
<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
<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
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;
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.
This property only accepts strings if remote operations are enabled.
See Also
- sortingMethod
- columns[].sortOrder
caption
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.
cellTemplate
Name | Type | Description |
---|---|---|
column |
The column's properties. |
|
columnIndex |
The index of the cell's column. |
|
component |
The UI component's instance. |
|
data |
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 |
The cell's row. |
|
rowIndex |
The index of the cell's row. Begins with 0 on each page. |
|
rowType |
The row's type. |
|
text |
displayValue after applying format and customizeText. |
|
value | any |
The cell's raw value. |
watch |
Allows you to track a variable and respond to value changes. Applies when repaintChangesOnly is true.
|
See Also
cssClass
Specifies a CSS class to be applied to the column.
In the following code, this property is assigned a cell-highlighted
CSS class that customizes the position
column's cell and header styles:
jQuery
$(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
<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
<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
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
@(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
Name | Type | Description |
---|---|---|
valueText |
The formatted value converted to a string. |
|
value | | | |
The cell's raw value. |
target |
The UI element where the customizeText function was called: "row", "filterRow", or "headerFilter". |
|
groupInterval | | |
This parameter is not in effect for the Gantt. |
jQuery
$(function() { $("#ganttContainer").dxGantt({ // ... columns: [{ dataField: "Miles", customizeText: function(cellInfo) { return cellInfo.value + " mi"; } }] }); });
Angular
<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
<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
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
@(Html.DevExtreme().Gantt() //... .Columns(columns => { columns.Add().DataField("Miles") .CustomizeText("customizeText"); }) ) <script type="text/javascript"> function customizeText(cellInfo) { return cellInfo.value + " mi"; } </script>
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
- columns[].calculateCellValue
dataField
Binds the column to a field of the dataSource.
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
$(function() { $("#ganttContainer").dxGantt({ // ... columns: [ "CustomerID", { dataField: "EmployeeID", width: 200 }, "OrderDate", { dataField: "Freight", format: "fixedPoint" }, "ShipName", "ShipCity" ] }); });
Angular
<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
<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
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> ); }
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
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
$(function() { $("#gantt").dxGantt({ // ... dataSource: [{ ID: "1", hireDate: 1491821760000 }, // ... ], columns: [{ dataField: "ID", dataType: "number" }, { dataField: "hireDate", dataType: "date" }] }); })
Angular
<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
@(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
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.
filterOperations
Specifies available filter operations. Applies if allowFiltering is true and the filterRow is visible.
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
- columns[].selectedFilterOperation
- columns[].filterValue
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.
filterValue
Specifies the column's filter value displayed in the filter row.
This value is applied using the selectedFilterOperation.
filterValues
Specifies values selected in the column's header filter.
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
$(function() { $("#ganttContainer").dxGantt({ // ... columns: [{ dataField: "ID", dataType: "number", headerFilter: { groupInterval: 100 }, filterValues: [500, 700], // Filter intervals are 500-600 and 700-800 }, // ... ] }) });
Angular
<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
<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
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> ); }
See Also
format
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
$(function() { $("#ganttContainer").dxGantt({ // ... columns: [{ // ... format: { type: "fixedPoint", precision: 2 } }] }); });
Angular
<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
<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
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:
See Also
headerCellTemplate
Name | Type | Description |
---|---|---|
column |
The settings of the column to which the header belongs. |
|
columnIndex |
The index of the column to which the header belongs. |
|
component |
The UI component's instance. |
selectedFilterOperation
Specifies a filter operation that applies when users use the filter row to filter the column.
The following table lists default selected filter operations by data type:
dataType | Default filter operation |
---|---|
"string" | "contains" |
"number" | "=" |
"date" | "=" |
See Also
sortIndex
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.
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
$(function() { $("#ganttContainer").dxGantt({ // ... columns: [ { dataField: "firstName", sortIndex: 1, sortOrder: "asc" }, { dataField: "lastName", sortIndex: 0, sortOrder: "asc" }, // ... ] }); });
Angular
<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
<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
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.
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
$(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
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
<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
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> ); }
sortOrder
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.
See Also
trueText
In a boolean column, replaces all true items with a specified text. Applies only if showEditorAlways property is false.
visibleIndex
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.
See Also
width
Specifies the column's width in pixels or as a percentage. Ignored if it is less than minWidth.
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.NOTEFixed columns ignore widths specified as a percentage.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.