DevExtreme Angular - 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.
- <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
- ],
- // ...
- })
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.
- <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
- ],
- // ...
- })
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:
- <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
- ],
- // ...
- })
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.
- 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>");
- }
- });
- });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.