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

WebForms SegmentedControl Overview

Create Your Account

Personal

For individual use - share basic information, preferences, and connect with others.

The WebForms SegmentedControl displays a group of connected buttons and allows the user to select one option from the set. It is ideal for toggling between related views or mutually exclusive options.

The current example shows a basic SegmentedControl initialized with a set of items and a pre-selected value.

Telerik WebForms SegmentedControl 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 SegmentedControl, please refer to the documentation.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • script.js
  • style.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SegmentedControl_Overview_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="script.js"></script>
    <link href="style.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" runat="server">
        <div class="info-wrapper">
            <div class="sidebar">
                <div class="sidebar-avatar"></div>
                <div class="sidebar-line"></div>
                <div class="sidebar-line short"></div>
                <div class="sidebar-line"></div>
                <div class="sidebar-line short"></div>
                <div class="sidebar-line"></div>
            </div>
            <div class="info-container">
                <h2 class="page-title">Create Your Account</h2>
                <label class="field-label">Profile Type</label>
                <telerik:RadSegmentedControl ID="RadSegmentedControl1" runat="server" SelectedValue="personal">
                    <Items>
                        <telerik:SegmentedControlItem Text="Personal" Value="personal" />
                        <telerik:SegmentedControlItem Text="Business" Value="business" />
                        <telerik:SegmentedControlItem Text="Education" Value="education" Enabled="false" />
                    </Items>
                    <ClientEvents OnChange="onChange" />
                </telerik:RadSegmentedControl>
                <div class="profile-description">
                    <p class="profile-type-title" id="profileTypeTitle">Personal</p>
                    <p class="profile-type-desc" id="profileTypeDesc">For individual use - share basic information, preferences, and connect with others.</p>
                </div>
                <div class="rect-field-sm"></div>
                <div class="rect-field"></div>
                <div class="rect-field-sm"></div>
                <div class="rect-field"></div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance