A newer version of this page is available.

DevExtreme React - Enable Grouping

The Lookup can organize items in groups. If you use a simple array as a data source, its objects must have the key and items fields.

jQuery

JavaScript

const lookupData = [{
    key: "Mr. John Heart",
    items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"]
}, {
    key: "Mrs. Olivia Peyton",
    items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"]
}, // ... 
];

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: lookupData,
        grouped: true
    });
});

Angular

HTML

TypeScript

<dx-lookup
    [dataSource]="lookupDataSource"
    [grouped]="true">
</dx-lookup>

import { DxLookupModule } from "devextreme-angular";
// ...
export class AppComponent {
    lookupDataSource = [{
        key: "Mr. John Heart",
        items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"]
    }, {
        key: "Mrs. Olivia Peyton",
        items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"]
    }, // ... 
    ];
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})

Vue

<template>
    <DxLookup
        :data-source="lookupData"
        :grouped="true"
    />
</template>

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

import { DxLookup } from 'devextreme-vue/lookup';

export default {
    components: {
        DxLookup
    },
    data() {
        return {
            lookupData: [{
                key: 'Mr. John Heart',
                items: ['Google AdWords Strategy', 'New Brochures', 'Update NDA Agreement']
            }, {
                key: 'Mrs. Olivia Peyton',
                items: ['Update Personnel Files', 'Non-Compete Agreements', 'Give Final Approval for Refunds']
            }, // ... 
            ]
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Lookup } from 'devextreme-react/lookup';

const lookupData = [{
    key: 'Mr. John Heart',
    items: ['Google AdWords Strategy', 'New Brochures', 'Update NDA Agreement']
}, {
    key: 'Mrs. Olivia Peyton',
    items: ['Update Personnel Files', 'Non-Compete Agreements', 'Give Final Approval for Refunds']
}, // ... 
];

class App extends React.Component {
    render() {
        return (
            <Lookup
                dataSource={lookupData}
                grouped={true}
            />
        );
    }
}

export default App;

NOTE

Only one-level grouping is supported.

If you use the DevExtreme DataSource, specify its group option. In both cases, you need to make the Lookup know that its data source is grouped by assigning true to the grouped option.

jQuery

JavaScript

const lookupData = [
    { name: "Amelia", birthYear: 1991, gender: "female" },
    { name: "Benjamin", birthYear: 1983, gender: "male" },
    { name: "Andrew", birthYear: 1991, gender: "male" },
    { name: "Daniela", birthYear: 1983, gender: "female" },
    { name: "Lee", birthYear: 1983, gender: "male" },
    { name: "Betty", birthYear: 1983, gender: "female" }
];

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: new DevExpress.data.DataSource({ 
            store: lookupData, 
            group: "gender"
        }),
        grouped: true,
        displayExpr: "name",
        valueExpr: "name"
    });
});

Angular

HTML

TypeScript

<dx-lookup
    [dataSource]="lookupDataSource"
    [grouped]="true"
    displayExpr="name"
    valueExpr="name">
</dx-lookup>

import { DxLookupModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    data = [
        { name: "Amelia", birthYear: 1991, gender: "female" },
        { name: "Benjamin", birthYear: 1983, gender: "male" },
        { name: "Andrew", birthYear: 1991, gender: "male" },
        { name: "Daniela", birthYear: 1983, gender: "female" },
        { name: "Lee", birthYear: 1983, gender: "male" },
        { name: "Betty", birthYear: 1983, gender: "female" }
    ];
    lookupDataSource = new DataSource({
        store: data, 
        group: "gender"
    });
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})

Vue

<template>
    <DxLookup
        :data-source="dataSource"
        :grouped="true"
        display-expr="name"
        value-expr="name"
    />
</template>

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

import { DxLookup } from 'devextreme-vue/lookup';
import DataSource from "devextreme/data/data_source";

const lookupData = [
    { name: 'Amelia', birthYear: 1991, gender: 'female' },
    { name: 'Benjamin', birthYear: 1983, gender: 'male' },
    { name: 'Andrew', birthYear: 1991, gender: 'male' },
    { name: 'Daniela', birthYear: 1983, gender: 'female' },
    { name: 'Lee', birthYear: 1983, gender: 'male' },
    { name: 'Betty', birthYear: 1983, gender: 'female' }
];

export default {
    components: {
        DxLookup
    },
    data() {
        return {
            dataSource: new DataSource({
                store: lookupData,
                group: 'gender'
            })
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Lookup } from 'devextreme-react/lookup';
import DataSource from "devextreme/data/data_source";

const lookupData = [
    { name: 'Amelia', birthYear: 1991, gender: 'female' },
    { name: 'Benjamin', birthYear: 1983, gender: 'male' },
    { name: 'Andrew', birthYear: 1991, gender: 'male' },
    { name: 'Daniela', birthYear: 1983, gender: 'female' },
    { name: 'Lee', birthYear: 1983, gender: 'male' },
    { name: 'Betty', birthYear: 1983, gender: 'female' }
];

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

        this.dataSource = new DataSource({
            store: lookupData,
            group: 'gender'
        });
    }

    render() {
        return (
            <Lookup
                dataSource={this.dataSource}
                grouped={true}
                displayExpr="name"
                valueExpr="name"
            />
        );
    }
}

export default App;

To customize group headers, specify a groupTemplate. In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:

Angular

HTML

TypeScript

<dx-lookup
    [dataSource]="lookupDataSource"
    [grouped]="true"
    groupTemplate="groupTemplate">
    <div *dxTemplate="let group of 'groupTemplate'; let i = index">
        <div>[{{i + 1}}] Assigned: {{group.key}}</div>
    </div>
</dx-lookup>

import { DxLookupModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    lookupDataSource = [{
        key: "Mr. John Heart",
        items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"]
    }, {
        key: "Mrs. Olivia Peyton",
        items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"]
    }, // ... 
    ];
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})

Vue

<template>
    <DxLookup
        :data-source="dataSource"
        :grouped="true"
        group-template="group">
        <template #group="{ data, index }">
            <div>[{{index + 1}}] Assigned: {{data.key}}</div>
        </template>
    </DxLookup>
</template>

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

import { DxLookup } from 'devextreme-vue/lookup';

export default {
    components: {
        DxLookup
    },
    data() {
        return {
            dataSource: [{
                key: "Mr. John Heart",
                items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"]
            }, {
                key: "Mrs. Olivia Peyton",
                items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"]
            }, // ... 
            ]
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Lookup } from 'devextreme-react/lookup';
import DataSource from "devextreme/data/data_source";

const renderGroup = (data, index) => {
    return (
        <div>[{index + 1}] Assigned: {data.key}</div>
    );
}

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

        this.dataSource = [{
            key: "Mr. John Heart",
            items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"]
        }, {
            key: "Mrs. Olivia Peyton",
            items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"]
        }, // ... 
        ];
    }

    render() {
        return (
            <Lookup
                dataSource={this.dataSource}
                grouped={true}
                groupRender={renderGroup}
            />
        );
    }
}

export default App;

If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the itemTemplate callback function as shown in the following code.

JavaScript

const lookupData = [{
    key: "Mr. John Heart",
    items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"]
}, {
    key: "Mrs. Olivia Peyton",
    items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"]
}, // ... 
];

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: lookupData,
        grouped: true,
        groupTemplate: function (data) {
            return $("<div>Assigned: " + data.key + "</div>");
        }
    });
});

DevExtreme React - Enable Grouping

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

Angular

Vue

React

See Also