Lookup can be used as advanced
select list for your field. It can be used when need to change current row fields or used within list. It can be searchable, have custom buttons, have different sized columns and callback after row selection.
To begin using you must create appropriate data source, from where values will be fetched and use it in an element.
data-lookup='dsUsers' inside an element to create a lookup listing records from 'dsUsers'.
data-columns="ID:50px:customtitle,Name:250px" sets what columns to show in the lookup.
On mobile device with low screen width lookup will take all screen and will show
data-lookup-title attributes value. Also you can use
data-columns-m attribute to define different columns and sizes.
Usually such lookup will be inside data-object-id and will provide select list for data-field.
It needs to have value binding attribute:
data-value-bindings='TargetFieldName=LookupFieldName,Person_ID=ID,Name=FullName', where target field name is target data object field, which value is changed and lookup field name, which will be set after selection.
You need to use
data-display attribute to indicate which lookup field value should be set to element on which lookup is defined.
data-lookup="dsArtists0"- points to data object of lookup list
data-columns="ID:50px:Title,Name:250px"- set field, width and title for lookup columns. Field and width are re queried fields.
data-columns-m="ID:50px:Title,Name:250px"- set field, width and title for mobile lookup columns. Field and width are re queried fields.
data-value-bindings="ArtistID=ID,Artist=Name"- set values when user make selection.
data-lookup-width='400px'- set width of lookup (will default to sum of column widths).
data-display="Name"- field value which will be inserted into element. If
data-displayis not defined, and
value-bindingsis present then it will use
data-field. Otherwise it will use lookup data object first field value.
data-lookup-title- value is used on mobile devices. If not defined, then
data-displayproperty value will be used.
data-lookup-search='false'- hide the search box.
true. Entered value which is not from the lookup list, will be marked in red. If lookup is not in grid, user will not be allowed to set other value than from the list. To force that value only can be picked from lookup, autocomplete needs to be disabled.
data-lookup-clear='false'- hide clear button.
data-callback="someFnc"- will fire after item in lookup is selected. It will return selected row as a parameter.
data-lookup-command="Buttontext|buttontitle:GlobalFunction:Position:AutoClose:ButtonCss"- will add additional buttons to lookup. Title and Global Function are required. Additional buttons can be added with comma.
true. Sets autocomplete mode (only active on screens wider than 750px). In this mode, users can type or paste text in the input element and this will filter the search results. For it to work
data-limit-to-listneeds to be enabled.
data-lookup-hide-showmore- hide the show-more/show-less options.
data-translate- will translate lookup contents. If used, searching will be disabled, due to this is only client side translation and searching would not work.
data-column-move="false"- will disable column moving for user.
data-lookup-positionright- will position right instead of left to an element.
When creating lookup manually, you can attach event to lookup instance:
onClosed- will fire after lookup is closed.
onOpen- will fire after lookup is opened.
onSelected- will fire when row was selected by the user.
onCleared- will fire when value from lookup was cleared.