Vue 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.
jQuery
$(function() { $("#lookupContainer").dxLookup({ valueExpr: 'text', displayExpr: 'text', dataSource: [ { text: "HD Video Player" }, { text: "SuperHD Video Player", disabled: true }, { text: "SuperPlasma 50", visible: false } ] }); });
Angular
<dx-lookup [dataSource]="lookupDataSource" valueExpr="text" displayExpr="text"> </dx-lookup>
import { DxLookupModule } from "devextreme-angular"; // ... export class AppComponent { lookupDataSource = [ { text: "HD Video Player" }, { text: "SuperHD Video Player", disabled: true }, { text: "SuperPlasma 50", visible: false } ]; } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup :data-source="dataSource" value-expr="text" display-expr="text" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; export default { components: { DxLookup }, data() { return { dataSource: [ { text: 'HD Video Player' }, { text: 'SuperHD Video Player', disabled: true }, { text: 'SuperPlasma 50', visible: false } ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; const dataSource = [ { text: 'HD Video Player' }, { text: 'SuperHD Video Player', disabled: true }, { text: 'SuperPlasma 50', visible: false } ]; class App extends React.Component { render() { return ( <Lookup dataSource={dataSource} valueExpr="text" displayExpr="text" /> ); } } export default App;
If you need a more flexible solution, define an itemTemplate.
jQuery
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") ); } }); });
Angular
<dx-lookup [dataSource]="lookupDataSource" valueExpr="id" itemTemplate="lookupItem"> <div *dxTemplate="let item of 'lookupItem'; let i = index"> <img src="{{item.imgSrc}}"/> <div style="display:inline-block" [style.font-style]="i % 2 == 0 ? 'italic' : 'normal'"> {{item.name}} </div> </div> </dx-lookup>
import { DxLookupModule } from "devextreme-angular"; // ... export class AppComponent { lookupDataSource = [{ id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" }, { id: 2, name: "UltraHD Player", imgSrc: "images/products/2-small.png" }, // ... ]; } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup :data-source="dataSource" value-expr="id" item-template="item"> <template #item="{ data, index }"> <div> <img :src="data.imgSrc"/> <div :style="{'display': 'inline-block', 'font-style': index % 2 === 0 ? 'italic' : 'normal'}"> {{data.name}} </div> </div> </template> </DxLookup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; export default { components: { DxLookup }, data() { return { dataSource: [{ id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" }, { id: 2, name: "UltraHD Player", imgSrc: "images/products/2-small.png" }, // ... ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; const dataSource = [{ id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" }, { id: 2, name: "UltraHD Player", imgSrc: "images/products/2-small.png" }, // ... ]; const renderItem = (data, index) => { return ( <div> <img src={data.imgSrc}/> <div style={{display: 'inline-block', fontStyle: index % 2 === 0 ? 'italic' : 'normal'}}> {data.name} </div> </div> ); }; class App extends React.Component { render() { return ( <Lookup dataSource={dataSource} valueExpr="id" itemRender={renderItem} /> ); } } export default App;
jQuery
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.
<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.
jQuery
$(function() { $("#lookupContainer").dxLookup({ dataSource: lookupData, valueExpr: 'id', displayExpr: 'name', fieldTemplate: function(itemData, itemElement) { return $("<div />").append( $("<img />").attr("src", itemData.imgSrc) ); } }); });
Angular
<dx-lookup [dataSource]="lookupDataSource" valueExpr="id" displayExpr="name" fieldTemplate="inputField"> <div *dxTemplate="let item of 'inputField'"> <img src="{{item.imgSrc}}" /> </div> </dx-lookup>
import { DxLookupModule } from "devextreme-angular"; // ... export class AppComponent { lookupDataSource = [{ id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" }, { id: 2, name: "UltraHD Player", imgSrc: "images/products/2-small.png" }, // ... ]; } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup :data-source="dataSource" value-expr="id" display-expr="name" field-template="fieldInput"> <template #fieldInput="{ data }"> <img :src="data && data.imgSrc"/> </template> </DxLookup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; export default { components: { DxLookup }, data() { return { dataSource: [{ id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" }, { id: 2, name: "UltraHD Player", imgSrc: "images/products/2-small.png" }, // ... ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; const dataSource = [{ id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" }, { id: 2, name: "UltraHD Player", imgSrc: "images/products/2-small.png" }, // ... ]; const renderField = (data) => { return ( <img src={data && data.imgSrc}/> ); }; class App extends React.Component { render() { return ( <Lookup dataSource={dataSource} valueExpr="id" displayExpr="name" fieldRender={renderField} /> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.