ChipList Data Binding
This article explains how to provide data to a ChipList component, and the properties related to data binding.
For details on Value Binding and Data Binding, and the differences between them, see the Value Binding vs Data Binding article.
Data Binding Features
The ChipList has features that map to properties in the component model class. The following example uses property names that will work automatically, with no additional ChipList configuration.
Using default property names in the ChipList model class
<TelerikChipList Data="@ChipListData"></TelerikChipList>
@code {
private List<ChipModel> ChipListData { get; set; } = new List<ChipModel>() {
new ChipModel()
{
Text = "Audio",
Icon = SvgIcon.FileAudio,
Disabled = false,
Removable = true
},
new ChipModel()
{
Text = "Video",
Icon = SvgIcon.FileVideo,
Disabled = false,
Removable = false
},
new ChipModel()
{
Text = "Image",
Icon = SvgIcon.FileImage,
Disabled = true,
Removable = false
}
};
public class ChipModel
{
public string Text { get; set; }
public ISvgIcon Icon { get; set; }
public bool Disabled { get; set; }
public bool Removable { get; set; }
}
}
Data Binding Schema
The table below lists the available data binding parameters for the Blazor ChipList component. Use them when your model property names are different from the default values.
ChipList Parameter | Default Value | Description |
---|---|---|
DisabledField |
"Disabled" |
Defines if the chip is disabled (non-clickable). |
IconField |
"Icon" |
The icon that renders in the chip. |
TextField |
"Text" |
The text that renders in the chip. |
RemovableField |
"Removable" |
Defines if the users can remove the chip. |
Icons
The IconField
model property can hold:
- A property of the static
SvgIcon
class; - A member of the
FontIcon
enum; - A
string
that is a CSS class for a custom icon.
Make sure to register
font-icons.css
if using Telerik font icons.
ChipList with custom model property names
<TelerikChipList Data="@ChipListData"
TextField="@nameof(ChipModel.ChipText)"
IconField="@nameof(ChipModel.ChipIcon)"
DisabledField="@nameof(ChipModel.ChipDisabled)"
RemovableField="@nameof(ChipModel.ChipRemovable)">
</TelerikChipList>
<!-- Load this stylesheet only if using Telerik font icons -->
<link href="https://blazor.cdn.telerik.com/blazor/6.2.0/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />
@code {
private List<ChipModel> ChipListData { get; set; } = new List<ChipModel>() {
new ChipModel()
{
ChipText = "Audio (SVG icon)",
ChipIcon = SvgIcon.FileAudio,
ChipDisabled = false,
ChipRemovable = true
},
new ChipModel()
{
ChipText = "Video (Font icon)",
ChipIcon = FontIcon.FileVideo,
ChipDisabled = false,
ChipRemovable = false
},
new ChipModel()
{
ChipText = "Image (disabled)",
ChipIcon = SvgIcon.FileImage,
ChipDisabled = true,
ChipRemovable = false
}
};
public class ChipModel
{
public string ChipText { get; set; }
public object ChipIcon { get; set; }
public bool ChipDisabled { get; set; }
public bool ChipRemovable { get; set; }
}
}