Using Slider show capture(using html2canvas) the gridview and storing in canvas using asp.net

See more:

C#

C#4.0

ASP.NET4

Hi Developers,

In My Web application,

I am using sliding for my multiple grid views.
later I need to export it to PPT.

For this I am using this sample code in aspx:

<script type="text/javascript" src="Styles/html2canvas.js"></script>
<script type="text/javascript">
        function Fun1() {
        var canvas1 = document.getElementById('myCanvas');
        html2canvas(document.getElementById('GridView1'), {
            onrendered: function (canvas1) {
                document.body.appendChild(canvas1);
                var image = canvas1.toDataURL("image/png");
                image = image.replace('data:image/png;base64,', '');
                document.getElementById('hdnResultValue1').value = image;
            }
        });
    }
    function Fun2() {
        var canvas2 = document.getElementById('myCanvas1');
        html2canvas(document.getElementById('GridView2'), {
            onrendered: function (canvas2) {
                document.body.appendChild(canvas2);
                var image1 = canvas2.toDataURL("image/png");
                image1 = image1.replace('data:image/png;base64,', '');
                document.getElementById('hdnResultValue1').value = image1;
            }
        });
    }
                $(function () {
                var currentPosition = 0;
                var slideWidth = 1260;
                var slides = $('.slide');
                var numberOfSlides = slides.length;
                //var slideShowInterval;
                var speed = 3000;
                //Assign a timer, so it will run periodically
             
                slides.wrapAll('<div id="slidesHolder"></div>')
                slides.css({ 'float': 'left'
                });
                //set #slidesHolder width equal to the total width of all the slides
                $('#slidesHolder').css('width', slideWidth * numberOfSlides);
                $('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
                .append('<span class="nav" id="rightNav">Move Right</span>');
                manageNav(currentPosition);
                //tell the buttons what to do when clicked
                $('.nav').bind('click', function () {
                //determine new position
                currentPosition = ($(this).attr('id') == 'rightNav') ? currentPosition + 1 : currentPosition - 1;
                //hide/show controls
                manageNav(currentPosition);
                
                moveSlide();
                });
                function manageNav(position) {
                if (position == 0) {
                $('#leftNav').hide()
                }
                else {
                $('#leftNav').show()
                }
                if (position == numberOfSlides - 1) {
                $('#rightNav').hide()
                }
                else { $('#rightNav').show() }
                }
                function changePosition() {
                if (currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
                manageNav(currentPosition);
                }
                else {
                currentPosition++;
                manageNav(currentPosition);
                }
                moveSlide();
                }
                function moveSlide() {
                $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
                };
                });
</script>
<style type="text/css">

#slideshow {
position: relative;
}
#slideshow #slideshowWindow {
height: 540px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 1260px;
}
#slideshow #slideshowWindow .slide {
height: 540px;
margin: 0;
padding: 0;
position: relative;
width: 1260px;
}
#slideshow #slideshowWindow .slide .slideText {
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
.nav
{
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav
{
top:290px;
left:1px;
width:94px;
height:34px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/previous.png);
background-repeat:no-repeat;
z-index:999;
}
#rightNav
{
top:290px;
left:1210px;
width:53px;
height:26px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/next.png);
background-repeat:no-repeat;
z-index:999;
}
</style>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" 
    oncheckedchanged="CheckBox1_CheckedChanged" />

    <canvas id="myCanvas"  runat="server" width="200" height="200" hidden="hidden"></canvas>
    <asp:HiddenField ID="hdnResultValue" Value="Hie." runat="server"/>
    
    <canvas id="myCanvas1"  runat="server" width="200" height="200" hidden="hidden"></canvas>
    <asp:HiddenField ID="hdnResultValue1" Value="Hie." runat="server"/>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<asp:GridView ID="GridView1" runat="server" 
        CellPadding="4" ForeColor="#333333" 
                        GridLines="Both" >
</div>
<div class="slide">
<asp:GridView ID="GridView2" runat="server" 
        CellPadding="4" ForeColor="#333333" 
                        GridLines="Both" >
    
</div>
</div>
</div>
</div>
</div>
 </form>
</body>

And my C# code is:

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable("RunnerUp");
            DataColumn dc1 = new DataColumn("Name", typeof(string));
            DataColumn dc2 = new DataColumn("Points", typeof(int));
            dt.Columns.Add(dc1);
            dt.Columns.Add(dc2);
            DataRow dr1 = dt.NewRow();
            dr1[0] = "Vulpes";
            dr1[1] = 235;
            DataRow dr2 = dt.NewRow();
            dr2[0] = "SP Nayak";
            dr2[1] = 135;
            DataRow dr3 = dt.NewRow();
            dr3[0] = "Krishna";
            dr3[1] = 40;
            dt.Rows.Add(dr1);
            dt.Rows.Add(dr2);
            dt.Rows.Add(dr3);
            GridView1.DataSource = dt;
            GridView1.DataBind();
GridView2.DataSource = dt;
            GridView2.DataBind();
        }
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "jhfgdd", "Fun1();", true);
            Page.ClientScript.RegisterStartupScript(this.GetType(), "jhfgd", "Fun2();", true);
        }

Here sliding working fine.
Here I getting two canvas results, but first grid canvas getting correctly, second grid not getting full width image.

Its because of var slideWidth = 1260; if it is 1260 I am not getting second grid full width, if I change this to 0, I am getting both the grids to canvas fine but sliding won't work.

How can I achieve this width issue.