Lookup

A widget that allows a user to select predefined values from a lookup window.

Type: Object

The dxLookup widget allows users to select predefined values from a lookup window. The widget takes a list of predefined objects, and allows you to specify the property names of those objects - the values of which can be selected by users. You can optionally specify another property whose values will serve as display captions.

The available lookup items are loaded from an array specified via the dataSource configuration option. You can specify a simple array or the array of objects as the widget data source to display the available objects in a single list.

JavaScript
var employees = [
    { id:1, name: "Bob", hired: 2005 },
    { id:2, name: "John", hired: 2007 },
    { id:3, name: "Frank", hired: 2001 },
    { id:4, name: "Robert", hired: 2007 },
    { id:5, name: "Paul", hired: 2011 },
    { id:6, name: "Elizabeth", hired: 2000 },
    { id:7, name: "Mary", hired: 2002 },
    { id:8, name: "Michael", hired: 2003 },
    { id:9, name: "George", hired: 2002 },
    { id:10, name: "Deborah", hired: 2000 },
    { id:11, name: "Lisa", hired: 1999 },
    { id:12, name: "Mark", hired: 2011 }
];

Assign the "name" value to the displayExpr configuration option to enable a user to select the required object by the value of the name field. Assign "this" to the valueExpr option in order for the widget to return the entire selected object from the value option.

To create the dxLookup widget, add a div element with dxLookup Knockout binding within the body of the required view.

HTML
<div data-bind="dxLookup:{dataSource: employees, displayExpr: 'name', valueExpr: 'id'}"></div>

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery

Configuration

An object defining configuration options for the dxLookup widget.

Methods

This section describes members used to manipulate the object.