DevExtreme Angular - 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.
- <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
- ],
- // ...
- })
If you need a more flexible solution, define an itemTemplate. In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
- <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
- ],
- // ...
- })
If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the itemTemplate callback function as shown in the following code.
- 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.
- <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 option.
- <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
- ],
- // ...
- })
In addition, you can use a 3rd-party template engine to perform the needed customizations. For more information, see the 3rd-Party Template Engines article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.