Skip to content

Commit aae7a7b

Browse files
svdimitrjivanova
authored andcommitted
docs(mc-combo): add row template
1 parent 1cc5df3 commit aae7a7b

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

components/multicolumncombobox/templates.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ List of the available templates:
2424
| --- | --- |
2525
| [`Header`](#header) | Controls the rendering of the element above the list of items in the dropdown. |
2626
| [`Footer`](#footer) | Controls the rendering of the element below the list of items in the dropdown. |
27+
| [`Row`](#row) | Controls the rendering of the entire row in the dropdown. |
2728

2829
>note To customize the rendering of the items in dropdown you can use the [Column Template]({%multicolumncombobob-templates%}#template).
2930
@@ -105,6 +106,54 @@ The footer is content that you can place below the list of items inside the drop
105106
}
106107
````
107108

109+
## Row
110+
111+
The `RowTemplate` allows you to control the rendering of each row in the dropdown. You can access the `context` object and cast it to the bound model to employ some custom business logic. The `contenxt` represents the current data item for the row.
112+
113+
>caption Use the RowTemplate to custome the rendering of the rows in the dropdown
114+
115+
````CSHTML
116+
<TelerikMultiColumnComboBox Data="@MultiComboData"
117+
@bind-Value="@BoundValue"
118+
ValueField="@nameof(SampleData.Id)"
119+
TextField="@nameof(SampleData.Name)"
120+
Width="300px">
121+
122+
<RowTemplate Context="currentRow">
123+
@{
124+
<td>
125+
<strong>@currentRow.Id</strong>
126+
</td>
127+
<td>
128+
<span style="font-style:italic">@currentRow.Name</span>
129+
</td>
130+
}
131+
</RowTemplate>
132+
<MultiColumnComboBoxColumns>
133+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)">
134+
</MultiColumnComboBoxColumn>
135+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)">
136+
</MultiColumnComboBoxColumn>
137+
</MultiColumnComboBoxColumns>
138+
</TelerikMultiColumnComboBox>
139+
140+
@code {
141+
public int BoundValue { get; set; }
142+
143+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
144+
{
145+
Id = x,
146+
Name = "Name " + x
147+
}).ToList();
148+
149+
public class SampleData
150+
{
151+
public int Id { get; set; }
152+
public string Name { get; set; }
153+
}
154+
}
155+
````
156+
108157
## See Also
109158

110159
* [Live Demo: MultiColumnComboBox Templates](https://demos.telerik.com/blazor-ui/multicolumncombobox/templates)

0 commit comments

Comments
 (0)