Skip to content

Commit 1cc5df3

Browse files
svdimitrjivanova
svdimitr
authored and
jivanova
committed
docs(mc-combo): columns and templates article
1 parent 084f5f0 commit 1cc5df3

File tree

3 files changed

+228
-1
lines changed

3 files changed

+228
-1
lines changed

‎components/multicolumncombobox/columns/overview.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
title: Bound Column
3+
page_title: MultiColumnComboBox Bound Column
4+
description: Data binding and bound column properties in MultiColumnComboBox for Blazor.
5+
slug: multicolumncombobox-bound-column
6+
tags: telerik,blazor,multicolumncombobox,combo,columns,bound,column,databind
7+
published: True
8+
position: 0
9+
---
10+
11+
# MultiColumnComboBox Bound Column
12+
13+
This article explains how to show data in the dropdown columns of the MultiColumnComboBox.
14+
15+
## Bind Data To The Columns
16+
17+
To bind data to the `<MultiColumnComboBoxColumn>` you can use the `Field`. This parameter points to the name of field in the data source that the column will render as a string (case-sensitive). You can set it in plain text (Field="SomeField") or let .NET extract the field name from the model (Field="@nameof(MyModelClass.Field)").
18+
19+
## Parameters
20+
21+
>caption The MultiColumnComboBox provides various parameters that allow you to configure the component:
22+
23+
<style>
24+
article style + table {
25+
table-layout: auto;
26+
word-break: normal;
27+
}
28+
</style>
29+
| Parameter | Type | Description
30+
| ----------- | ----------- | -----------|
31+
| `Field` | `string` | Points to the name of field in the data source that the column will render as a string (case-sensitive). |
32+
| `Width` | `string` | Defines the width of the MultiColumnComboBoxColumn. |
33+
| `Class` | `string` | The CSS class that will be rendered on the column's content cells. |
34+
| `HeaderClass` | `string` | The CSS class that will be rendered on the column's header cell. |
35+
| `Title` | `string` | The string title rendered in the column header. If it is not explicitly declared the value of the `Field` will be rendered. |
36+
| `HeaderTemplate` | `RenderFragment` | The HeaderTemplate allows you to control the rendering of the column's header cell. Read more in the [Templates]({%slug multicolumncombobox-templates%}#headertemplate) article. |
37+
| `Template` | `RenderFragment<object>` | The Template allows you to control the rendering of the column's cells. Read more in the [Templates]({%slug multicolumncombobox-templates%}#template) article. |
38+
39+
>caption MultiColumnComboBoxColumn with its features
40+
41+
````CSHTML
42+
<TelerikMultiColumnComboBox Data="@MultiComboData"
43+
@bind-Value="@BoundValue"
44+
ValueField="@nameof(SampleData.Id)"
45+
TextField="@nameof(SampleData.Name)"
46+
Width="300px">
47+
<MultiColumnComboBoxColumns>
48+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)"
49+
Title="The id"
50+
Class="id-cell-class"
51+
HeaderClass="id-header-class"
52+
Width="300px">
53+
</MultiColumnComboBoxColumn>
54+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)"
55+
Title="The name"
56+
Class="name-cell-class"
57+
HeaderClass="name-header-class"
58+
Width="300px">
59+
</MultiColumnComboBoxColumn>
60+
</MultiColumnComboBoxColumns>
61+
</TelerikMultiColumnComboBox>
62+
63+
@code {
64+
public int BoundValue { get; set; }
65+
66+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
67+
{
68+
Id = x,
69+
Name = "Name " + x
70+
}).ToList();
71+
72+
public class SampleData
73+
{
74+
public int Id { get; set; }
75+
public string Name { get; set; }
76+
}
77+
}
78+
79+
<style>
80+
.id-cell-class {
81+
font-weight: bold;
82+
font-style: italic;
83+
}
84+
85+
.id-header-class {
86+
font-weight: bold;
87+
color: blue;
88+
}
89+
90+
.name-cell-class {
91+
color: darkslategray;
92+
font-weight: bolder;
93+
}
94+
95+
.name-header-class {
96+
font-weight: bold;
97+
background-color: lightblue;
98+
}
99+
</style>
100+
````
101+
102+
103+
## See Also
104+
105+
* [Templates]({% slug multicolumncombobox-templates %})

