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

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