Skin of Datapager Fields in RadListView

5 posts, 0 answers
  1. Skov
    Skov avatar
    3 posts
    Member since:
    Jan 2005

    Posted 07 Jan 2010 Link to this post

    Setting a custom skin on a datapager integrated into a radlistview control fails when the control renders the RadDataPagerButtonFields since it can't find any custom skin for the controls.

    <telerik:RadDataPager ID="ListViewPager" EnableEmbeddedSkins="false" Skin="Custom" ...> 
    <telerik:RadDataPagerButtonField FieldType="FirstPrev" /> 
    <telerik:RadDataPagerButtonField FieldType="Numeric" /> ... 

    Is there a way to control the pagers skin/css without the RadDataPagerButtonFields underlying controls inherits the custom skin of the datapager?

    Best regrads
    Søren Denmark
  2. Dimo
    Dimo avatar
    8485 posts

    Posted 11 Jan 2010 Link to this post

    Hi Skov,

    When using a particular skin for the RadDataPager, it is applied by all its fields.

    Here is the list of RadDataPager CSS classes. If you want to apply some styles to the pager first / last / next / previous buttons, use borders and background colors / images.

    Sincerely yours,
    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.
  3. Eliza Sahoo
    Eliza Sahoo avatar
    29 posts
    Member since:
    Jan 2010

    Posted 25 Jan 2010 Link to this post

    A tip regarding add tooltip to datapager  

    ASP.NET pager doesn't provide any direct support for adding tooltip to its different buttons . But there are some work arounds through which you can provide tooltips to ASP.NET data pager.

    The structure of a simple data pager is as follows:


    <asp:DataPager ID="dpPager" runat="server" PagedControlID="lvCourses"PageSize="5"
    <asp:NextPreviousPagerField ButtonCssClass="command " FirstPageText="«"PreviousPageText="‹"
    RenderDisabledButtonsAsLabels="true" ShowFirstPageButton="true"ShowPreviousPageButton="true"
    ShowLastPageButton="false" ShowNextPageButton="false" />
    <asp:NumericPagerField ButtonCount="5" NumericButtonCssClass="command middleButtons" CurrentPageLabelCssClass="current"
    NextPreviousButtonCssClass="command" />
    <asp:NextPreviousPagerField ButtonCssClass="command " LastPageText="»"NextPageText="›"
    RenderDisabledButtonsAsLabels="true" ShowFirstPageButton="false"ShowPreviousPageButton="false"
    ShowLastPageButton="true" ShowNextPageButton="true" />

    But How ever it provides CSS classes for all set of buttons. And in the page it is rendered as simple span and anchor link. If we are giving some unique class to all buttons present in the data pager and through javascript we can retrive the elements and we can assign Tool Tip to them.

    Here is the sample code of javascript and data pager.

    Data Pager:
    <asp:DataPager ID="dpPager" runat="server"PagedControlID="lvCourses" PageSize="5"
    <asp:NextPreviousPagerField ButtonCssClass="command firstPrevious" FirstPageText="«" PreviousPageText="‹"
    RenderDisabledButtonsAsLabels="true"ShowFirstPageButton="true" ShowPreviousPageButton="true"
    ShowLastPageButton="false" ShowNextPageButton="false" />
    <asp:NumericPagerField ButtonCount="5"NumericButtonCssClass="command"CurrentPageLabelCssClass="current"
    NextPreviousButtonCssClass="command middleButtons" />
    <asp:NextPreviousPagerField ButtonCssClass="command lastNext"LastPageText="»" NextPageText="›"
    RenderDisabledButtonsAsLabels="true"ShowFirstPageButton="false" ShowPreviousPageButton="false"
    ShowLastPageButton="true" ShowNextPageButton="true" />

    // For First and previous buttons
    var fastPrevious = new Array;
    fastPrevious = $('.firstPrevious');
    $(fastPrevious[0]).attr('title''First page');
    $(fastPrevious[1]).attr('title''Previous page');

    // For next and Last Buttons
    var lastNext = new Array;
    lastNext = $('.lastNext');
    $(lastNext[0]).attr('title''Next page');
    $(lastNext[1]).attr('title''Last page');

    // For Next or previous set page buttons.
    var middleButtons = new Array;
    middleButtons = $('.middleButtons');
    var buttonLength = middleButtons.length;
    for (var i = 0; i < buttonLength; i++)
    $(middleButtons[i]).attr('title''Next Previous set of pages');

    Hope you find it useful
  4. Skov
    Skov avatar
    3 posts
    Member since:
    Jan 2005

    Posted 25 Jan 2010 Link to this post

    Hi Eliza

    Great work and tnx :-)

    Best Regards

  5. Eliza Sahoo
    Eliza Sahoo avatar
    29 posts
    Member since:
    Jan 2010

    Posted 26 Jan 2010 Link to this post

    You are welcome :)

Back to Top