Vue Lookup - 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.
- <template>
- <DxLookup
- :data-source="lookupData"
- :grouped="true"
- />
- </template>
- <script>
- 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>
NOTE
Only one-level grouping is supported.
If you use the DevExtreme DataSource, specify its group property. In both cases, you need to make the Lookup know that its data source is grouped by assigning true to the grouped property.
- <template>
- <DxLookup
- :data-source="dataSource"
- :grouped="true"
- display-expr="name"
- value-expr="name"
- />
- </template>
- <script>
- 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>
To customize group headers, specify a groupTemplate.
- <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.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>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.