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

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

  • 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;

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

  • 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;

View Demo

See Also