Rober Rajiv
Top achievements
Rank 1
Rank 1
Rober Rajiv
asked on 07 Sep 2009, 07:06 AM
Hi,
My initial requirement goes like this:
1. I want to create a customized horizontal slider of height 30px.
2. Want to create this as a server control
3. Need to display a text in the Selected Region
I have created the above slider using customized skin with height 30px and its working fine.
But if i try to create it as a custom control, i face the following issue:
The DragHandle is displayed as link with text "Drag", and is displayed below the track. (This works fine if i try without using a server control.). Need some help in this regard.
And how can i display some text in the SelectedRegion?
Code Snippet - Custom Control:
Code Snippet - .aspx page
Slider.Default.css
Regards,
Rajiv
My initial requirement goes like this:
1. I want to create a customized horizontal slider of height 30px.
2. Want to create this as a server control
3. Need to display a text in the Selected Region
I have created the above slider using customized skin with height 30px and its working fine.
But if i try to create it as a custom control, i face the following issue:
The DragHandle is displayed as link with text "Drag", and is displayed below the track. (This works fine if i try without using a server control.). Need some help in this regard.
And how can i display some text in the SelectedRegion?
Code Snippet - Custom Control:
| using System; |
| using System.ComponentModel; |
| using System.Globalization; |
| using System.IO; |
| using System.Web; |
| using System.Web.UI; |
| using Telerik.Web.UI; |
| namespace MyCustomSlider |
| { |
| [ToolboxData("<{0}:WebPlatformSlider runat=server></{0}:WebPlatformSlider>")] |
| public class CustomSlider : RadSlider |
| { |
| protected override void OnPreRender(EventArgs e) |
| { |
| base.OnPreRender(e); |
| } |
| protected override string CssClassFormatString |
| { |
| get |
| { |
| return "RadSlider RadSlider_{0}"; |
| } |
| } |
| [Browsable(false)] |
| public override bool EnableEmbeddedSkins |
| { |
| get |
| { |
| return false; |
| } |
| } |
| [Browsable(false)] |
| public override bool EnableEmbeddedBaseStylesheet |
| { |
| get |
| { |
| return false; |
| } |
| } |
| [Browsable(true)] |
| public override string Skin |
| { |
| get |
| { |
| return "Default"; |
| } |
| } |
| [Browsable(false)] |
| public new bool Modal |
| { |
| get |
| { |
| return true; |
| } |
| } |
| } |
| } |
Code Snippet - .aspx page
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="Telerik_SampleSlider.SampleSlider" Theme="Default" %> |
| <%@ Register TagPrefix="tel" Namespace="MyCustomSlider" Assembly="MyCustomSlider" %> |
| <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title></title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> |
| <div> |
| <br /> |
| <br /> |
| <tel:CustomSlider ID="RadSlider1" runat="server" ShowDecreaseHandle="false" ShowIncreaseHandle="false"> |
| </tel:CustomSlider> |
| </div> |
| </form> |
| </body> |
| </html> |
Slider.Default.css
| .RadSlider_Default div.rslHorizontal |
| { |
| height:21px; |
| } |
| .RadSlider_Default div.rslHorizontal a.rslHandle |
| { |
| width:27px; |
| height:21px; |
| line-height:21px; |
| } |
| .RadSlider_Default div.rslHorizontal a.rslDraghandle |
| { |
| width:23px; |
| height:30px; |
| line-height:30px; |
| margin-top:-1px; |
| background-image:url('Slider/dragHandle.JPG'); |
| background-position:0 1px; |
| } |
| .RadSlider_Default div.rslHorizontal a.rslDraghandle:hover, |
| .RadSlider_Default div.rslHorizontal a.rslDraghandle:focus, |
| .RadSlider_Default div.rslHorizontal a.rslDraghandle:active |
| { |
| background-position:0 1px; |
| } |
| .RadSlider_Default div.rslHorizontal div.rslTrack |
| { |
| left: 27px; |
| top: 0; |
| height: 19px; |
| line-height: 19px; |
| margin-top: 0px; |
| background-color: #FFFFFF; |
| border-top: solid 1px #2c7b90; |
| border-bottom: solid 1px #024e6e; |
| } |
| .RadSlider_Default div.rslHorizontal div.rslSelectedregion |
| { |
| height: 19px; |
| line-height: 19px; |
| background-color: #CEEBFF; |
| } |
Regards,
Rajiv
1 Answer, 1 is accepted
0
Hello Rajiv,
You need to add a reference to your custom CSS files on your page - you need both the common CSS file as well as the skin-specific one. For example:
Kind regards,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
You need to add a reference to your custom CSS files on your page - you need both the common CSS file as well as the skin-specific one. For example:
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head id="Head1" runat="server"> |
| <title></title> |
| <link href="Skin/Slider.css" rel="stylesheet" type="text/css" /> |
| <link href="Skin/Default/Slider.Default.css" rel="stylesheet" type="text/css" /> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <div> |
| <br /> |
| <br /> |
| <tel:CustomSlider ID="RadSlider1" runat="server" ShowDecreaseHandle="false" ShowIncreaseHandle="false"> |
| </tel:CustomSlider> |
| </div> |
| </form> |
| </body> |
| </html> |
Kind regards,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.