[3.6.0] OnItemRender event documentation (#1137)

* docs(autocomplete): OnItemRender docs * docs(dropdownlist): OnItemRender event docs * docs(multiselect): OnItemRender event docs * docs(combobox): OnItemRender event docs * Update components/autocomplete/events.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(selects): implement the suggested improvements Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Author: svdimitr

components/autocomplete/events.md

@@ -15,6 +15,7 @@ This article explains the events available in the Telerik AutoComplete for Blazo
 * [ValueChanged](#valuechanged)
 * [OnChange](#onchange)
 * [OnRead](#onread)
+* [OnItemRender](#onitemrender)
 * [OnBlur](#onblur)
 
 ## ValueChanged
@@ -227,6 +228,63 @@ When using `OnRead`, make sure to set `TItem` and `TValue`.
 }
 ````
 
+## OnItemRender
+
+The `OnItemRender` event fires when each item in the AutoComplete dropdown renders.
+
+The event handler receives as an argument an `AutoCompleteItemRenderEventArgs<TItem>` object that contains:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Property | Description |
+| --- | --- |
+| `Item` | The current item that renders in the AutoComplete. |
+| `Class` | The custom CSS class that will be added to the item. |
+
+````CSHTML
+@* Customize an item in the AutoComplete *@
+
+<style>
+ .customized-item{
+ font-weight:bold;
+ color: white;
+ background-color: blue;
+ }
+</style>
+
+<TelerikAutoComplete Data="@Suggestions"
+ OnItemRender="@OnItemRenderHandler"
+ ValueField="@(nameof(SuggestionsModel.Suggestion))"
+ @bind-Value="@AutoCompleteValue" />
+
+@code {
+ private string AutoCompleteValue { get; set; }
+
+ private void OnItemRenderHandler(AutoCompleteItemRenderEventArgs<SuggestionsModel> args)
+ {
+ SuggestionsModel currentItem = args.Item;
+
+ if (currentItem.Suggestion == "second" && currentItem.UniqueIdentifier == 2)
+ {
+ args.Class = "customized-item";
+ }
+ }
+
+ List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
+ {
+ new SuggestionsModel { Suggestion = "first", UniqueIdentifier = 1 },
+ new SuggestionsModel { Suggestion = "second", UniqueIdentifier = 2 },
+ new SuggestionsModel { Suggestion = "third", UniqueIdentifier = 3 }
+ };
+
+ public class SuggestionsModel
+ {
+ public string Suggestion { get; set; }
+ public int UniqueIdentifier { get; set; }
+ }
+}
+````
+
 ## OnBlur
 
 The `OnBlur` event fires when the component loses focus.
@@ -251,7 +309,6 @@ The `OnBlur` event fires when the component loses focus.
 }
 ````
 
-
 ## See Also
 
 * [ValueChanged and Validation]({%slug value-changed-validation-model%})

components/combobox/events.md

@@ -15,6 +15,7 @@ This article explains the events available in the Telerik ComboBox for Blazor:
 * [ValueChanged](#valuechanged)
 * [OnChange](#onchange)
 * [OnRead](#onread)
+* [OnItemRender](#onitemrender)
 * [OnBlur](#onblur)
 
 ## ValueChanged
@@ -300,6 +301,59 @@ When using `OnRead`, make sure to set `TItem` and `TValue`.
 }
 ````
 
+## OnItemRender
+
+The `OnItemRender` event fires when each item in the ComboBox dropdown renders.
+
+The event handler receives as an argument an `ComboBoxItemRenderEventArgs<TItem>` object that contains:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Property | Description |
+| --- | --- |
+| `Item` | The current item that renders in the ComboBox. |
+| `Class` | The custom CSS class that will be added to the item. |
+
+````CSHTML
+@* Customize an item in the ComboBox *@
+
+<style>
+ .customized-item {
+ font-weight:bold;
+ color: white;
+ background-color: blue;
+ }
+</style>
+
+<TelerikComboBox Data="@ComboBoxData"
+ OnItemRender="@OnItemRenderHandler"
+ TextField="ItemText"
+ ValueField="ItemId"
+ @bind-Value="ComboBoxValue">
+</TelerikComboBox>
+
+@code {
+ private int ComboBoxValue { get; set; }
+
+ public void OnItemRenderHandler(ComboBoxItemRenderEventArgs<ItemDescriptor> args)
+ {
+ ItemDescriptor currentItem = args.Item;
+
+ if (currentItem.ItemText == "item 2" && currentItem.ItemId == 2)
+ {
+ args.Class = "customized-item";
+ }
+ }
+
+ private IEnumerable<ItemDescriptor> ComboBoxData = Enumerable.Range(1, 20).Select(x => new ItemDescriptor { ItemText = "item " + x, ItemId = x });
+
+ public class ItemDescriptor
+ {
+ public int ItemId { get; set; }
+ public string ItemText { get; set; }
+ }
+}
+````
 
 ## OnBlur
 

components/dropdownlist/events.md

@@ -15,6 +15,7 @@ This article explains the events available in the Telerik DropDownList for Blazo
 * [OnChange](#onchange)
 * [ValueChanged](#valuechanged)
 * [OnRead](#onread)
+* [OnItemRender](#onitemrender)
 * [OnBlur](#onblur)
 
 The examples in this article use `string` values and simple data sources for brevity. You can use full models, see the [data binding]({%slug components/dropdownlist/databind%}) article for more details.
@@ -225,6 +226,59 @@ You can also call remote data through `async` operations.
 }
 ````
 
+## OnItemRender
+
+The `OnItemRender` event fires when each item in the DropDownList popup renders.
+
+The event handler receives as an argument an `DropDownListItemRenderEventArgs<TItem>` object that contains:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Property | Description |
+| --- | --- |
+| `Item` | The current item that renders in the DropDownList. |
+| `Class` | The custom CSS class that will be added to the item. |
+
+````CSHTML
+@* Customize an item in the DropDownList *@
+
+<style>
+ .customized-item {
+ font-weight:bold;
+ color: white;
+ background-color: blue;
+ }
+</style>
+
+<TelerikDropDownList Data="@DropDownListData"
+ OnItemRender="@OnItemRenderHandler"
+ TextField="ItemText"
+ ValueField="ItemId"
+ @bind-Value="DropDownListValue">
+</TelerikDropDownList>
+
+@code {
+ private int DropDownListValue { get; set; }
+
+ private void OnItemRenderHandler(DropDownListItemRenderEventArgs<ItemDescriptor> args)
+ {
+ ItemDescriptor currentItem = args.Item;
+
+ if (currentItem.ItemText == "item 4" && currentItem.ItemId == 4)
+ {
+ args.Class = "customized-item";
+ }
+ }
+
+ private IEnumerable<ItemDescriptor> DropDownListData = Enumerable.Range(1, 20).Select(x => new ItemDescriptor { ItemText = "item " + x, ItemId = x });
+
+ public class ItemDescriptor
+ {
+ public int ItemId { get; set; }
+ public string ItemText { get; set; }
+ }
+}
+````
 
 ## OnBlur
 

components/multiselect/events.md

@@ -14,6 +14,7 @@ This article explains the events available in the Telerik MultiSelect for Blazor
 
 * [ValueChanged](#valuechanged)
 * [OnChange](#onchange)
+* [OnItemRender](#OnItemRender)
 * [OnRead](#onread)
 * [OnBlur](#onblur)
 
@@ -218,6 +219,64 @@ You can also call remote data through async operations.
 }
 ````
 
+## OnItemRender
+
+The `OnItemRender` event fires when each item in the MultiSelect dropdown renders. 
+
+The event handler receives as an argument an `MultiSelectItemRenderEventArgs<TItem>` object that contains:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Property | Description |
+| --- | --- |
+| `Item` | The current item that renders in the MultiSelect. |
+| `Class` | The custom CSS class that will be added to the item. |
+
+````CSHTML
+@* Customize an item in the MultiSelect *@
+
+<style>
+ .customized-item {
+ font-weight:bold;
+ color: white;
+ background-color: blue;
+ }
+</style>
+
+<TelerikMultiSelect Data="@Options"
+ OnItemRender="@OnItemRenderHandler"
+ @bind-Value="@MultiSelectValues"
+ TextField="StringRepresentation"
+ ValueField="UniqueIdentifier" />
+
+@code {
+ private List<int> MultiSelectValues { get; set; }
+
+ private void OnItemRenderHandler(MultiSelectItemRenderEventArgs<OptionsModel> args)
+ {
+ OptionsModel currentItem = args.Item;
+
+ if (currentItem.StringRepresentation == "third" && currentItem.UniqueIdentifier == 3)
+ {
+ args.Class = "customized-item";
+ }
+ }
+
+ private List<OptionsModel> Options { get; set; } = new List<OptionsModel>
+ {
+ new OptionsModel { StringRepresentation = "first", UniqueIdentifier = 1 },
+ new OptionsModel { StringRepresentation = "second", UniqueIdentifier = 2 },
+ new OptionsModel { StringRepresentation = "third", UniqueIdentifier = 3 }
+ };
+
+ public class OptionsModel
+ {
+ public string StringRepresentation { get; set; }
+ public int UniqueIdentifier { get; set; } 
+ }
+}
+````
+
 ## OnBlur
 
 The `OnBlur` event fires when the component loses focus.