‎components/multicolumncombobox/columns/templates.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
title: Templates
3+
page_title: MultiColumnComboBox Column Templates
4+
description: Column Templates in MultiColumnComboBox for Blazor.
5+
slug: multicolumncombobox-templates
6+
tags: telerik,blazor,multicolumncombobox,combo,columns,headertemplate,celltemplate,templates
7+
published: True
8+
position: 10
9+
---
10+
11+
12+
# MultiColumnComboBox Column Templates
13+
14+
This article explains the available templates for the Columns of the MultiColumnComboBox for Blazor.
15+
16+
<style>
17+
article style + table {
18+
table-layout: auto;
19+
word-break: normal;
20+
}
21+
</style>
22+
| Template | Description
23+
| ----------- | ----------- | -----------|
24+
| [`HeaderTemplate`](#headertemplate) | The HeaderTemplate allows you to control the rendering of the column's header cell. |
25+
| [`Template`](#template) | The Template allows you to control the rendering of the column's cells. |
26+
27+
28+
## HeaderTemplate
29+
30+
The `HeaderTemplate` allows you to control the rendering of the column's header. You can define it for each of the columns of the MultiColumnCombobox.
31+
32+
>caption Use the HeaderTemplate to add an icon to the header cells
33+
34+
````CSHTML
35+
<TelerikMultiColumnComboBox Data="@MultiComboData"
36+
@bind-Value="@BoundValue"
37+
ValueField="@nameof(SampleData.Id)"
38+
TextField="@nameof(SampleData.Name)"
39+
Width="300px">
40+
<MultiColumnComboBoxColumns>
41+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)">
42+
<HeaderTemplate>
43+
<TelerikIcon Icon="info-circle"></TelerikIcon>
44+
Unique identifier
45+
</HeaderTemplate>
46+
</MultiColumnComboBoxColumn>
47+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)">
48+
<HeaderTemplate>
49+
<TelerikIcon Icon="star-outline"></TelerikIcon>
50+
Employee Name
51+
</HeaderTemplate>
52+
</MultiColumnComboBoxColumn>
53+
</MultiColumnComboBoxColumns>
54+
</TelerikMultiColumnComboBox>
55+
56+
@code {
57+
public int BoundValue { get; set; }
58+
59+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
60+
{
61+
Id = x,
62+
Name = "Name " + x
63+
}).ToList();
64+
65+
public class SampleData
66+
{
67+
public int Id { get; set; }
68+
public string Name { get; set; }
69+
}
70+
}
71+
````
72+
73+
## Template
74+
75+
The `Template` (Cell Template) allows you to control the rendering of the cells in the MultiComboBoxColumn. 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 in the cell.
76+
77+
>caption Use the Template to visually distinguish some Ids
78+
79+
````CSHTML
80+
<TelerikMultiColumnComboBox Data="@MultiComboData"
81+
@bind-Value="@BoundValue"
82+
ValueField="@nameof(SampleData.Id)"
83+
TextField="@nameof(SampleData.Name)"
84+
Width="300px">
85+
<MultiColumnComboBoxColumns>
86+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)">
87+
<Template>
88+
@{
89+
var currentEmployee = context as SampleData;
90+
91+
@if(currentEmployee.Id % 3 == 0)
92+
{
93+
<span style="font-weight:bold">Important id: @currentEmployee.Id</span>
94+
}
95+
else
96+
{
97+
<span style="font-style:italic">@currentEmployee.Id</span>
98+
}
99+
}
100+
</Template>
101+
</MultiColumnComboBoxColumn>
102+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)">
103+
</MultiColumnComboBoxColumn>
104+
</MultiColumnComboBoxColumns>
105+
</TelerikMultiColumnComboBox>
106+
107+
@code {
108+
public int BoundValue { get; set; }
109+
110+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
111+
{
112+
Id = x,
113+
Name = "Name " + x
114+
}).ToList();
115+
116+
public class SampleData
117+
{
118+
public int Id { get; set; }
119+
public string Name { get; set; }
120+
}
121+
}
122+
````

‎components/multicolumncombobox/templates.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ List of the available templates:
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. |
2727

28-
>note To customize the rendering of the items in dropdown you can use the [Column Template]({%multicolumncombobob-column-template%}).
28+
>note To customize the rendering of the items in dropdown you can use the [Column Template]({%multicolumncombobob-templates%}#template).
2929
3030
## Header
3131

0 commit comments

Comments
 (0)