Grid View Data Binding guide, UI Control for ASP.NET AJAX, C#, VB.NET, bind data from dataset, datatable, array, xml

GridView Data Binding in ASP.NET AJAX

Home > How to > Grid Data Binding

Kettic ASP.NET Ajax Data GridView provides the support of showing hierarchical data to an arbitrary number of levels and establishing the hierarchical at either run time or design time. The web GridView control allows users generate hierarchical data automatically at runtime as well as create hierarchical data in C# code for ASP.NET Web Forms application. When users of the GridView Control do not want add the entire dataset and hierarchy into your C# ASP.NET WebForms application, we may need to bind the C# GridView control to data source using C# code manually.

To bind data to Grid control, just set DataSource property. And the Data source can be DataSet, DataTable, ArrayList, XML Data Source, XML file and so on. Please see free online demo for Gird Data Binding.

Simple Data Binding

In this tutorial, we will use sql database for example to show you how to insert data to asp.net grid view. In most commonly way, developers always like adding data in the Page_Load event. Before showing the asp.net gridview to the html page, you need bind data to the gridview, so that the grid can show this data.
All the binding operations are done in the server side, the data will be bound dynamically to the asp.net gridview. Please follow the C# demo code:


private void LoadData()
{
    SqlConnection sqlConn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
    SqlDataAdapter sqlDataAdapter = new SqlDataAdapter();
    DataSet ds = new DataSet();
    sqlConn.Open();
    try
    {
        sqlDataAdapter.SelectCommand = new SqlCommand("SELECT * FROM Prudocts", sqlConn);
        sqlDataAdapter.Fill(ds, "Prudocts");
    }
    finally
    {
        sqlConn.Close();
    }
    KaxGrid1.DataSource = ds.Tables["Prudocts"];
}
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadData();
        KaxGrid1.DataBind();
    }
}

Advanced Data Binding

In some other case, while the asp.net grid view showing in the web page, you maybe make some operation and changing to this grid view, like sorting or grouping, so the showing logic is changed. If the data source is not changed following the showing logic, the web grid view will not behave correctly. So you need rebind the data source after the operation is done, so that the grid view will redraw dynamically. And KAX.Grid provide NeedDataSource event to do this for you. When the operation is done, the javascript will call this event by ajax, then the event in the asp.net grid control will be handled, so the rebind data method will be implement.
Now, letâs see the operation that need rebind data source when it is done:

After Page_Load event
When a paging operation done
When a sorting operation done
When a filtering operation done
When a grouping operation done
When a editing(inserting, updating and deleting) operation done

Here we provide an example of binding data in NeedDataSource event.
C# code:


protected void KaxGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
    SqlConnection sqlConn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
    SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Products", sqlConn);
    DataTable dt = new DataTable();
    sqlConn.Open();
    try
    {
        adapter.Fill(dt);
    }
    finally
    {
        sqlConn.Close();
    }
    KaxGrid1.DataSource = dt;
}