This is a migrated thread and some comments may be shown as answers.

Raddatapager Skin

13 Answers 132 Views
ListView
This is a migrated thread and some comments may be shown as answers.
maha
Top achievements
Rank 1
maha asked on 12 Jul 2010, 08:46 AM
I need to make a custom skin for the Listview RadDatapager. And i need to remove the " Page 1 of 10" text i want it to be empty i just need to display the slider.

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                   PageSize="16"     Height="500px" >
                     
                   <Fields>
                   <telerik:RadDataPagerSliderField  SliderDragText=""  SliderOrientation ="Vertical"/>
  
                   </Fields>
                     
               </telerik:RadDataPager>

How can i do that?

13 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 12 Jul 2010, 10:13 AM
Hello Maha,

Please use the following CSS rule:

.RadDataPager_SkinName   .rdpSliderLabel
{
        display: none ;
}


Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
maha
Top achievements
Rank 1
answered on 12 Jul 2010, 12:43 PM
I also need to change the slider height. When i change the datapager height the slider stays the same. How can i do that?
0
Dimo
Telerik team
answered on 12 Jul 2010, 01:00 PM
Hi Maha,

The RadSlider's appearance depends entirely on its skin and the background images it uses. If you want to change the control's height, you need to create a custom skin with new images with different size.

http://www.telerik.com/help/aspnet-ajax/slider_appearancecustomskin.html

Sincerely yours,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
maha
Top achievements
Rank 1
answered on 12 Jul 2010, 02:31 PM
I am using as u can see in the code RaddataPager with RadDataPagerSliderField 
The tutorial you sent me explains how to make custom skins for radSlider. Does it work the same for RaddataPager?
0
Dimo
Telerik team
answered on 12 Jul 2010, 02:38 PM
Hi Maha,

Of course, otherwise I would not have sent this page. RadDataPager uses RadSlider internally.


Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
maha
Top achievements
Rank 1
answered on 13 Jul 2010, 07:54 AM
I made a skin file using telerik visual style builder. I have made several  changes to make the height bigger but nothing worked.
/* RadSlider for ASP.NET AJAX Default Skin */
.RadSlider_SliderSkin .rslTrack
{
    border-color:#b9b9b9 #939393 #939393 #b9b9b9;
  
      
}
  
.RadSlider_SliderSkin .rslHorizontal a.rslHandle
{
    background-image:url('Slider/Handles.gif');
          
}
  
.RadSlider_SliderSkin .rslHorizontal a.rslDraghandle
{
    background-image:url('Slider/DragHandle.gif');
          
}
  
.RadSlider_SliderSkin .rslTop a.rslDraghandle
{
    background-image:url('Slider/DragHandleDown.gif');
          
}
  
.RadSlider_SliderSkin .rslHorizontal .rslTrack
{
    background:url('Slider/TrackBgr.gif') repeat-x;
      
}
  
.RadSlider_SliderSkin .rslHorizontal .rslSelectedregion
{
    background:url('Slider/SelectedRegionHorizontalBgr.gif') right top no-repeat;
          
}
  
/* vertical slider */
.RadSlider_SliderSkin .rslVertical
  
}
  
.RadSlider_SliderSkin .rslVertical a.rslHandle
{
      
    background-image:url('Slider/HandlesVertical.gif');
}
  
.RadSlider_SliderSkin .rslVertical .rslTrack
{
        height:300px;
    background:url('Slider/TrackVerticalBgr.gif') repeat-y ;
}
  
.RadSlider_SliderSkin .rslVertical .rslSelectedregion
{
    
    background:url('Slider/SelectedRegionVerticalBgr.gif') left bottom no-repeat;
}
  
.RadSlider_SliderSkin .rslVertical a.rslDraghandle
{
     
    background:url('Slider/DragVerticalHandle.gif') no-repeat;
}
  
.RadSlider_SliderSkin .rslLeft a.rslDraghandle
{   
    background:url('Slider/DragVerticalHandleRight.gif') no-repeat;
}
  
