Client-side Programming Overview
Overview of the Client-side APIs you can use to configure the Telerik WebForms ChipList Control.
The Client-side APIs only allow making changes to a rendered
ChipList
element. As an ASP.NET WebForms Component, it can only be created the server, see Server-side Programming Overview
Get Client-side reference
Example of getting Client-side reference to the Telerik.Web.UI.RadChipList
object at Page Load using the Sys.Application.Load
event.
<telerik:RadChipList runat="server" ID="RadChipList1">
<Items>
<telerik:ChipListItem Icon="plus" Label="Add" />
<telerik:ChipListItem Icon="pencil" Label="Edit" />
<telerik:ChipListItem Icon="trash" Label="Remove" />
</Items>
</telerik:RadChipList>
<script>
function pageLoadHandler(sender, args) {
// Reference the Telerik.Web.UI.RadChipList object
var chiplist = $find('<%= RadChipList1.ClientID %>');
// Access the kendo.ui.ChipList widget
var kendoChipList = chiplist.get_kendoWidget();
}
Sys.Application.add_load(pageLoadHandler);
</script>
For more details about referencing Telerik Controls on the Client-side, you can check out the Getting Client-Side References article.
Telerik WebForms ChipList API
The WebForms ChipList exposes a few Client-side properties and enums that can be used to change the appearance on the client.
For a list of available Properties and Enums, you can refer to the following articles:
Example of changing the appearance on Page Load
<telerik:RadChipList runat="server" ID="RadChipList1" />
<script>
// Page Load Handler
function pageLoadHandler(sender, args) {
// Get client-side reference
var chiplist = $find('<%= RadChipList1.ClientID %>');
// Setting the Size using the Telerik.Web.UI.RadChipListSize enum
chiplist.set_size(Telerik.Web.UI.RadChipListSize.Large);
// Setting the Label (text)
chiplist.set_label('ChipList Label');
// Set the border rounding to full
chiplist.set_rounded(Telerik.Web.UI.RadChipListRounded.Full);
// Setting the FillMode using the Telerik.Web.UI.RadChipListFillMode enum.
// Example of accessing the Enum value by using the EnumName as string parameter
chiplist.set_fillMode(Telerik.Web.UI.RadChipListFillMode['Outline']);
// Set the Theme Color using the Telerik.Web.UI.RadChipListThemeColor enum value
// Telerik.Web.UI.RadChipListThemeColor.Success = 2
chiplist.set_themeColor(2);
}
// Page Load event with handler
Sys.Application.add_load(pageLoadHandler);
</script>
Kendo jQuery ChipList API
Since the Telerik WebForms ChipList is an ASP.NET WebForms wrapper over the Kendo jQuery widget, you can also access the Kendo object and use its APIs. The complete API reference for the Kendo jQuery ChipList can be found at kendo.ui.ChipList.
Example of using the underlying Kendo widget and achieving the same outcome as in the Telerik WebForms ChipList API example.
<telerik:RadChipList runat="server" ID="RadChipList1" />
<script>
// Page Load Handler
function pageLoadHandler(sender, args) {
// Get client-side reference
var chiplist = $find('<%= RadChipList1.ClientID %>'); // Telerik.Web.UI.RadChipList
var kendoChipList = chiplist.get_kendoWidget(); // kendo.ui.ChipList
kendoChipList.setOptions({
size: "large",
label: "ChipList Label",
rounded: "full",
fillMode: "outline",
themeColor: "success"
});
}
// Page Load event with handler
Sys.Application.add_load(pageLoadHandler);
</script>
Tips & Tricks
You can create a JavaScript object containing all the Enums in one place for easier access.
Example
<telerik:RadChipList runat="server" ID="RadChipList1" Type="Icon" Icon="user" />
<script>
// The Object referencing all the ChipList Enums
var ChipListEnums = (function () {
try {
return {
FillMode: Telerik.Web.UI.RadChipListFillMode,
Rounded: Telerik.Web.UI.RadChipListRounded,
Size: Telerik.Web.UI.RadChipListSize,
ThemeColor: Telerik.Web.UI.RadChipListThemeColor
}
} catch (e) {
// Oops, Telerik.Web.UI is not defined
}
})();
// Page Load Handler
function pageLoadHandler(sender, args) {
// Get client-side reference
var chiplist = $find('<%= RadChipList1.ClientID %>');
chiplist.set_size(ChipListEnums.Size.Large);
chiplist.set_label('ChipList Label');
chiplist.set_rounded(ChipListEnums.Rounded.Full);
chiplist.set_fillMode(ChipListEnums.FillMode['Outline']);
chiplist.set_themeColor(2);
}
// Page Load event with handler
Sys.Application.add_load(pageLoadHandler);
</script>