Hi Team,
In the ListView widget one can customize the item rendered, and alternate the styles based on the item index. The index is not exposed for the ListBox Item. Was this by design, if so Why? And how do I alternate styles for ListBox items then?
Thanks,
Grant
PS. "ListBox" is not accepted as a tag for this question
1 Answer, 1 is accepted
Hello Grant,
Thank you for reaching out to us.
You are correct that there is no index exposed to the custom item of the ListBox, but you can manually add index to the dataItem when passing the items to the ListBox and then use it within the custom item rendering:
<ListBox
data={state.notDiscontinued.map((item, index) => {
return { ...item, index: index };
})}const MyCustomItem = (props) => {
let { dataItem, selected, ...others } = props;
return (
<li
{...others}
className={dataItem.index % 2 == 0 ? '' : 'alt-listbox-item'}
>Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.