.RadSlider_SliderSkin .rslItem,
.RadSlider_SliderSkin .rslLargeTick span
{   
    color:#333;
      
}
  
.RadSlider_SliderSkin .rslItemsWrapper .rslItemSelected
{   
    color:#000;
}
  
/* horizontal slider items */
.RadSlider_SliderSkin .rslHorizontal .rslItem
{   
    background-image:url('Slider/ItemHorizontalBgr.gif');
}
  
/* vertical slider items */
.RadSlider_SliderSkin .rslVertical .rslItem
{
      
    background-image:url('Slider/ItemVerticalBgr.gif');
}
  
/* horizontal slider - TrackPosition=Top/Bottom */
.RadSlider_SliderSkin .rslTop .rslSmallTick,
.RadSlider_SliderSkin .rslBottom .rslSmallTick
{   
    background-image:url('Slider/SmallChangeHorizontal.gif');
}
  
.RadSlider_SliderSkin .rslTop .rslLargeTick,
.RadSlider_SliderSkin .rslBottom .rslLargeTick
{   
    background-image:url('Slider/LargeChangeHorizontal.gif');
}
  
/* vertical slider - TrackPosition=Left/Right */
.RadSlider_SliderSkin .rslLeft .rslSmallTick,
.RadSlider_SliderSkin .rslRight .rslSmallTick
    background-image:url('Slider/SmallChangeVertical.gif');
}
  
.RadSlider_SliderSkin .rslLeft .rslLargeTick,
.RadSlider_SliderSkin .rslRight .rslLargeTick 
{   
    background-image:url('Slider/LargelChangeVertical.gif');
}
  
/* horizontal slider - TrackPosition=Center */
.RadSlider_SliderSkin .rslMiddle .rslSmallTick
{   
    background-image:url('Slider/SmallChangeMiddleHorizontal.gif');
}
  
.RadSlider_SliderSkin .rslMiddle .rslLargeTick  
{   
    background-image:url('Slider/LargeChangeMiddleHorizontal.gif');
}
  
/* vertical slider - TrackPosition=Center */
.RadSlider_SliderSkin .rslCenter .rslSmallTick
{   
    background-image:url('Slider/SmallChangeCenterVertical.gif');
}
  
.RadSlider_SliderSkin .rslCenter .rslLargeTick
{   
    background-image:url('Slider/LargelChangeCenterVertical.gif');
}
  
  
 DIV.RadSlider_SliderSkin .rslTrack {
;
  
    WIDTH: 500px;
  
}


<div class="RadSlider_SliderSkin">
             <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"   CssClass ="RadSlider_SliderSkin" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false"
                   PageSize="16"     >
                   
                   <Fields >
                 
                   <telerik:RadDataPagerSliderField  SliderDragText="" SliderDecreaseText="" SliderIncreaseText=""  SliderOrientation ="Vertical"  />
  
                   </Fields>
                    
               </telerik:RadDataPager>
                </div>


and when i view source i see that the slider is still taking the default class

<div class="RadSlider_SliderSkin">
              <div id="ctl00_ContentPlaceHolder1_ctl00_ContentPlaceHolder1_RadDataPager1Panel">
    <div class="RadDataPager RadDataPager_Default" id="ctl00_ContentPlaceHolder1_RadDataPager1" class=" RadSlider_SliderSkin">
        <div class="rdpWrap">
            <div id="ctl00_ContentPlaceHolder1_RadDataPager1_ctl00_PageSlider" class="RadSlider RadSlider_Default" style="height:200px;width:22px;">
                <input id="ctl00_ContentPlaceHolder1_RadDataPager1_ctl00_PageSlider_ClientState" name="ctl00_ContentPlaceHolder1_RadDataPager1_ctl00_PageSlider_ClientState" type="hidden" />
            </div><span class="rdpSliderLabel">Page <strong>1</strong> of <strong>9</strong></span>
        </div><input id="ctl00_ContentPlaceHolder1_RadDataPager1_ClientState" name="ctl00_ContentPlaceHolder1_RadDataPager1_ClientState" type="hidden" />
    </div>
</div>
                 </div>


Is there anything missing?
i have hadded <link> tag to the page with href to the skin file.
0
Dimo
Telerik team
answered on 13 Jul 2010, 08:05 AM
Hi Maha,

You must set Skin="SliderSkin" for the RadDataPager and create a custom skin for the RadDataPager as well. You are not setting the Skin property anywhere, so "Default" is assumed.

I recommend you to review the general RadControls skinning documentation in order to obtain better understanding how skins work. When you have a RadControl, which uses other RadControls internally (e.g. RadGrid, RadEditor, RadDateTimePicker, RadDataPager, etc all use other RadControls) you have to create custom skins for all RadControls that will be part of the composite RadControl. All controls that are part of the composite RadControl use a Skin with the same name.

http://www.telerik.com/help/aspnet-ajax/controlling-appearance-overview.html

(...and the topics below this one in the left navigation tree)


All the best,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
maha
Top achievements
Rank 1
answered on 13 Jul 2010, 09:30 AM
when i set Skin="SliderSkin" for the RadDataPager  i get this error :

Telerik.Web.UI.RadSlider with ID='PageSlider' was unable to find embedded skin with name 'SliderSkin'

How can i create custom skin for raddatapager?It is not available in visual style builder
0
Dimo
Telerik team
answered on 13 Jul 2010, 10:40 AM
Hello Maha,

Indeed, such a problem exists and will be fixed for Q2 2010 SP1.

You can create a custom skin for RadDataPager by using the following guidelines:

http://www.telerik.com/help/aspnet-ajax/createcustomskin.html

Kind regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
maha
Top achievements
Rank 1
answered on 14 Jul 2010, 09:46 AM
I created a custom skin for DataPager and another one for Slider :

PagerSkin.css  :

/*Telerik RadDataPager Common CSS*/
  
.RadDataPager_PagerSkin{display:inline-block;}
.RadDataPager_PagerSkin{display:block;}
.RadDataPager_PagerSkin:after{content:"";display:block;clear:both;visibility:hidden;height:0;}
  
.RadDataPager_PagerSkin
{
    min-height:22px;
    padding:3px 0;
}
  
.RadDataPager_PagerSkin .rdpWrap
{
    float:left;
    padding:0 10px;
    line-height:22px;
    white-space:nowrap;
}
  
.RadDataPager_PagerSkin .rdpInfoPart
{
    float:right;
}
  
.RadDataPager_PagerSkin .rdpInfoPart strong
{
    font-weight:normal;
}
  
.RadDataPager_PagerSkin .rdpPageFirst,
.RadDataPager_PagerSkin .rdpPagePrev,
.RadDataPager_PagerSkin .rdpPageNext,
.RadDataPager_PagerSkin .rdpPageLast
{
    width:22px;
    height:22px;
    border:0;
    margin:0;
    padding:0;
    background-color:transparent;
    background-repeat:no-repeat;
    vertical-align:middle;
    font-size:1px;
    cursor:pointer;
}
  
.RadDataPager_PagerSkin .rdpPageFirst,
.RadDataPager_PagerSkin .rdpPagePrev
{
    margin-right:1px;
}
  
.RadDataPager_PagerSkin .rdpPageNext,
.RadDataPager_PagerSkin .rdpPageLast
{
    margin-left:1px;
}
  
.RadDataPager_PagerSkin .rdpPagerButton
{
    height:22px;
    margin:0 14px 0 0;
    padding:0 4px 2px;
    vertical-align:middle;
    cursor:pointer;
}
  
.RadDataPager_PagerSkin .rdpNumPart a
{
    float:left;
    margin:0;
    padding:0 5px 0 0;
    line-height:22px;
    text-decoration:none;
}
  
.RadDataPager_PagerSkin .rdpNumPart span
{
    float:left;
    padding:0 0 0 5px;
}
  
