JavaScript/jQuery Lookup - Customize Item Appearance

For a minor customization of Lookup items, you can define specific fields in item data objects. For example, the following code generates three items: the first is not customized, the second is disabled and the third is hidden.

JavaScript
  • $(function() {
  • $("#lookupContainer").dxLookup({
  • valueExpr: 'text',
  • displayExpr: 'text',
  • dataSource: [
  • { text: "HD Video Player" },
  • { text: "SuperHD Video Player", disabled: true },
  • { text: "SuperPlasma 50", visible: false }
  • ]
  • });
  • });

If you need a more flexible solution, define an itemTemplate.

JavaScript
  • const lookupData = [{
  • id: 1,
  • name: "HD Video Player",
  • imgSrc: "images/products/1-small.png"
  • }, {
  • id: 2,
  • name: "UltraHD Player",
  • imgSrc: "images/products/2-small.png"
  • },
  • // ...
  • ];
  •  
  • $(function() {
  • $("#lookupContainer").dxLookup({
  • dataSource: lookupData,
  • valueExpr: 'id',
  • displayExpr: 'name',
  • itemTemplate: function (itemData, itemIndex, itemElement) {
  • return $("<div />").append(
  • $("<img />").attr("src", itemData.imgSrc),
  • $("<p />").text(itemData.name)
  • .css("display", "inline-block")
  • .css("font-style", (itemIndex % 2 == 0) ? "italic" : "normal")
  • );
  • }
  • });
  • });

You can also customize an individual Lookup item. For this purpose, declare a template for this item as a script and pass its id to the template field.

HTML
JavaScript
  • <script id="individualTemplate" type="text/html">
  • <!-- ... -->
  • </script>
  • const lookupData = [
  • { text: "SuperHD Player"},
  • { text: "HD Video Player", template: $("#individualTemplate") },
  • // ...
  • ];

Using similar techniques, you can customize the input field of the Lookup. The template for it should be assigned to the fieldTemplate property.

JavaScript
  • $(function() {
  • $("#lookupContainer").dxLookup({
  • dataSource: lookupData,
  • valueExpr: 'id',
  • displayExpr: 'name',
  • fieldTemplate: function(itemData, itemElement) {
  • return $("<div />").append(
  • $("<img />").attr("src", itemData.imgSrc)
  • );
  • }
  • });
  • });

View Demo

See Also