Lookups


Usage

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.

Place data-lookup='dsUsers' inside an element to create a lookup listing records from 'dsUsers'.

Use 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.

Data bound lookup

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.

Artists ID's:

Genres Lookup: Artists ID = Genre ID here:

Unbound lookup

You need to use data-display attribute to indicate which lookup field value should be set to element on which lookup is defined.

Columns in lookup can be resizable only if you will use data-columns attribute.
-

Attributes

  • data-lookup="dsArtists0" - points to data object of lookup list
  • data-columns="ID:50px:Title:Funtion,Name:250px" - set field, width, title and function for lookup columns. Field and width are re queried fields. If function is defined, it will fire for each created column record. The current dataobject row is passed as parameter, current element can be accessed with this keyword.
    Example with functions

                            
    <input type="text" class="form-control" 
    	data-lookup="dsLookup" 
    	data-field="Name" 
    	data-columns="Name:200px:NameCaption:MyFunction,Surname:200px:MyFunction2"
    	data-value-bindings="Name=Name">
                            
    function MyFunction(pRow){
        this.setAttribute("title", "Full Name: " + pRow.Name + " " + pRow.Surname)
    }
    
    function MyFunction2(pRow){
        this.setAttribute("title", "Person Name: " + pRow.Surname)
    }
                    

  • 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-display is not defined, and value-bindings is 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-display property value will be used.
  • data-lookup-search='false' - hide the search box.
  • data-limit-to-list='true' -default value 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.
    • Position - default bottom, top can be used as well, to add buttons to the top of lookup.
    • AutoClose - default true, will close lookup after button is pressed.
    • ButtonCss - default 'btn-secondary' will add custom class.
  • data-autocomplete - default 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-list needs 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.
  • data-show-column - will show column title.
  • data-lookup-help-text="Some text" - will show notification with passed text on top of lookup.
  • data-onshow="someFnc" - will fire before lookup is shown on the screen. Will return current lookup instance and element.

Events

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.

Related articles