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

Client-side Item Management




This example illustrates how to use the RadSlider's Client-side API for item management.

The RadSlider has methods that allow you to manage the control's items on the client when its property ItemType is set to Item:
  • addSliderItem(item, index) - adds a new item to the RadSlider's client-side item collection at the specified index. The settings of the item are configured by passing an object, which has properties text and value, as the item parameter of the method. If the index parameter is not set, the new item will be added at the end of the collection.
    var item = { text: "New Item" , value: "1" };

  • removeSliderItem(index) - removes an item from the RadSlider's client-side item collection. If the index parameter is not set, the last item from the collection will be removed.

Important: The changes made using the above client-side methods will affect the client item collection only. They will not be persisted on the server and will be lost after postback.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<!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 src="scripts.js" type="text/javascript"></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">
        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="btnAddItem" Text="Add Item" OnClientLoad="demo.addButtonClientLoad"
            AutoPostBack="false" OnClientClicked="demo.addSliderItem" CssClass="addItemButton">
            <Icon PrimaryIconCssClass="rbAdd" />
        </telerik:RadButton>
        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="btnRemoveItem" Text="Remove Item" OnClientLoad="demo.removeButtonClientLoad"
            AutoPostBack="false" OnClientClicked="demo.removeSliderItem">
            <Icon PrimaryIconCssClass="rbRemove" />
        </telerik:RadButton>
        <br />
        <br />
        <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" Height="60px" ItemType="Item"
            CssClass="dynamicItemsSlider" OnClientLoad="demo.sliderClientLoad">
            <Items>
                <telerik:RadSliderItem runat="server" Value="1" Text="Item 1" />
                <telerik:RadSliderItem runat="server" Value="2" Text="Item 2" />
                <telerik:RadSliderItem runat="server" Value="3" Text="Item 3" />
                <telerik:RadSliderItem runat="server" Value="4" Text="Item 4" />
            </Items>
        </telerik:RadSlider>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance