Search code examples
javascriptjquery.netfooterradgrid

How do I select the foot in numeric paging? RadGrid

I currently have a js function that binds onchange to onbeforeunload or a confirmbox only if there are changes on the grid.

I am trying to select the footer paging anchors so that it doesn't trigger for confirm or onbeforeunload. The user should select the numeric paging regardless if there are changes or not on the grid.

There is no ID or class name on the anchors so I'm having trouble accessing it.

Thanks in advance.

RadGrid properties:

             <telerik:RadGrid 
             runat="server" 
             ID="DataGridFooItems" 
             AllowSorting="true" 
             AutoGenerateColumns="false" 
             EnableViewState="True" 
             GridLines="Vertical" 
             AllowPaging="True" 
             PagerStyle-Mode="NumericPages">

             <MasterTableView 
             AllowPaging="true" 
             DataKeyNames="foopersonID,fooItemID" 
             AllowAutomaticDeletes="true" 
             CommandItemDisplay="None" 
             NoMasterRecordsText="" >

This is what the .aspx generates below: 

    <TFOOT>
<TR class=rgPager>
<TD colSpan=20>
<TABLE style="WIDTH: 100%" border=0 cellSpacing=0>
<TBODY>
<TR>
<TD class="rgPagerCell NumericPages">
<DIV class="rgWrap rgNumPart">
<A class=rgCurrentPage onclick="returnfalse;"href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl02','')"><SPAN>1</SPAN></A><A 
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl04','')"><SPAN>2</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl06','')"><SPAN>3</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl08','')"><SPAN>4</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl10','')"><SPAN>5</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl12','')"><SPAN>6</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl14','')"><SPAN>7</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl16','')"><SPAN>8</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl18','')"><SPAN>9</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl20','')"><SPAN>10</SPAN></A><A
href="javascript:__doPostBack('ctl00$ph$FOO$rgItems$ctl00$ctl03$ctl01$ctl22','')"><SPAN>...</SPAN></A> 
</DIV></TD></TR></TBODY></TABLE></TD></TR></TFOOT>

UPDATE: Answer!

Found it! with some research and tweaking of a similar Telerik Solution.

I composed this:

  1. I declared a variable which selected a class.
  2. Then I searched through the object for all the anchors.
  3. Afterwards, I used a loop through anchors if it is not on the current page(should not have a click event, since the user is already on the page.) && if the anchor has a href of __doPostback.
  4. Then i set the attribute onclick event to a confirmation. This step wrapped the __doPostback.

Source: http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-paging---pageindexchanged-event-issue.aspx

function preventPromptOnFooter() {

            var pagerCell = $('[class="rgPagerCell NumericPages"]')
            var anchors = $(pagerCell).find('a');
            for (var i = 0; i < anchors.length; i++) {
                if (anchors[i].className != "rgCurrentPage" && anchors[i].href.indexOf("javascript:__doPostBack") > -1) {
                    var clickScript = anchors[i].attributes["onclick"].value;
                    anchors[i].onclick = disableOnbeforeUnloadForFooter;
                }
            }



            function disableOnbeforeUnloadForFooter() {
                window.onbeforeunload = null;
            }
        }
Solution

  • Found it! with some research and tweaking of a similar Telerik Solution.

    I composed this:

    1. I declared a variable which selected a class.
    2. Then I searched through the object for all the anchors. anchors
    3. Afterwards, I used a loop through anchors if it is not on the current page(should not have a click event, since the user is already on the page.) && if the anchor has a href of __doPostback.
      1. If step (3.) is true, it set the attribute onclick event to a confirmation. This step wrapped the __doPostback.

    Source: http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-paging---pageindexchanged-event-issue.aspx

    function preventPromptOnFooter() {

            var pagerCell = $('[class="rgPagerCell NumericPages"]')
            var anchors = $(pagerCell).find('a');
            for (var i = 0; i < anchors.length; i++) {
                if (anchors[i].className != "rgCurrentPage" && anchors[i].href.indexOf("javascript:__doPostBack") > -1) {
                    var clickScript = anchors[i].attributes["onclick"].value;
                    anchors[i].onclick = disableOnbeforeUnloadForFooter;
                }
            }



            function disableOnbeforeUnloadForFooter() {
                window.onbeforeunload = null;
            }
        }