Raddatapager Skin

[maha]

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?

[Dimo]

Hello Maha,

Please use the following CSS rule:

.RadDataPager_SkinName   .rdpSliderLabel
{
        display: none ;
}


Best wishes,
Dimo
the Telerik team

[maha]

I also need to change the slider height. When i change the datapager height the slider stays the same. How can i do that?

[Dimo]

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

[maha]

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?

[Dimo]

Hi Maha,

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


Dimo
the Telerik team

[maha]

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.

[Dimo]

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

[maha]

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

[Dimo]

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

[maha]

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?

[Dimo]

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

[maha]

what is the VB.NET code for that?

[Dimo]

Hi Maha,

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

Best wishes,
Dimo
the Telerik team