Home > ASP.Net, Javascript > Create Gridview Lockup

Create Gridview Lockup


Hi all,

try this example to Create Gridview Lockup

in this example i’m using Northwind Database

1) Open VS 2005 and create a new WebSite and add new Page called “Default.aspx” and from ToolBox add Gridview Control and Bind it to Categories Table using SqlDataSource control so our page will be like this

    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
            DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" ForeColor="#333333">
            <Columns>
                <asp:TemplateField HeaderText="CategoryName" SortExpression="CategoryName">
                    <ItemTemplate>
                        <asp:TextBox ID="txt_Category" runat="server" Text='<%# Bind("CategoryName") %>' ></asp:TextBox>
                        <asp:LinkButton ID="LinkButton1" runat="server">list</asp:LinkButton><br />
                        <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("CategoryID") %>'  />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <RowStyle BackColor="#EFF3FB" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
    </div>

2) Now We want when user Click on HyperLink inside Gridview open popup window which has a Gridview Bindable to all Categories from Northwind database and when user select any Category from that Gridview pass CategoryName and CategoryID to the Gridview in Parent page which is “Default.aspx” so now we are going to add some Jaavscript code in Default page to Open Popup page so the javascipt code will be :

<script type="text/javascript">
        function OpenPopup(txtField, hdnField) {
            window.open("popup.aspx?TxtField=" + txtField + "&HdnField=" + hdnField,
                    "List", "scrollbars=no,resizable=no,width=400,height=280");
            return false;
        }
    </script>

as we see the popup page will be popup.aspx so we have to create a new web page and call it “popup.aspx”

3)  In code behind of Default.aspx we need to write some code  to open that popup window and pass the ID of TextBox (which contain CategoryName) and ID of hiddenField (which is bindable to CategoryID) so in RowDataBound Event of Gridview we will add this code

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            TextBox txt_Category = (TextBox)e.Row.FindControl("txt_Category");
            HiddenField HiddenField1 = (HiddenField)e.Row.FindControl("HiddenField1");
            LinkButton LinkButton1 = (LinkButton)e.Row.FindControl("LinkButton1");
            if (txt_Category != null && HiddenField1 != null && LinkButton1 != null)
            {
                LinkButton1.Attributes.Add("onclick", "javascript:OpenPopup('" + txt_Category.ClientID + "','" + HiddenField1.ClientID + "');return false;");
            }
        }
    }

4) In popup.aspx page we will add Gridview Control and Bind it to Categories Table using SqlDataSource control  and two hiddenField control which we will save ID of TextBox and HiddenField from the parent page so our page will be like this :-

    <div>
        <asp:HiddenField ID="HTextControlName" runat="server" /> 
        <asp:HiddenField ID="HHiddenControlname" runat="server" />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
            DataSourceID="SqlDataSource1" CellPadding="4" ForeColor="#333333" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" InsertVisible="False"
                    ReadOnly="True" SortExpression="CategoryID" />
                <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server">Select</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <RowStyle BackColor="#EFF3FB" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
   
    </div>

no we want when user Click On Select Link in Gridview to pass the Value of CategoryName and CategoryID from Child window to Parent Page so in popup.aspx we will add this Javascript Code

    <script language="javascript" type="text/javascript">
    function GetRowValue(val, id, txtField, hdnField)  
    {
        window.opener.document.getElementById(txtField).value = val;
        window.opener.document.getElementById(hdnField).value = id;  
        window.close();  
    }  
    </script>

and In Code behind :-


protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Request.QueryString["TxtField"] != null &&
                    Request.QueryString["HdnField"] != null)
            {
                HTextControlName.Value = Request.QueryString["TxtField"];
                HHiddenControlname.Value = Request.QueryString["HdnField"];
            }
        }
    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if ((e.Row.RowType == DataControlRowType.DataRow))
        {
            ((LinkButton)e.Row.FindControl("LinkButton1")).Attributes.Add("onclick", "javascript:GetRowValue('"
                + e.Row.Cells[1].Text + "','" + e.Row.Cells[0].Text + "','" + HTextControlName.Value
                + "','" + HHiddenControlname.Value + "')");
        }
    }

now run the website and from Gridview in Default.aspx click on List link you will find a popup window open and from that popup click on select link in Gridview you will find the Gridview in Default.aspx has the new value which is selected from popup window

Hope this helps

Good Luck 🙂

Advertisements
Categories: ASP.Net, Javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: