All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
Quench your thirst with our premium selection from the Beverages category. Experience the finest blends of soft drinks, aromatic coffees, robust teas, crisp beers, and ales, each crafted to perfection to suit every palate.
Elevate your culinary creations with our exquisite Condiments collection. From the sweet and tangy to the savory and rich, our sauces, relishes, spreads, and seasonings are the secret ingredients to unforgettable dishes.
Freshness comes first in our Produce category. From sun-dried fruit to tender bean curd, our selection is perfect for health-conscious consumers looking to add natural goodness to their diet.
Our Meat and Poultry category offers premium cuts and prepared meats that are the highlight of any meal. Responsibly sourced and expertly prepared, they deliver flavor and quality in each serving.
Dive into the depths of flavor with our Seafood category. We bring you the freshest seaweed and finest fish, perfect for creating a sea-inspired feast that will tantalize your taste buds
Discover the creamy delights within our Dairy Products range. Our cheeses are sourced from the best dairies, offering a variety of textures and flavors that cater to cheese aficionados and casual snackers alike.
Indulge in the sweet life with our Confections category. Our desserts, candies, and sweet breads are made from the finest ingredients, designed to satisfy your sweet tooth with sophisticated flavors.
Our Grains and Cereals collection is the cornerstone of good nutrition. Featuring wholesome breads, crunchy crackers, versatile pasta, and hearty cereals, each product promises nourishment and taste in every bite.
The Telerik WebForms ChipList is a container of two or more individual Chip components. Each chip from the list can be selected or removed and supports various styling options. The ChipList component is commonly used for single or multiple selections.
In this demo, you can see the ChipList used as Tags for products listing, filtering options. The ChipList appears in a solid and outline styling.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Demos.ChipList.Overview.DefaultVB" %> <%@ 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> <link href="styles.css" rel="stylesheet" /> <script src="scripts.js"></script> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" /> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadCard1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" MinDisplayTime="400"></telerik:RadAjaxLoadingPanel> <div class="demo-container no-bg flex-center chiplist-demo"> <telerik:RadCard runat="server" ID="RadCard1" CssClass="demo-card"> <telerik:CardHeaderComponent runat="server"> <div> <span>Category: </span> <telerik:RadChipList runat="server" ID="RadChipListCategory" Selectable="Multiple"> <ClientEvents OnSelect="onCategorySelect" /> <Items> <telerik:ChipListItem Label="Beverages" /> <telerik:ChipListItem Label="Condiments" /> <telerik:ChipListItem Label="Confections" /> <telerik:ChipListItem Label="Dairy Products" /> <telerik:ChipListItem Label="Grains/Cereals" /> <telerik:ChipListItem Label="Meat/Poultry" /> <telerik:ChipListItem Label="Produce" /> <telerik:ChipListItem Label="Seafood" /> </Items> </telerik:RadChipList> <asp:HiddenField runat="server" ID="HiddenField1" Value="" /> </div> <div> <span>Tags: </span> <telerik:RadChipList runat="server" ID="RadChipListTags" FillMode="Outline" Selectable="Single" ItemSize="Small" Rounded="Full"> <ClientEvents OnSelect="onTagSelect" /> <Items> <telerik:ChipListItem ThemeColor="Base" Label="Drink" /> <telerik:ChipListItem ThemeColor="Base" Label="Pasta" /> <telerik:ChipListItem ThemeColor="Base" Label="Cheese" /> <telerik:ChipListItem ThemeColor="Base" Label="Dessert" /> </Items> </telerik:RadChipList> </div> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server" CssClass="overflow-y"> <telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="PlaceHolder1" OnNeedDataSource="RadListView1_NeedDataSource" OnItemDataBound="RadListView1_ItemDataBound"> <LayoutTemplate> <div class="listview-layout flex"> <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> </div> </LayoutTemplate> <ItemTemplate> <telerik:RadCard runat="server" Width="250px" ID="lvItemCard"> <telerik:CardImageComponent runat="server"> <asp:Image CssClass="image" ImageUrl='<%#String.Format("~/Img/Northwind/Products/{0}.jpg", Eval("ProductID")) %>' runat="server" /> </telerik:CardImageComponent> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server"> <span class="product-name" title='<%# Eval("ProductName") %>'><%# Eval("ProductName") %></span> <span><strong><%# CType(Eval("UnitPrice"), Decimal).ToString("C") %></strong></span> </telerik:CardTitleComponent> <telerik:CardSubtitleComponent runat="server" CssClass="k-no-click"> <telerik:RadChipList ID="RadChipListTags" runat="server" ItemSize="Small" Rounded="Full" FillMode="Outline"></telerik:RadChipList> </telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server"> <p> <span><%# Eval("Description") %></span> </p> </telerik:CardBodyComponent> <telerik:CardFooterComponent runat="server"> <telerik:CardActionsContainerComponent runat="server" Orientation="Horizontal" CardActionsAppearance="Stretched"> <telerik:CardActionComponent runat="server"> <span class="k-button k-button-lg k-flat"><span class="t-icon t-i-cart"></span>Buy</span> </telerik:CardActionComponent> <telerik:CardActionComponent runat="server"> <span class="k-button k-button-lg k-flat"><span class="t-icon t-i-heart-outline"></span>Favorite</span> </telerik:CardActionComponent> </telerik:CardActionsContainerComponent> </telerik:CardFooterComponent> </telerik:RadCard> </ItemTemplate> </telerik:RadListView> </telerik:CardBodyComponent> </telerik:RadCard> </div> </form> </body> </html>