New to KendoReact? Start a free 30-day trial

ListViewProps

Interface

Represents the props of the KendoReact ListView component.

Definition

Package:@progress/kendo-react-listview

Properties

className?

string

Sets a class of the ListView DOM element.

Example:

jsx

<ListView className="custom-class" />

data?

any[]

Sets the data of the ListView.

Example:

jsx

<ListView data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />

ComponentType<any>

Defines the component that renders for the ListView footer.

Example:

jsx

const CustomFooter = (props) => <div>Custom Footer</div>;

<ListView footer={CustomFooter} />

ComponentType<any>

Defines the component that renders for the ListView header.

Example:

jsx

const CustomHeader = (props) => <div>Custom Header</div>;

<ListView header={CustomHeader} />

item?

ComponentType<ListViewItemProps>

Defines the component that renders for each item of the data collection.

Example:

jsx

const CustomItem = (props) => <div>{props.text}</div>;

<ListView item={CustomItem} />

navigatable?

boolean

If set to true, the user can use dedicated shortcuts to interact with the ListView. By default, navigation is disabled.

Default:

false

Example:

jsx

<ListView navigatable={true} />

onScroll?

(event: ListViewEvent) => void

Fires when the ListView has been scrolled.

Parameters:eventListViewEvent

Example:

jsx

<ListView onScroll={(event) => console.log(event)} />

style?

CSSProperties

Sets styles to the ListView container.

Example:

jsx

<ListView style={{ height: '400px' }} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.

ListViewProps

Definition

Properties

className?

data?

footer?

header?

item?

navigatable?

onScroll?

style?

webMcp?