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

Client-side API

  • Demo Configurator

The WebForms SegmentedControl comes with a client-side API that lets you programmatically interact with the component. This demo shows how to enable and disable the control, select items by index, and read the currently selected value.

You can check the full list of the supported API calls in the WebForms SegmentedControl API reference documentation.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SegmentedControl_Client_Side_Programming_ClientSideAPI_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <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" />
    <div class="demo-container no-bg flex-center" runat="server">
        <telerik:RadSegmentedControl ID="RadSegmentedControl1" runat="server">
            <Items>
                <telerik:SegmentedControlItem Text="Day" Value="day" Icon="calendar" />
                <telerik:SegmentedControlItem Text="Week" Value="week" Icon="clock" />
                <telerik:SegmentedControlItem Text="Month" Value="month" Icon="calendar-date" />
            </Items>
        </telerik:RadSegmentedControl>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="Button1" runat="server" AutoPostBack="false" Width="250px" Text="Disable" OnClientClicked="onEnableDisableClick" />
                        </li>
                        <li>
                            <qsf:Button ID="Button2" runat="server" AutoPostBack="false" Width="250px" Text="Get Selected Value" OnClientClicked="onGetSelectedValue" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="Button7" runat="server" AutoPostBack="false" Width="250px" Text="Select 'Day'" Value="day" OnClientClicked="onSelectItem" />
                        </li>
                        <li>
                            <qsf:Button ID="Button8" runat="server" AutoPostBack="false" Width="250px" Text="Select 'Month" Value="month" OnClientClicked="onSelectItem" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance