getting-started.md

title	page_title	description	slug	tags	published	position
Getting Started	Getting Started with the ChipList	Get started with the WebForms ChipList by Telerik UI for ASP.NET AJAX and learn how to create, initialize, and enable the component.	chiplist/getting-started	chiplist,getting started	true	1

Getting Started with the ChipList

This guide demonstrates how to get up and running with the Telerik WebForms ChipList.

After the completion of this guide, you will be able to achieve the following end result:

Create the ChipList

In the Markup

• add a telerik:RadChipList element to the page
• and telerik:ChipListItem elements to the Items collection
• configure the telerik:ChipListItem options, like Icon, and Label.

Example

<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>

Dynamically on Server-side

• create a new instance of a RadChipList object
• and ChipListItem objects to the Items collection
• configure the ChipListItem options, like Icon, and Label.
• add the RadChipList instance to the Controls collection of another control (e.g. PlaceHolder1)

Example

protected void Page_PreInit(object sender, EventArgs e)
{
    RadChipList chiplist = new RadChipList() { ID = "RadChipList1" };

    chiplist.Items.Add(new ChipListItem() { Icon = "plus", Label = "Add" });
    chiplist.Items.Add(new ChipListItem() { Icon = "pencil", Label = "Edit" });
    chiplist.Items.Add(new ChipListItem() { Icon = "trash", Label = "Remove" });

    PlaceHolder1.Controls.Add(chiplist);
}

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
    Dim chiplist As RadChipList = New RadChipList() With {
        .ID = "RadChipList1"
    }

    chiplist.Items.Add(New ChipListItem() With {
        .Icon = "plus",
        .Label = "Add"
    })
    chiplist.Items.Add(New ChipListItem() With {
        .Icon = "pencil",
        .Label = "Edit"
    })
    chiplist.Items.Add(New ChipListItem() With {
        .Icon = "trash",
        .Label = "Remove"
    })

    PlaceHolder1.Controls.Add(chiplist)
End Sub

The PlaceHolder1

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

important Creating controls programmatically must be done in an early event such as PreInit (preferably), and Init. For more details you can check out the ASP.NET Page Life-Cycle Events

Next Steps

• [Change the Appearance]({%slug chiplist/appearance%})
• [Customize the ChipList]({%slug chiplist/customization%})
• [Enable Selection]({%slug chiplist/selection-mode%})
• [Removable]({%slug chiplist/removable%})
• [Client-side Programming]({%slug chiplist/client-side-programming/overview%})
• [Server-side Programming]({%slug chiplist/server-side-programming/overview%})

See Also

• [Overview]({%slug chiplist/overview%})
• [Change the Appearance]({%slug chiplist/appearance%})
• [Customize the ChipList]({%slug chiplist/customization%})
• [Enable Selection]({%slug chiplist/selection-mode%})
• [Removable]({%slug chiplist/removable%})
• [Client-side Programming]({%slug chiplist/client-side-programming/overview%})
• [Server-side Programming]({%slug chiplist/server-side-programming/overview%})