Saturday, October 13

How to bind second Gridview with respect to first GridView

Introduction:-

                  Here I have explained RowEditing,RowUpdating,RowDeleting and RowCommand Events of gridview in asp.net.

Description:-


In previous post I have explained how to bind gridview by selecting a row from another gridview where data retrieves from database but in this example I will explain the same post with different approach without using database.
Here I have created two classes and using list collection binding two gridview.First it wil bind one gridview and by choosing any row data it will bind the another gridview having same record.

Here I am going to provide an example with source code, take a look. 

 Here I have taken two gridview as customer and order



Customer & Order Grids



Here is my source Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Gridview.aspx.cs" Inherits="Gridview" %>
<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>
            1st GridView:-</h1>
        <asp:GridView Width="76%" AllowPaging="True" ID="gvCustomers" runat="server" ShowHeader="true"
            AutoGenerateColumns="false" OnRowCommand="gvCustomers_RowCommand">
            <Columns>
                <asp:TemplateField HeaderText="CustomerID:" ItemStyle-Width="20px">
                    <ItemTemplate>
                        <asp:LinkButton ID="MyControlImage" runat="server" CommandName="View" CommandArgument='<%#Eval("CustomerID")%>'
                            Text='<%#Eval("CustomerID")%>'></asp:LinkButton>
                        <div id="MyControlDiv" runat="server" style="position: absolute; display: none; background-color: Yellow;
                            border: 1px solid black; padding: 3px;">
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Company Name" DataField="CompanyName" ItemStyle-Width="20px" />
                <asp:BoundField HeaderText="TotalOrders" DataField="TotalOrders" ItemStyle-Width="20px" />
            </Columns>
        </asp:GridView>
        <h1>
            2nd GridView:-</h1>
    </div>
    <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass="grid"
        EnableViewState="false" ShowHeader="true">
        <RowStyle CssClass="row" />
        <AlternatingRowStyle CssClass="altrow" />
        <Columns>
            <asp:TemplateField ItemStyle-CssClass="rownum">
                <ItemTemplate>
                    <%# Container.DataItemIndex + 1 %>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="OrderID" HeaderText="Order ID" ItemStyle-Width="80px" />
            <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ItemStyle-HorizontalAlign="Right"
                ItemStyle-Width="50px" />
            <asp:BoundField DataField="OrderDate" DataFormatString="{0:MM/dd/yyyy}" HeaderText="Date Ordered"
                ItemStyle-Width="100px" />
            <asp:BoundField DataField="RequiredDate" DataFormatString="{0:MM/dd/yyyy}" HeaderText="Date Required"
                ItemStyle-Width="110px" />
            <asp:BoundField DataField="Freight" DataFormatString="{0:c}" HeaderText="Freight"
                ItemStyle-HorizontalAlign="Right" ItemStyle-Width="50px" />
            <asp:BoundField DataField="ShippedDate" DataFormatString="{0:MM/dd/yyyy}" HeaderText="Date Shipped"
                ItemStyle-Width="100px" />
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>



Here is my Code Behind:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Gridview : System.Web.UI.Page
{
    class Product
    {
        public string Name { get; set; }
        public int CategoryID { get; set; }
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string TotalOrders { get; set; }
    }
    class Category
    {
        public string CustomerID { get; set; }
        public string Name { get; set; }
        public int ID { get; set; }
        public string OrderID { get; set; }
        public string OrderDate { get; set; }
        public string RequiredDate { get; set; }
        public string Freight { get; set; }
        public string ShippedDate { get; set; }
    }
    // Specify the first data source.
    List<Category>categories = new List<Category>()
        {
            new Category(){Name="Beverages", ID=001,OrderID="s1",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish",CustomerID="shiba1",ShippedDate="11/12/2011"},
            new Category(){ Name="Condiments", ID=002,OrderID="s2",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish2",CustomerID="shiba2",ShippedDate="11/12/2011"},
            new Category(){ Name="Vegetables", ID=003,OrderID="s3",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish3",CustomerID="shiba3",ShippedDate="11/12/2011"},
            new Category() {  Name="Grains", ID=004,OrderID="s4",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish4",CustomerID="shiba4",ShippedDate="11/12/2011"},
            new Category() {  Name="Fruit", ID=005,OrderID="s5",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish5",CustomerID="shiba5",ShippedDate="11/12/2011"}           
        };
    // Specify the second data source.
    List<Product>products = new List<Product>()
       {
          new Product{Name="Cola",  CategoryID=001,CustomerID="shiba1",CompanyName="swash convergence",TotalOrders="210"},
          new Product{Name="Tea",  CategoryID=001,CustomerID="shiba2",CompanyName="swash convergence",TotalOrders="212"},
          new Product{Name="Mustard", CategoryID=002,CustomerID="shiba3",CompanyName="swash convergence",TotalOrders="213"},
          new Product{Name="Pickles", CategoryID=002,CustomerID="shiba4",CompanyName="swash convergence",TotalOrders="214"},
          new Product{Name="Carrots", CategoryID=003,CustomerID="shiba5",CompanyName="swash convergence",TotalOrders="215"},
          new Product{Name="Bok Choy", CategoryID=003,CustomerID="shiba6",CompanyName="swash convergence",TotalOrders="216"},
          new Product{Name="Peaches", CategoryID=005,CustomerID="shiba7",CompanyName="swash convergence",TotalOrders="217"},
          new Product{Name="Melons", CategoryID=005,CustomerID="shiba8",CompanyName="swash convergence",TotalOrders="218"},
        };
    protected void Page_Load(object sender, EventArgs e)
    {
        gvCustomers.DataSource = products;
        gvCustomers.DataBind();
    }
    protected void gvCustomers_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "View")
        {
            gvOrders.DataSource = from n in categories
                                  where n.CustomerID == e.CommandArgument.ToString()
                                  select n;
            gvOrders.DataBind();
        }
    }
}

After Running It will Display as:-

Instant Running View


After click on the first row it will display as below:-

Second Grid View


Hope you will like this article.

Keep reading my posts……

 

Thanks Shibashish Mohanty


1 comment:

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty