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

DataSources

Change the value of the slider
Cities:
Liverpool
London
Manchester

RadSlider can now be databound to a datasource. When you databind it, it automatically creates items and populates the Items collection. That is why to be able to databind RadSlider you should explicitly set ItemType="Item"

To control the databinding you should use the new ItemBinding inner property which provides the following properties:

  • TextField - determines which field of the datasource will be displayed as text of the item
  • ToolTipField - determines which field of the datasource will be displayed as tooltip of the item
  • ValueField - determines which field of the datasource will provide the value associated with the item

In addition, you can also add the databound items to already declared items by setting AppendDataBoundItems="true".

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.Web.Examples.Slider.DataBinding.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" type="text/css" />
    <script type="text/javascript" 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 size-wide">
        <telerik:RadAjaxLoadingPanel ID="loading" runat="server" BackgroundPosition="Bottom">
        </telerik:RadAjaxLoadingPanel>

        <telerik:RadAjaxPanel ID="pnl" runat="server" LoadingPanelID="loading">
            <div><span class="label">Change the value of the slider</span></div>
            <telerik:RadSlider RenderMode="Lightweight" ID="slider" runat="server" DataSourceID="SqlDataSource1" Width="800"
                ItemType="Item" Height="100" AutoPostBack="true" OnDataBound="OnDataBound" OnClientValueChanged="demo.sliderValueChanged">
                <ItemBinding TextField="Name" ToolTipField="Description" ValueField="ID"></ItemBinding>
            </telerik:RadSlider>
            <div><span class="label">Cities:</span></div>
            <telerik:RadListView ID="RadListView1" runat="server">
                <ItemTemplate>
                    <fieldset class="city">
                        <legend><%#Eval("Name")%></legend>
                        <div style="background-image: url('<%# Eval("Name", "../../../Img/Telerik/Cities/Thumbs/{0}.jpg") %>');"></div>
                    </fieldset>
                </ItemTemplate>
                <LayoutTemplate>
                    <asp:Panel ID="itemPlaceholder" runat="server">
                    </asp:Panel>
                </LayoutTemplate>
            </telerik:RadListView>
            <telerik:RadToolTipManager RenderMode="Lightweight" ID="mng" runat="server" HideEvent="ManualClose" Width="500"
                Position="TopCenter" ToolTipZoneID="slider" AutoTooltipify="true" ShowEvent="FromCode"
                Style="z-index: 31000">
            </telerik:RadToolTipManager>
        </telerik:RadAjaxPanel>

        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT  * FROM Countries INNER JOIN CountryDetails ON Countries.Name = CountryDetails.CountryName ORDER BY Name ASC"
            runat="server"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT * FROM [Cities] WHERE ([CountryID] = @CountryID) ORDER BY Name ASC"
            runat="server"></asp:SqlDataSource>

        <telerik:RadCodeBlock ID="code" runat="server">
            <script type="text/javascript">
                function getSlider() {
                    return $find("<%=slider.ClientID %>");
                }

                function getTooltipManager() {
                    return $find("<%=mng.ClientID %>");
                }
            </script>
        </telerik:RadCodeBlock>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance