React Markup Components Item
import { UiWidgetTypes } from "devextreme-react/ui.widget"
Type:
UiWidgetTypes.dxItem
The dxItem component defines custom markup for items in layout and collection UI components. dxItem has different properties depending on the UI component where it is used. For a full list of them, see the items property description in a specific UI component's API Reference.
jQuery
HTML
JavaScript
<div id="list"> <div data-options="dxItem: { text: 'Apples', disabled: true }"></div> <div data-options="dxItem: { text: 'Lemons', visible: false }"></div> <div data-options="dxItem: { }"> <!-- Custom markup --> </div> </div>
$(function() { $("#list").dxList({/* ... */}); });
Angular
app.component.html
app.module.ts
<dx-list> <dxi-item text="Apples" [disabled]="true"></dxi-item> <dxi-item text="Lemons" [visible]="false"></dxi-item> <dxi-item> <!-- Custom markup --> </dxi-item> <dxi-item> <!-- A nested component should be wrapped in an element with a parameterless dxTemplate directive --> <div *dxTemplate> <dx-button text="I am a nested component"></dx-button> </div> </dxi-item> </dx-list>
import { DxListModule } from "devextreme-angular"; // ... @NgModule({ imports: [ // ... DxListModule ], // ... }) export class AppModule { }
React
App.js
import React from 'react'; import List, { Item } from 'devextreme-react/list'; class App extends React.Component { render() { return ( <List> <Item text="Apples" disabled={true} /> <Item text="Oranges" visible={false} /> <Item> <!-- Custom markup --> </Item> </List> ); } } export default App;
NOTE
dxItem elements are ignored when the dataSource property is defined.
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.