Slider clickable text area

2 posts, 0 answers
  1. Dave
    Dave avatar
    8 posts
    Member since:
    Aug 2011

    Posted 16 Sep 2012 Link to this post

    I'm using the radslider wrapped in an ajax update panel control to create a timeline for a clients site. It's working and looking great. However I am trying to style the item text slightly by wrapping some of it (the Day) in a span element. When I do this, I can no longer click on the text in the span to move the tick. Is there a way maybe with css to make the whole block clickable instead of just the text? An Item template and itemdatabound event would rock, but I realize that's not the intended use for this control. Here's what I'm doing in the Item Text. Right now if I click on the larger Day Text nothing happens, but if you click on the Month or Year it works fine. See screenshot also.

    <style type="text/css">
     
        .TimelineContainer
        {
            width:938px;
             height: 250px;
             margin-bottom:30px;
        }
         
        .TimelineContainer h3
        {
             margin: 0 0 12px;
            color: #C94D58;
            font: 20px CenturyGothicBold, arial, helvetica, sans-serif;
        }      
         
        .TimelineImageWrapper
        {
            width:465px;
            height: 250px;
            float:left;
        }
         
        .TimelineTextWrapper
        {
            width:432px;
            height: 210px;
            float:left;
            padding: 0px 20px 20px 20px;
        }
         
        .TimelineDay
        {
            font-size:14px !important;
        }   
         
    </style>
     
    <telerik:RadAjaxPanel ID="srRadAjaxPanel" runat="server">
     
     
        <div class="TimelineContainer">
            <div class="TimelineImageWrapper">
                <asp:Image ID="imgImage" runat="server" Width="465px" Height="250px" />       
            </div>
            <div class="TimelineTextWrapper">
                <h3>Timeline Header</h3>
                Timeline text for testing the timeline control. Timeline text for testing the timeline control. Timeline text for testing the timeline control.
                Timeline text for testing the timeline control. Timeline text for testing the timeline control. Timeline text for testing the timeline control.
                Timeline text for testing the timeline control. Timeline text for testing the timeline control.
            </div>
             
        </div>
     
     
        <telerik:RadSlider ID="rsTimelineSlider" runat="server" ItemType="Item"
        Width="938" Height="120" Skin="Transparent" AutoPostBack="true"
        ShowIncreaseHandle="false" ShowDecreaseHandle="false">
          
         <Items>
             
            <telerik:RadSliderItem Text="June<span class='TimelineDay'>5</span>1978" />
            <telerik:RadSliderItem Text="July<span class='TimelineDay'>15</span>1979" />
            <telerik:RadSliderItem Text="May<span class='TimelineDay'>8</span>1980" />
            <telerik:RadSliderItem Text="August<span class='TimelineDay'>11</span>1981" />
            <telerik:RadSliderItem Text="Jan<span class='TimelineDay'>12</span>1982" />
            <telerik:RadSliderItem Text="Feb<span class='TimelineDay'>9</span>1982" />
            <telerik:RadSliderItem Text="March<span class='TimelineDay'>3</span>1982" />
            <telerik:RadSliderItem Text="April<span class='TimelineDay'>17</span>1982" />
            <telerik:RadSliderItem Text="Aug<span class='TimelineDay'>23</span>1985" />
            <telerik:RadSliderItem Text="June<span class='TimelineDay'>25</span>1989" />
            <telerik:RadSliderItem Text="Sept<span class='TimelineDay'>14</span>1990" />
            <telerik:RadSliderItem Text="June<span class='TimelineDay'>5</span>1978" />
            <telerik:RadSliderItem Text="July<span class='TimelineDay'>15</span>1979" />
            <telerik:RadSliderItem Text="May<span class='TimelineDay'>8</span>1980" />
            <telerik:RadSliderItem Text="August<span class='TimelineDay'>11</span>1981" />
            <telerik:RadSliderItem Text="Jan<span class='TimelineDay'>12</span>1982" />
            <telerik:RadSliderItem Text="Feb<span class='TimelineDay'>9</span>1982" />
            <telerik:RadSliderItem Text="March<span class='TimelineDay'>3</span>1982" />
            <telerik:RadSliderItem Text="April<span class='TimelineDay'>17</span>1982" />
            <telerik:RadSliderItem Text="Aug<span class='TimelineDay'>23</span>1985" />
            <telerik:RadSliderItem Text="June<span class='TimelineDay'>25</span>1989" />
            <telerik:RadSliderItem Text="Sept<span class='TimelineDay'>14</span>1990" />
        </Items>
          
    </telerik:RadSlider>
     
    </telerik:RadAjaxPanel>

  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 19 Sep 2012 Link to this post

    Hi Dave,

    The RadSlider control does not support nesting HTML elements in its items as you did in your example. Alternatively, you can use a client-side script to customize the content of a slider item so that it matches your requirements. The sample above shows the handler of the RadSlider's client-side event OnClientLoad which gets the span of every item and splits it into three span elements, one of which has your CSS class applied:
    <script type="text/javascript">
        function OnClientLoad(sender, args) {
            var items = sender.get_items();
            for (var i = 0; i < items.length; i++) {
                var itemElement = $telerik.$(items[i].get_element());
                var date = itemElement.find("span").html().split(" ");
                itemElement.find("span").html(date[0]);
                itemElement.append("<span class='TimelineDay'>" + date[1] + "</span>");
                itemElement.append("<span>" + date[2] + "</span>");
            }
        }
    </script>

    Note that you should pass the name of this function to the OnClientLoad property of RadSlider in order for this script to work.

    Greetings,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top