New to KendoReact? Start a free 30-day trial
Custom Rendering
The AutoComplete provides options for customizing the way it renders its elements.
The AutoComplete utilizes custom renderers which enable you to moderate the content of its:
Items
To customize the content of each suggestion list item, use the itemRender prop.
The following example demonstrates how to set the itemRender prop of the AutoComplete and customize the list elements.
Change Theme
Theme
Loading ...
Values
To customize the element content that holds the selected text, use the valueRender prop.
Change Theme
Theme
Loading ...
Headers and Footers
To set a header or a footer element in the items popup of the AutoComplete, use the header and footer props.
Change Theme
Theme
Loading ...
No Data
To customize the content of the suggestion list when no data is present, use the listNoDataRender prop.
Change Theme
Theme
Loading ...