Hi and thanks in advance.
I created a custom control that uses a rad slider with item type set to item. As follows:
I am dynamically adding ticks on the server side. Here is the code:
The problem I am having is that the tick marks are showing once the radslider is rendered on the page. How can I hide these tick marks from showing? My understanding was that when you create an item type slider the tick marks go away, but this is not the case. Any help would be appreciated. I have included a screenshot for reference.
Thanks,
-Justin
I created a custom control that uses a rad slider with item type set to item. As follows:
<td> <telerik:RadSlider ItemType="Item" SmallChange="1" TrackPosition="TopLeft" AutoPostBack="false" ShowDecreaseHandle="false" Width="490" LargeChange="0" OnClientValueChanged="rwc_Input_Slider_ValueChanged" OnValueChanged="radSlider1_ValueChanged" ShowIncreaseHandle="false" MinimumValue="0" MaximumValue="36" runat="server" ID="radSlider1"> </telerik:RadSlider>
</td>I am dynamically adding ticks on the server side. Here is the code:
private void CreateSliderTicks(RadSlider radSlider)
{ int minuteTicks = 6; int hourTicks = 24; int dayTicks = 8; // add minute ticks to the graph for (int i = 0; i < minuteTicks; i++) { RadSliderItem minuteItem = new RadSliderItem(); minuteItem.Value = (i * 10).ToString() + " " + Resources.Units.Minutes; //string testValue = minuteItem.Value.ToString(); //minuteItem.Text = minuteItem.Value.ToString() + " minutes"; radSlider.Items.Add(minuteItem); } // add hour ticks to the graph for (int i = 1; i < hourTicks; i++) { RadSliderItem hourItem = new RadSliderItem(); string units = "";//Resources.Units.Hours; if (i > 1) { units = Resources.Units.Hours; } else { units = Resources.Units.Hour; } hourItem.Value = i.ToString() + " " + units; //string testValue = hourItem.Value.ToString(); radSlider.Items.Add(hourItem); } // add day ticks to the graph for (int i = 1; i < dayTicks; i++) { RadSliderItem dayItem = new RadSliderItem(); string units = ""; if (i > 1) { units = Resources.Units.Days; } else { units = Resources.Units.Day; } dayItem.Value = i.ToString() + " " + units; //string testValue = dayItem.Value.ToString(); radSlider.Items.Add(dayItem); } }
The problem I am having is that the tick marks are showing once the radslider is rendered on the page. How can I hide these tick marks from showing? My understanding was that when you create an item type slider the tick marks go away, but this is not the case. Any help would be appreciated. I have included a screenshot for reference.
Thanks,
-Justin
4 Answers, 1 is accepted
0
Accepted
Hi Justin,
You can try hiding the ticks with a custom CSS rule with display:none attribute.
You can see this example:
CSS:
Regards,
Ianko
Telerik
You can try hiding the ticks with a custom CSS rule with display:none attribute.
You can see this example:
<telerik:RadSlider ID="RadSlider3" runat="server" LargeChange="0" SmallChange="5" Value="0" MinimumValue="-50" MaximumValue="50" Width="400" Height="60" ItemType="Tick" TrackPosition="TopLeft" CssClass="MySlider"></telerik:RadSlider>CSS:
.MySlider .rslItemsWrapper li { display: none;}Regards,
Ianko
Telerik
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 the blog feed now.
0
Justin
Top achievements
Rank 1
Rank 1
answered on 10 Jan 2014, 03:30 PM
lanko,
That worked great. I tried using the css before, but was using the wrong element name. Thanks for your help.
-Justin
That worked great. I tried using the css before, but was using the wrong element name. Thanks for your help.
-Justin
0
Nick
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2014, 02:31 AM
I have the same issue; I tried the recommended CSS, but now the item values are gone as well as the tick marks. Thoughts?
0
Hello,
You could try to use the following code:
Regards,
Bozhidar
Telerik
You could try to use the following code:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> .RadSlider.MySlider .rslItemsWrapper li { background-image: none; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadSlider ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100" SmallChange="5" LargeChange="10" ItemType="tick" Height="70px" Width="350px" AnimationDuration="400" ThumbsInteractionMode="Free" CssClass="MySlider"> </telerik:RadSlider> </form></body></html>Regards,
Bozhidar
Telerik
DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.