.RadDataPager_PagerSkin .rdpNumPart a:hover span
{
    cursor:pointer;
}
  
.RadDataPager_PagerSkin .rdpNumPart a.rdpCurrentPage,
.RadDataPager_PagerSkin .rdpNumPart a.rdpCurrentPage:hover,
.RadDataPager_PagerSkin .rdpNumPart a.rdpCurrentPage span,
.RadDataPager_PagerSkin .rdpNumPart a.rdpCurrentPage:hover span
{
    cursor:default;
}
  
.RadDataPager_PagerSkin .rdpWrap a img
{
    margin:0 8px;
}
  
.RadDataPager_PagerSkin .RadSlider
{
    float:left;
    margin:0 10px 0 0;
}
  
.RadDataPager_PagerSkin .rdpPagerLabel,
.RadDataPager_PagerSkin .rdpPager .RadComboBox,
.RadDataPager_PagerSkin .rdpPager .RadInput
{
    margin:0 4px 0 0;
    vertical-align:middle;
}
  
*+html .RadDataPager_PagerSkin .rdpPager .RadComboBox{margin-top:-1px;}
* html .RadDataPager_PagerSkin .rdpPager .RadComboBox{margin-top:-1px;padding:1px 0;}
  
.RadDataPager_PagerSkin .rdpPagerTextBox
{
    text-align:center;
}


SliderSkin.css :
/* RadSlider for ASP.NET AJAX Default Skin */
  
.RadSlider_PagerSkin .rslTrack
{
    border-color:#b9b9b9 #939393 #939393 #b9b9b9;
  
      
}
  
.RadSlider_PagerSkin .rslHorizontal a.rslHandle
{
    background-image:url('Slider/Handles.gif');
          
}
  
.RadSlider_PagerSkin .rslHorizontal a.rslDraghandle
{
    background-image:url('Slider/DragHandle.gif');
          
}
  
.RadSlider_PagerSkin .rslTop a.rslDraghandle
{
    background-image:url('Slider/DragHandleDown.gif');
          
}
  
.RadSlider_PagerSkin .rslHorizontal .rslTrack
{
    background:url('Slider/TrackBgr.gif') repeat-x;
      
}
  
.RadSlider_PagerSkin .rslHorizontal .rslSelectedregion
{
    background:url('Slider/SelectedRegionHorizontalBgr.gif') right top no-repeat;
          
}
  
/* vertical slider */
.RadSlider_PagerSkin .rslVertical
  
}
  
.RadSlider_PagerSkin .rslVertical a.rslHandle
{
      
    background-image:url('Slider/HandlesVertical.gif');
}
  
.RadSlider_PagerSkin .rslVertical .rslTrack
{
        height:300px;
    background:url('Slider/TrackVerticalBgr.gif') repeat-y ;
}
  
.RadSlider_PagerSkin .rslVertical .rslSelectedregion
{
    
    background:url('Slider/SelectedRegionVerticalBgr.gif') left bottom no-repeat;
}
  
.RadSlider_PagerSkin .rslVertical a.rslDraghandle
{
     
    background:url('Slider/DragVerticalHandle.gif') no-repeat;
}
  
.RadSlider_PagerSkin .rslLeft a.rslDraghandle
{   
    background:url('Slider/DragVerticalHandleRight.gif') no-repeat;
}
  
.RadSlider_PagerSkin .rslItem,
.RadSlider_PagerSkin .rslLargeTick span
{   
    color:#333;
      
}
  
.RadSlider_PagerSkin .rslItemsWrapper .rslItemSelected
{   
    color:#000;
}
  
/* horizontal slider items */
.RadSlider_PagerSkin .rslHorizontal .rslItem
{   
    background-image:url('Slider/ItemHorizontalBgr.gif');
}
  
/* vertical slider items */
.RadSlider_PagerSkin .rslVertical .rslItem
{
      
    background-image:url('Slider/ItemVerticalBgr.gif');
}
  
/* horizontal slider - TrackPosition=Top/Bottom */
.RadSlider_PagerSkin .rslTop .rslSmallTick,
.RadSlider_PagerSkin .rslBottom .rslSmallTick
{   
    background-image:url('Slider/SmallChangeHorizontal.gif');
}
  
.RadSlider_PagerSkin .rslTop .rslLargeTick,
.RadSlider_PagerSkin .rslBottom .rslLargeTick
{   
    background-image:url('Slider/LargeChangeHorizontal.gif');
}
  
/* vertical slider - TrackPosition=Left/Right */
.RadSlider_PagerSkin .rslLeft .rslSmallTick,
.RadSlider_PagerSkin .rslRight .rslSmallTick
    background-image:url('Slider/SmallChangeVertical.gif');
}
  
.RadSlider_PagerSkin .rslLeft .rslLargeTick,
.RadSlider_PagerSkin .rslRight .rslLargeTick 
{   
    background-image:url('Slider/LargelChangeVertical.gif');
}
  
/* horizontal slider - TrackPosition=Center */
.RadSlider_PagerSkin .rslMiddle .rslSmallTick
{   
    background-image:url('Slider/SmallChangeMiddleHorizontal.gif');
}
  
.RadSlider_PagerSkin .rslMiddle .rslLargeTick  
{   
    background-image:url('Slider/LargeChangeMiddleHorizontal.gif');
}
  
/* vertical slider - TrackPosition=Center */
.RadSlider_PagerSkin .rslCenter .rslSmallTick
{   
    background-image:url('Slider/SmallChangeCenterVertical.gif');
}
  
.RadSlider_PagerSkin .rslCenter .rslLargeTick
{   
    background-image:url('Slider/LargelChangeCenterVertical.gif');
}
  
  
 DIV.RadSlider_PagerSkin .rslTrack {
;
  
    WIDTH: 500px;
  
}


and registered both in .aspx page :

 

<link rel="stylesheet" href="PagerSkin.css" type="text/css" media="screen" />

 

 

<link rel="stylesheet" href="SliderSkin.css" type="text/css" media="screen" />
 

and RaddataPAger:

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1" Skin="PagerSkin"   EnableEmbeddedBaseStylesheet="false"  EnableEmbeddedSkins="false" PageSize="12"     >
          
          <Fields >
        
          <telerik:RadDataPagerSliderField  SliderDragText="" SliderDecreaseText="" SliderIncreaseText=""  SliderOrientation ="Vertical"  />
          </Fields>
          
      </telerik:RadDataPager>

But am still getting the error :

Telerik.Web.UI.RadSlider with ID='PageSlider' was unable to find embedded skin with name 'PagerSkin'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.



Eventhough u can see in SliderSkin.css i used 

.RadSlider_PagerSkin



Anything missing?
0
Dimo
Telerik team
answered on 14 Jul 2010, 11:55 AM
Hello Maha,

In order to avoid the exception, please use the code below. The problem will be fixed for Q2 2010 SP1.

ASPX

<telerik:RadDataPager ID="RadDataPager1" runat="server" OnFieldCreated="RadDataPager1_FieldCreated">
    <Fields>
         <telerik:RadDataPagerSliderField />
    </Fields>
</telerik:RadDataPager>

C#

protected void RadDataPager1_FieldCreated(object sender, RadDataPagerFieldCreatedEventArgs e)
{
    if (e.Item.Field is RadDataPagerSliderField)
    {
        (e.Item.FindControl("PageSlider") as RadSlider).EnableEmbeddedSkins = false;
    }
}


Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
maha
Top achievements
Rank 1
answered on 14 Jul 2010, 01:09 PM
what is the VB.NET code for that?
0
Dimo
Telerik team
answered on 14 Jul 2010, 01:50 PM
Hi Maha,

Please use http://converter.telerik.com/

Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
ListView
Asked by
maha
Top achievements
Rank 1
Answers by
Dimo
Telerik team
maha
Top achievements
Rank 1
Share this question
or