JavaScript/jQuery Gantt - columns.lookup

Specifies properties of a lookup column.

Type:

Object

Default Value: undefined

A lookup column restricts the set of values that can be chosen when a user edits or filters the column. In a lookup column, each cell is a drop-down menu. You can use a lookup column when you need to substitute displayed values with required values. For example, consider that you have two arrays of objects: drivers and buses.

JavaScript
const drivers = [
    { driverID: 1, firstName: "John", lastName: "Smith", busID: 2 },
    { driverID: 2, firstName: "Lizzy", lastName: "Cook", busID: 1 },
    { driverID: 3, firstName: "Brian", lastName: "Hawkins", busID: 3 }
];

const buses = [
    { busID: 1, plates: "123456" },
    { busID: 2, plates: "AB-1234" },
    { busID: 3, plates: "CD-9876" }
];

All drivers have the busID field, which refers to a bus. If drivers is the main dataSource, the Bus ID column displays bus IDs, which provides little information to a user. It will be more useful to display bus license plates instead of IDs. For this, the buses array must be set as a lookup dataSource for the Bus ID column. Then, the names of data fields must be assigned to the valueExpr and displayExpr properties. Values from the valueExpr data field will be replaced with values from the displayExpr data field.

jQuery
JavaScript
$(function() {
    $("#ganttContainer").dxGantt({
        dataSource: drivers,
        // ...
        columns: [{
            dataField: "busID",
            lookup: {
                dataSource: buses,
                valueExpr: "busID",
                displayExpr: "plates"
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-gantt [dataSource]="drivers">
    <dxi-column dataField="busID">
        <dxo-lookup
            [dataSource]="buses"
            valueExpr="busID"
            displayExpr="plates">
        </dxo-lookup>
    </dxi-column>
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    drivers = [
        { driverID: 1, firstName: "John", lastName: "Smith", busID: 2 },
        { driverID: 2, firstName: "Lizzy", lastName: "Cook", busID: 1 },
        { driverID: 3, firstName: "Brian", lastName: "Hawkins", busID: 3 }
    ];
    buses = [
        { busID: 1, plates: "123456" },
        { busID: 2, plates: "AB-1234" },
        { busID: 3, plates: "CD-9876" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxGantt ...
        :data-source="drivers">
        <DxColumn data-field="busID">
            <DxLookup
                :data-source="buses"
                value-expr="busID"
                display-expr="plates"
            />
        </DxColumn>
    </DxGantt>
</template>

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

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

const drivers = [
    { driverID: 1, firstName: "John", lastName: "Smith", busID: 2 },
    { driverID: 2, firstName: "Lizzy", lastName: "Cook", busID: 1 },
    { driverID: 3, firstName: "Brian", lastName: "Hawkins", busID: 3 }
];

const buses = [
    { busID: 1, plates: "123456" },
    { busID: 2, plates: "AB-1234" },
    { busID: 3, plates: "CD-9876" }
];

export default {
    components: {
        DxGantt,
        DxColumn,
        DxLookup
    },
    data() {
        return {
            drivers,
            buses
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const drivers = [
    { driverID: 1, firstName: "John", lastName: "Smith", busID: 2 },
    { driverID: 2, firstName: "Lizzy", lastName: "Cook", busID: 1 },
    { driverID: 3, firstName: "Brian", lastName: "Hawkins", busID: 3 }
];

const buses = [
    { busID: 1, plates: "123456" },
    { busID: 2, plates: "AB-1234" },
    { busID: 3, plates: "CD-9876" }
];

export default function App() {
    return (
        <Gantt ...
            dataSource={drivers}>
            <Column dataField="busID">
                <Lookup
                    dataSource={buses}
                    valueExpr="busID"
                    displayExpr="plates"
                />
            </Column>
        </Gantt>
    );
}

With this code, the Bus ID column contains license plates instead of IDs. Moreover, the user can choose a plate number from the drop-down menu when editing cells or applying a filter to this column.

View Demo

See Also

allowClearing

Specifies whether to display the Clear button in lookup column cells while they are being edited.

Type:

Boolean

Default Value: false

Set this property to true only if your data source accepts null values.

To specify this property based on a condition, set the showClearButton property instead. This is a property of the SelectBox UI component which is used as an editor for lookup column cells. allowClearing is an alias for this property in the Gantt. The following code shows how to set showClearButton in the onEditorPreparing event handler:

jQuery
index.js
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        onEditorPreparing: function (e) {
            if (/* a condition to set the property's value */) {
                e.editorOptions.showClearButton = true;
            }
        }
    });
});
Angular
app.component.ts
app.module.ts
app.component.html
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    onEditorPreparing(e) {
        if (/* a condition to set the property's value */) {
            e.editorOptions.showClearButton = true;
        }
    }
}
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
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
<dx-gantt ...
    (onEditorPreparing)="onEditorPreparing($event)">
    <!-- ... -->
</dx-gantt>
Vue
App.vue
<template>
    <DxGantt ...
        :on-editor-preparing="onEditorPreparing">
        <!-- ... -->
    </DxGantt>
</template>

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

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    // ...
    methods: {
        onEditorPreparing(e) {
            if (/* a condition to set the property's value */) {
                e.editorOptions.showClearButton = true;
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

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

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    onEditorPreparing(e) {
        if (/* a condition to set the property's value */) {
            e.editorOptions.showClearButton = true;
        }
    }

    render() {
        return (
            <Gantt ...
                onEditorPreparing={this.onEditorPreparing}>
                {/* ... */}
            </Gantt>
        );
    }
}
export default App;

dataSource

Specifies the data source for the lookup column.

Type:

Array<any>

|

Store

|

DataSource Configuration

|

Function

| null
Function parameters:
options:

Object

Information on the current row.

Object structure:
Name Type Description
data

Object

The row's data.
key any

The row's key.
Return Value:

Array<any>

|

Store

|

DataSource Configuration

An array of objects or primitives, a store instance, or a DataSource configuration.

Default Value: undefined

This property accepts one of the following:

If the lookup data source contains objects, specify the valueExpr and displayExpr properties in addition to the dataSource.

NOTE
Collections of primitives are not supported if you use the DevExtreme.AspNet.Data library API directly or via a server-side wrapper (as with the DevExtreme ASP.NET MVC Controls) to load the collections from a remote data source. Reconfigure the data source to return collections of objects.

View Demo

displayExpr

Specifies the data source field whose values must be displayed.

Type:

String

|

Function

Function parameters:
data:

Object

A row's data.

Return Value:

String

The displayed value.

Default Value: undefined

This property accepts a string - the name of the data field that provides displayed values, or a function that returns the displayed value.

View Demo

NOTE

Values in a lookup column are sorted by the valueExpr field. Implement the column's calculateSortValue function if you want to sort by the displayExpr field instead:

jQuery
index.js
$(function() {
    $("#ganttContainer").dxGantt({
        columns: [{
            // ...
            lookup: {
                // ...
            },
            calculateSortValue: function (data) {
                const value = this.calculateCellValue(data);
                return this.lookup.calculateCellValue(value);
            }
        }]
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
    <dxi-column ...
        [calculateSortValue]="calculateSortValue">
        <dxo-lookup ... ></dxo-lookup>
    </dxi-column>
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    calculateSortValue (data) {
        const column = this as any;
        const value = column.calculateCellValue(data);
        return column.lookup.calculateCellValue(value);
    }
}
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 ...
            :calculate-sort-value="calculateSortValue">
            <DxLookup ... />
        </DxColumn>
    </DxGantt>
</template>

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

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

export default {
    components: {
        DxGantt,
        DxColumn,
        DxLookup
    },
    data() {
        return {
            calculateSortValue (data) {
                const column = this;
                const value = column.calculateCellValue(data);
                return column.lookup.calculateCellValue(value);
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

function calculateSortValue (data) {
    const column = this;
    const value = column.calculateCellValue(data);
    return column.lookup.calculateCellValue(value);
}

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

valueExpr

Specifies the data field whose values should be replaced with values from the displayExpr field.

Type:

String

Default Value: undefined

Values from this data field must have the same type as the column's dataField values.

View Demo

NOTE
You cannot specify valueExpr as a function when the UI component is bound to a remote data source. This is because valueExpr is used in a filter the UI component sends to the server when querying data. Functions with custom logic cannot be serialized for this filter.