Populate (Bind) GridView based on another GridView Header Click using C# and VB.Net in ASP.Net

Hi mahjoubi,

Check this example. Now please take its reference and correct your code.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
    <asp:View ID="ViewMouvement1" runat="server">
        <asp:GridView ID="GridView5" runat="server" CellPadding="4" ForeColor="#333333"
            OnRowDataBound="OnRowDataBound">
            <AlternatingRowStyle BackColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F5F7FB" />
            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
            <SortedDescendingCellStyle BackColor="#E9EBEF" />
            <SortedDescendingHeaderStyle BackColor="#4870BE" />
        </asp:GridView>
        <input type="hidden" id="HeadertTxt" name="HeadertTxt" value="" />
        <asp:Button ID="btnGet" Text="Get" runat="server" OnClick="OnGet" Style="display: none;" />
        <script type="text/javascript">
            function GetHeaderText(txt) {
                document.getElementById("HeadertTxt").value = txt;
                document.getElementById('<%=btnGet.ClientID%>').click();
            }
        </script>
    </asp:View>
    <asp:View ID="ViewFactureDetail" runat="server">
        <asp:Panel ID="Panel5" runat="server" Height="731px" ScrollBars="Vertical" Width="100%">
            <asp:GridView ID="GridView10" runat="server" Height="100%" BackColor="White"
                BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3"
                GridLines="Vertical">
                <AlternatingRowStyle BackColor="#DCDCDC" />
                <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
                <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                <RowStyle HorizontalAlign="Left" VerticalAlign="Middle" BackColor="#EEEEEE" ForeColor="Black" />
                <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                <SortedAscendingHeaderStyle BackColor="#0000A9" />
                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                <SortedDescendingHeaderStyle BackColor="#000065" />
            </asp:GridView>
            <br />
            <asp:Button ID="Button4" runat="server" Text="Return" OnClick="OnRetrun" />
        </asp:Panel>
    </asp:View>
</asp:MultiView>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string query = "SELECT * FROM Customers";
        GridView5.DataSource = GetData(query);
        GridView5.DataBind();
    }
}

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        foreach (DataControlFieldCell cell in e.Row.Cells)
        {
            cell.Attributes.Add("onclick", "javascript: GetHeaderText('" + cell.Text + "')");
            cell.Attributes.Add("style", "cursor: pointer;");
        }
    }
}

protected void OnGet(object sender, EventArgs e)
{
    string columnName = Request.Form["HeadertTxt"];
    string query = string.Format("SELECT {0} FROM Customers", columnName);
    GridView10.DataSource = GetData(query);
    GridView10.DataBind();
    MultiView1.ActiveViewIndex = 1;
}

protected void OnRetrun(object sender, EventArgs e)
{
    MultiView1.ActiveViewIndex = 0;
}

private DataTable GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        SqlCommand cmd = new SqlCommand(query);
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);

                return dt;
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim query As String = "SELECT * FROM Customers"
        GridView5.DataSource = GetData(query)
        GridView5.DataBind()
    End If
End Sub

Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.Header Then
        For Each cell As DataControlFieldCell In e.Row.Cells
            cell.Attributes.Add("onclick", "javascript: GetHeaderText('" & cell.Text & "')")
            cell.Attributes.Add("style", "cursor: pointer;")
        Next
    End If
End Sub

Protected Sub OnGet(ByVal sender As Object, ByVal e As EventArgs)
    Dim columnName As String = Request.Form("HeadertTxt")
    Dim query As String = String.Format("SELECT {0} FROM Customers", columnName)
    GridView10.DataSource = GetData(query)
    GridView10.DataBind()
    MultiView1.ActiveViewIndex = 1
End Sub

Protected Sub OnRetrun(ByVal sender As Object, ByVal e As EventArgs)
    MultiView1.ActiveViewIndex = 0
End Sub

Private Function GetData(ByVal query As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Dim cmd As SqlCommand = New SqlCommand(query)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

Screenshot