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

    WebForms Chip Overview

    Chip

    Telerik UI for ASP.NET AJAX

    About me

    https://www.telerik.com/products/aspnet-ajax.aspx

    Tags

    Telerik
    WebForms
    Chip

    Note

    Chips are fun!

    About Telerik WebForms Chip for ASP.NET AJAX

    The Chip is a compact element that represents an input, attribute, or action. The component enables user input and verifies that input by converting text into chips.

    This Examples show the usage of Chips as tags of a user profile in a real-life scenario. The Chips are created Dynamically on Server-side based on the value stored in a Hidden Field.

    Telerik WebForms Chip is part of Telerik UI for ASP.NET AJAX, which is a comprehensive toolset containing over 120 controls and taking care of the common functionalities, allowing you more time to focus mainly on the business-specific logic of your application.

    For more information about the Telerik WebForms Chip Control, please refer to the documentation.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • scripts.js
    • styles.css
    <%@ Page Language="c#" AutoEventWireup="true"  CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Demos.Chip.Overview.DefaultCS" %>
     
    <%@ 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" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <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 chip-demo" runat="server">
            <div>
                <div class="flex mb-1">
                    <telerik:RadTextBox ID="RadTextBox1" runat="server" EmptyMessage="Type a name for the Tag" Width="17em"></telerik:RadTextBox>
                    <telerik:RadButton runat="server" ID="RadButton1" Text="Add" CssClass="ml-1" AutoPostBack="true" OnClientClicking="OnClientClicking" />
                </div>
     
                <telerik:RadCard runat="server" ID="RadCard1" Width="350px">
                    <telerik:CardHeaderComponent runat="server">
                        <h1>Chip</h1>
                        <small>Telerik UI for ASP.NET AJAX</small>
                    </telerik:CardHeaderComponent>
                    <telerik:CardBodyComponent runat="server">
                        <h3>About me</h3>
                        <a href="https://www.telerik.com/products/aspnet-ajax.aspx" target="_blank">https://www.telerik.com/products/aspnet-ajax.aspx</a>
                        <h3>Tags</h3>
                        <div class="flex">
                            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                        </div>
                        <h3>Note</h3>
                        <p>Chips are fun!</p>
                    </telerik:CardBodyComponent>
                    <telerik:CardFooterComponent runat="server">
                    </telerik:CardFooterComponent>
                </telerik:RadCard>
     
                <asp:HiddenField ID="HiddenField1" runat="server" Value="[]" />
            </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance