Raddatapager Skin

14 posts, 1 answers
  1. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 12 Jul 2010 Link to this post

    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?
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Jul 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 12 Jul 2010 Link to this post

    I also need to change the slider height. When i change the datapager height the slider stays the same. How can i do that?
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Jul 2010 Link to this post

    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
  6. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 12 Jul 2010 Link to this post

    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?
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Jul 2010 Link to this post

    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
  8. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 13 Jul 2010 Link to this post

    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.
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Jul 2010 Link to this post

    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
  10. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 13 Jul 2010 Link to this post

    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
  11. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Jul 2010 Link to this post

    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
  12. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 14 Jul 2010 Link to this post

    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?
  13. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Jul 2010 Link to this post

    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
  14. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 14 Jul 2010 Link to this post

    what is the VB.NET code for that?
  15. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Jul 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017