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

Item Width Modes

  • Demo Configurator

The WebForms SegmentedControl supports two layout modes that control how the width is distributed among its items.

In Compact mode (the default), each item takes only the width it needs to display its content. In Stretch mode, all items share the available width equally, filling the full width of the container.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • script.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SegmentedControl_ItemWidthModes_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>
</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" LayoutMode="Compact" SelectedValue="open">
            <Items>
                <telerik:SegmentedControlItem Text="Open (12)" Value="open" />
                <telerik:SegmentedControlItem Text="In Progress (3)" Value="progress" />
                <telerik:SegmentedControlItem Text="Waiting on Customer (7)" Value="waiting" />
                <telerik:SegmentedControlItem Text="Resolved (48)" Value="resolved" />
            </Items>
        </telerik:RadSegmentedControl>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="LayoutMode1" AutoPostBack="false" AllowCustomText="false" Label="Layout Mode" Size="Medium" OnClientSelectedIndexChanged="changeLayout">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Compact" Value="Compact" Selected="True" />
                                    <telerik:RadComboBoxItem Text="Stretch" Value="Stretch" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance