New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Appearance

  • Demo Configurator
Item Size
Chip Item Theme Color
Fill Mode
Border Radious

The Telerik WebForms Chip offers various options which allow you to control its appearance, such as size, border radius, itheme color, and fill mode, as demonstrated in this demo. You can also easily switch between the built-in Skins at the top right corner of the page.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg chiplist-demo" runat="server">

        <telerik:RadCard ID="RadCard1" runat="server">
            <telerik:CardBodyComponent runat="server">
                <div class="flex">
                    <telerik:RadChipList runat="server" ID="RadChipList1" Removable="true">
                        <Items>
                            <telerik:ChipListItem Label="Add" Icon="plus" />
                            <telerik:ChipListItem Label="Edit" Icon="pencil" />
                            <telerik:ChipListItem Label="Remove" Icon="trash" />
                        </Items>
                    </telerik:RadChipList>
                </div>
            </telerik:CardBodyComponent>
        </telerik:RadCard>

    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Item Size" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbSize" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="changeItemSize">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Chip Item Theme Color" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbThemeColor" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="changeThemeColor">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Base" Value="Base" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Info" Value="Info" />
                                    <telerik:RadComboBoxItem Text="Success" Value="Success" />
                                    <telerik:RadComboBoxItem Text="Warning" Value="Warning" />
                                    <telerik:RadComboBoxItem Text="Error" Value="Error" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Fill Mode" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="optionFillMode" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="changeFillMode">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Solid" Value="Solid" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Outline" Value="Outline" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Title="Border Radious" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="optionRounded" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="changeRounded">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" />
                                    <telerik:RadComboBoxItem Text="Full" Value="Full" />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance