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

Skin of Datapager Fields in RadListView

4 Answers 100 Views

ListView

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

4 Answers, 1 is accepted

answered on 25 Jan 2010, 07:33 AM

A tip regarding add tooltip to asp.net 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"
OnPreRender="dpPager_PreRender">
<Fields>
<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" />
</Fields>
</asp:DataPager>

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"
OnPreRender="dpPager_PreRender">
<Fields>
<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" />
</Fields>
</asp:DataPager>

Javascript
.................
$(document).ready(function()
{
// 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

thanks

Eliza

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Skin of Datapager Fields in RadListView

4 Answers, 1 is accepted