Click here to Skip to main content
15,936,499 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have used the following code to copy a table from a server control-'PivotGridDiv' to a div - 'copymygrid', but some how it doesn't work. Could someone please Analyse it, tell me where am I going wrong.

JavaScript
<%--Code to  goto new page on scroll when all option is selected--%>
<script type="text/javascript">
var x = 1;
$(document).ready(function ()
{
   if ($('#ContentPlaceHolder1_ddlPageSize').find('option:selected').text().toString() == '15'.toString())
   {
      copycontent();
      $('#PivotGridDiv').bind('scroll', function ()
      {
         if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)
         {
            ScrollBottom();
         }
      });
      $('#CopyMyGrid').bind('scroll', function ()
      {
         if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)
         {
            ScrollBottom();
         }
      });
   }
});
//Required Functions for ScrollBottom and appending result to data
function ScrollBottom()
{
   copycontent();
   ClickNext();
}
function ClickNext()
{
   pivotGrid_PagerClick('ctl00_ContentPlaceHolder1_ASPxPivotGrid1', this, 'PBN'); // perform click programatically on the control and load new records
}
function copycontent()
{
   var source = document.getElementById
"ctl00_ContentPlaceHolder1_ASPxPivotGrid1_HZST").rows;
   $("#CopyMyGrid").append('<table>').append(source).append('</table>');
   var hasFocus = $('#CopyMyGrid').is(':focus');
   if (hasFocus && x==1)
   {
      $("#CopyTable").css('z-index', 999);
      x = 0;
   }
}
</script>
<%--Code Ends here--%>
Posted
Updated 30-Jun-14 8:51am
v2
Comments
Brian A Stephens 30-Jun-14 13:20pm    
Can you show us the relevant HTML? What error/result did you get?
ganesh.dks 30-Jun-14 23:27pm    
I am using a server control to fetch and show data from db, so the Relevant Html contains
:-
<html>
<body>
<div id="CopyMyGrid">
</div>
<asp:updatePanel>
<div id="PivotGridDiv">
<PivotGrid id="pv" ........ atributes>
<elements>
Rendered as HTML Table (ctl00_ContentPlaceHolder1_ASPxPivotGrid1_HZST)
</PivotGrid>
</div>

</body>
</html>

Please don't get annoyed as I have not given the complete code but it contains a lot of elements which are rendered as the given HTML table. The only element I cannot show in the html is the "pivotGrid_PagerClick('ctl00_ContentPlaceHolder1_ASPxPivotGrid1', this, 'PBN');" because it is generated dynamically. Its a next button which fetches the next set of records.
So what I am trying to do is click the next button programmatically and then load those records into the new COpMyGrid div on scroll. This is inevitable because the control does some inherent data manipulation and the desired output is only obtained from it.

I need to bind the JQuery events on callbacks or partial postbacks but to the div again. It is not showing any error but nothing happens even when I scroll. One more issue is to know whether I can bind the scroll to a div which has the control behind my current div and get the data from it and load it to the div in front.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900