connectseekers.com

Friday, 15 April 2016

Bind GridView To DataTable and Convert GridView Data Into Chart In Asp.Bet Using jQuery

4/15/2016 - By Pranav Singh 0


This article will show you how you can bind a gridview by data table and how you can convert the gridview data into the chart graph using jQuery in asp.net.

Some of my previous articles are as follows:


So for this article first we will create a new asp.net application and add a page. In this page add the below mention library into the header of the page.


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharttable.org/master/jquery.highchartTable-min.js"></script>


In this page we will add a gridview control into the page.

 
<asp:GridView ID="GridView1" runat="server" CssClass="highchart" data-graph-container-before="1"
            data-graph-type="line" Style="display: none" data-graph-datalabels-enabled="1"
            data-graph-datalabels-formatter="foo.myAwesomeCallback">
        </asp:GridView>  


Here I have added Style="display: none" for making the gridview invisible. In above code I have added some more tag to retrieve the gridview data and transform it into graph. Now add the below jquery code into the header of the page.

   <script language="javascript">
        foo = {
            myAwesomeCallback: function (value) {
                return value + '$'
            }
        }

        $(document).ready(function () {
            $('table#<%=GridView1.ClientID %>').highchartTable();
        });

    </script>

Here is the complete code of page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Bind GridView To DataTable and Convert GridView Data Into Chart In Asp.Bet Using jQuery
    </title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharttable.org/master/jquery.highchartTable-min.js"></script>
    <script language="javascript">
        foo = {
            myAwesomeCallback: function (value) {
                return value + '$'
            }
        }

        $(document).ready(function () {
            $('table#<%=GridView1.ClientID %>').highchartTable();
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" CssClass="highchart" data-graph-container-before="1"
            data-graph-type="line" Style="display: none" data-graph-datalabels-enabled="1"
            data-graph-datalabels-formatter="foo.myAwesomeCallback">
        </asp:GridView>  
    </form>
</body>
</html>

Now  here is the code to bind the grid view to data table.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace WebApplication4
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt = GetDataToBind();
            this.GridView1.DataBound += (object o, EventArgs ev) =>
            {
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
            };
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        public DataTable GetDataToBind()
        {
            DataTable dt = new DataTable("SaleData");
            dt.Columns.Add(new DataColumn("Month", typeof(string)));
            dt.Columns.Add(new DataColumn("Sale", typeof(string)));

            DataRow dr1 = dt.NewRow();
            dr1["Month"] = "Group 1";
            dr1["Sale"] = "10000";
            dt.Rows.Add(dr1);

            DataRow dr2 = dt.NewRow();
            dr2["Month"] = "Group 2";
            dr2["Sale"] = "34300";
            dt.Rows.Add(dr2);

            DataRow dr3 = dt.NewRow();
            dr3["Month"] = "Group 3";
            dr3["Sale"] = "23400";
            dt.Rows.Add(dr3);

            DataRow dr4 = dt.NewRow();
            dr4["Month"] = "Group 4";
            dr4["Sale"] = "30040";
            dt.Rows.Add(dr4);

            DataRow dr5 = dt.NewRow();
            dr5["Month"] = "Group 5";
            dr5["Sale"] = "3422";
            dt.Rows.Add(dr5);

            return dt;
        }
    }
}

Now in above code check the below mention code.

            this.GridView1.DataBound += (object o, EventArgs ev) =>
            {
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
            };

In this I have added tbody and thead tag to the gridview. Now we have done run the application to check the output.



About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top