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 model. The following model uses property names that will work automatically, with no additional ChipList configuration:
<TelerikChipList Data="@ChipListSource"></TelerikChipList>
@code {
private TelerikChipList<ChipModel> ChipListReference { get; set; }
private List<ChipModel> ChipListSource { get; set; } = new List<ChipModel>()
{
new ChipModel()
{
Text = "Audio",
Icon = FontIcon.FileAudio,
Disabled = false,
Removable = true
},
new ChipModel()
{
Text = "Video",
Icon = FontIcon.FileVideo,
Disabled = true,
Removable = false
}
};
public class ChipModel
{
public string Text { get; set; }
public FontIcon? 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 than 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. |
Databound ChipList with custom model property names
<TelerikChipList Data="@ChipListSource"
TextField="@nameof(ChipModel.ChipText)"
IconField="@nameof(ChipModel.ChipIcon)"
DisabledField="@nameof(ChipModel.isChipDisabled)"
RemovableField="@nameof(ChipModel.isChipRemovable)">
</TelerikChipList>
@code {
private TelerikChipList<ChipModel> ChipListReference { get; set; }
private List<ChipModel> ChipListSource { get; set; } = new List<ChipModel>()
{
new ChipModel()
{
ChipText = "Audio",
ChipIcon = FontIcon.FileAudio,
isChipDisabled = false,
isChipRemovable = true
},
new ChipModel()
{
ChipText = "Video",
ChipIcon = FontIcon.FileVideo,
isChipDisabled = true,
isChipRemovable = false
}
};
public class ChipModel
{
public string ChipText { get; set; }
public FontIcon? ChipIcon { get; set; }
public bool isChipDisabled { get; set; }
public bool isChipRemovable { get; set; }
}
}