Lookup can load data from different data source types. To use a local array, assign it to the dataSource property. If array elements are objects, specify the fields that supply Lookup's value (valueExpr) and displayed value (displayExpr). For information on other data source types, refer to the following articles:
jQuery$(function() {
$("#lookup").dxLookup({
dataSource: new DevExpress.data.DataSource({
store: employeesTasks,
key: "ID"
}),
valueExpr: "ID",
displayExpr: "Subject"
});
});
<head>
<!-- ... -->
<script type="text/javascript" src="data.js"></script>
</head>
const employeesTasks = [
{
ID: 1,
Assignee: "Mr. John Heart",
Subject: "Choose between PPO and HMO Health Plan",
disabled: true
}, {
ID: 2,
Assignee: "Mr. John Heart",
Subject: "Google AdWords Strategy"
}, {
ID: 3,
Assignee: "Mr. John Heart",
Subject: "New Brochures"
}, {
ID: 4,
Assignee: "Mr. John Heart",
Subject: "Update NDA Agreement"
}, {
ID: 5,
Assignee: "Mr. John Heart",
Subject: "Review Product Recall Report by Engineering Team"
}, {
ID: 6,
Assignee: "Mrs. Olivia Peyton",
Subject: "Update Personnel Files"
}, {
ID: 7,
Assignee: "Mrs. Olivia Peyton",
Subject: "Review Health Insurance Options Under the Affordable Care Act"
}, {
ID: 8,
Assignee: "Mrs. Olivia Peyton",
Subject: "Non-Compete Agreements"
}, {
ID: 9,
Assignee: "Mrs. Olivia Peyton",
Subject: "Give Final Approval for Refunds"
}, {
ID: 10,
Assignee: "Mr. Robert Reagan",
Subject: "Deliver R&D Plans for 2013"
}, {
ID: 11,
Assignee: "Mr. Robert Reagan",
Subject: "Decide on Mobile Devices to Use in the Field"
}, {
ID: 12,
Assignee: "Mr. Robert Reagan",
Subject: "Try New Touch-Enabled WinForms Apps"
}, {
ID: 13,
Assignee: "Mr. Robert Reagan",
Subject: "Approval on Converting to New HDMI Specification"
}, {
ID: 14,
Assignee: "Ms. Greta Sims",
Subject: "Approve Hiring of John Jeffers"
}, {
ID: 15,
Assignee: "Ms. Greta Sims",
Subject: "Update Employee Files with New NDA"
}, {
ID: 16,
Assignee: "Ms. Greta Sims",
Subject: "Provide New Health Insurance Docs"
}
]; Angular
<dx-lookup
[dataSource]="dataSource"
valueExpr="ID"
displayExpr="Subject">
</dx-lookup>
import { Component } from '@angular/core';
import { AppService, Task } from './app.service';
import DataSource from 'devextreme/data/data_source';
// ...
export class AppComponent {
employeesTasks: Task[];
dataSource: DataSource;
constructor(service: AppService) {
this.employeesTasks = service.getTasks();
this.dataSource = new DataSource({
store: this.employeesTasks,
key: "ID"
});
}
}
import { Injectable } from '@angular/core';
export class Task {
ID: number;
Assignee: string;
Subject: string;
disabled?: boolean;
}
const employeesTasks: Task[] = [
{
ID: 1,
Assignee: "Mr. John Heart",
Subject: "Choose between PPO and HMO Health Plan",
disabled: true
}, {
ID: 2,
Assignee: "Mr. John Heart",
Subject: "Google AdWords Strategy"
}, {
ID: 3,
Assignee: "Mr. John Heart",
Subject: "New Brochures"
}, {
ID: 4,
Assignee: "Mr. John Heart",
Subject: "Update NDA Agreement"
}, {
ID: 5,
Assignee: "Mr. John Heart",
Subject: "Review Product Recall Report by Engineering Team"
}, {
ID: 6,
Assignee: "Mrs. Olivia Peyton",
Subject: "Update Personnel Files"
}, {
ID: 7,
Assignee: "Mrs. Olivia Peyton",
Subject: "Review Health Insurance Options Under the Affordable Care Act"
}, {
ID: 8,
Assignee: "Mrs. Olivia Peyton",
Subject: "Non-Compete Agreements"
}, {
ID: 9,
Assignee: "Mrs. Olivia Peyton",
Subject: "Give Final Approval for Refunds"
}, {
ID: 10,
Assignee: "Mr. Robert Reagan",
Subject: "Deliver R&D Plans for 2013"
}, {
ID: 11,
Assignee: "Mr. Robert Reagan",
Subject: "Decide on Mobile Devices to Use in the Field"
}, {
ID: 12,
Assignee: "Mr. Robert Reagan",
Subject: "Try New Touch-Enabled WinForms Apps"
}, {
ID: 13,
Assignee: "Mr. Robert Reagan",
Subject: "Approval on Converting to New HDMI Specification"
}, {
ID: 14,
Assignee: "Ms. Greta Sims",
Subject: "Approve Hiring of John Jeffers"
}, {
ID: 15,
Assignee: "Ms. Greta Sims",
Subject: "Update Employee Files with New NDA"
}, {
ID: 16,
Assignee: "Ms. Greta Sims",
Subject: "Provide New Health Insurance Docs"
}
];
@Injectable()
export class AppService {
getTasks(): Task[] {
return employeesTasks;
}
} Vue
<template>
<DxLookup
:data-source="dataSource"
value-expr="ID"
display-expr="Subject"
/>
</template>
<script>
// ...
import DataSource from 'devextreme/data/data_source';
import { employeesTasks } from './data';
const dataSource = new DataSource({
store: employeesTasks,
key: "ID"
});
export default {
components: {
DxLookup
},
data() {
return {
dataSource
}
}
}
</script>
export const employeesTasks = [
{
ID: 1,
Assignee: "Mr. John Heart",
Subject: "Choose between PPO and HMO Health Plan",
disabled: true
}, {
ID: 2,
Assignee: "Mr. John Heart",
Subject: "Google AdWords Strategy"
}, {
ID: 3,
Assignee: "Mr. John Heart",
Subject: "New Brochures"
}, {
ID: 4,
Assignee: "Mr. John Heart",
Subject: "Update NDA Agreement"
}, {
ID: 5,
Assignee: "Mr. John Heart",
Subject: "Review Product Recall Report by Engineering Team"
}, {
ID: 6,
Assignee: "Mrs. Olivia Peyton",
Subject: "Update Personnel Files"
}, {
ID: 7,
Assignee: "Mrs. Olivia Peyton",
Subject: "Review Health Insurance Options Under the Affordable Care Act"
}, {
ID: 8,
Assignee: "Mrs. Olivia Peyton",
Subject: "Non-Compete Agreements"
}, {
ID: 9,
Assignee: "Mrs. Olivia Peyton",
Subject: "Give Final Approval for Refunds"
}, {
ID: 10,
Assignee: "Mr. Robert Reagan",
Subject: "Deliver R&D Plans for 2013"
}, {
ID: 11,
Assignee: "Mr. Robert Reagan",
Subject: "Decide on Mobile Devices to Use in the Field"
}, {
ID: 12,
Assignee: "Mr. Robert Reagan",
Subject: "Try New Touch-Enabled WinForms Apps"
}, {
ID: 13,
Assignee: "Mr. Robert Reagan",
Subject: "Approval on Converting to New HDMI Specification"
}, {
ID: 14,
Assignee: "Ms. Greta Sims",
Subject: "Approve Hiring of John Jeffers"
}, {
ID: 15,
Assignee: "Ms. Greta Sims",
Subject: "Update Employee Files with New NDA"
}, {
ID: 16,
Assignee: "Ms. Greta Sims",
Subject: "Provide New Health Insurance Docs"
}
]; React
// ...
import DataSource from 'devextreme/data/data_source';
import { employeesTasks } from './data';
const dataSource = new DataSource({
store: employeesTasks,
key: "ID"
});
function App() {
return (
<Lookup
dataSource={dataSource}
valueExpr="ID"
displayExpr="Subject"
/>
);
}
export default App;
export const employeesTasks = [
{
ID: 1,
Assignee: "Mr. John Heart",
Subject: "Choose between PPO and HMO Health Plan",
disabled: true
}, {
ID: 2,
Assignee: "Mr. John Heart",
Subject: "Google AdWords Strategy"
}, {
ID: 3,
Assignee: "Mr. John Heart",
Subject: "New Brochures"
}, {
ID: 4,
Assignee: "Mr. John Heart",
Subject: "Update NDA Agreement"
}, {
ID: 5,
Assignee: "Mr. John Heart",
Subject: "Review Product Recall Report by Engineering Team"
}, {
ID: 6,
Assignee: "Mrs. Olivia Peyton",
Subject: "Update Personnel Files"
}, {
ID: 7,
Assignee: "Mrs. Olivia Peyton",
Subject: "Review Health Insurance Options Under the Affordable Care Act"
}, {
ID: 8,
Assignee: "Mrs. Olivia Peyton",
Subject: "Non-Compete Agreements"
}, {
ID: 9,
Assignee: "Mrs. Olivia Peyton",
Subject: "Give Final Approval for Refunds"
}, {
ID: 10,
Assignee: "Mr. Robert Reagan",
Subject: "Deliver R&D Plans for 2013"
}, {
ID: 11,
Assignee: "Mr. Robert Reagan",
Subject: "Decide on Mobile Devices to Use in the Field"
}, {
ID: 12,
Assignee: "Mr. Robert Reagan",
Subject: "Try New Touch-Enabled WinForms Apps"
}, {
ID: 13,
Assignee: "Mr. Robert Reagan",
Subject: "Approval on Converting to New HDMI Specification"
}, {
ID: 14,
Assignee: "Ms. Greta Sims",
Subject: "Approve Hiring of John Jeffers"
}, {
ID: 15,
Assignee: "Ms. Greta Sims",
Subject: "Update Employee Files with New NDA"
}, {
ID: 16,
Assignee: "Ms. Greta Sims",
Subject: "Provide New Health Insurance Docs"
}
];
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4