Nesting A Panel Within a GridView

Question

1.00/5 (1 vote)

See more:

I need to show data associated with a record of a gridview.

I tried to employ the technique used in "http://www.aspsnippets.com/Articles/Nested-GridView-Example-in-ASPNet-using-C-and-VBNet.aspx" replacing the nested gridview with a label, to no avail:

ASP.NET

<table id="tblShiftSumry">
                <tr>
                    <td class="summaryCost">
                        <asp:GridView ID="gvShift" runat="server" AutoGenerateColumns="False" Height="95px"
                            Style="margin-right: 1px" Width="790px" OnRowDataBound="OnRowDataBound">
                            <columns>
                                <asp:TemplateField HeaderText="Frequency">
                                    <itemtemplate>
                                        <img alt="" style="cursor: pointer" src="Resources/Images/plus.png" />
                                        <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                                            <asp:Label ID="lblMsg" runat="server" Text="Testing 1...2...3">
                                        
                                    </itemtemplate>
                                    <HeaderStyle Width="15px" />
                                
                                <asp:TemplateField HeaderText="Shift #">
                                    <itemtemplate>
                                        <asp:TextBox ID="txtShftNo" runat="server" ReadOnly="True" 
                                        Text='<%# DataBinder.Eval(Container.DataItem, "Shift #") %>'
                                        Width="<%# 25 %>" CssClass="summaryCost">
                                    </itemtemplate>
                                    <HeaderStyle Width="75px" />
                                


In the <head> section, I placed:
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript">
    $("[src*=plus]").live("click", function () {
        $(this).closest("tr").after("" + $(this).next().html() + "")
        $(this).attr("src", "~/resources/images/minus.png");
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "~/resources/images/edit.png");
        $(this).closest("tr").next().remove();
    });
</script>

In the code behind section, I get an error that pnlOrders does not exist in the current context:

C#

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
   {
       if (e.Row.RowType == DataControlRowType.DataRow)
       {
           pnlOrders.visible = true;
       }
   }

Instead of the label, I need to nest a panel (which will contain a table, radio button, text box and check box) within the gridview. That data will be shown/hidden when the user clicks on the "plus" or "minus" sign in the first column.

Posted 31-Mar-13 17:50pm

FabeCode

Updated 31-Mar-13 19:05pm

Aarti Meswania

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 31-Mar-13 23:59pm

Not a question, sorry.
—SA

FabeCode 1-Apr-13 0:02am

How do I nest a panel that will contain a table, radio button, text box and check box?

FabeCode 1-Apr-13 9:53am

This is a nesting issue. I need to have the panel appear/hide when the user clicks on the plus/minus in the first column. I tried to use the script code in conjunction with the OnRowDataBound method to accomplish this task. Thanks.

vinodkumarnie 1-Apr-13 1:32am

What so big deal in that. You just put controls you needed inside panel as normal. I click of of button find panel control and do necessary action.

FabeCode 1-Apr-13 2:33am

In the code behind, i get an error: pnlOrders does not exist. Do you have simple code example that works?

FabeCode 1-Apr-13 9:48am

Thanks for the "panel_find" code. That eliminated the error.

But how do I get the panel to appear/hide upon clicking on the plus/minus in the first column. I tried to accomplish that with the javascript.

vinodkumarnie 2-Apr-13 12:59pm

In you code Ending tab of Panel is missing. Verify it..?

vinodkumarnie 2-Apr-13 13:01pm

Also paste source code correctly. There is Gridview ending tag missing..

FabeCode 2-Apr-13 14:23pm

Here's ASPX.CS code:
using System;
using System.Drawing;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.Design;
using System.Web.Services;

public partial class Sample : System.Web.UI.Page
{
public int totrows = 0, CntShifts=0;

DataTable ShiftCnt
{
get
{
return (DataTable)ViewState["ShiftCnt"];
}
set
{
ViewState["ShiftCnt"] = value;
}
}

protected void Page_Load(object sender, EventArgs e)
{
}

private void ShiftSumry()
{
ShiftCnt = new DataTable();
ShiftCnt.Columns.Add("Shift #", typeof(string));
ShiftCnt.Columns.Add("Start", typeof(string));
ShiftCnt.Columns.Add("End", typeof(string));

for (int i = 1; i <= CntShifts; i++)
{
ShiftCnt.Rows.Add(i.ToString());

}
gvShift.DataSource = ShiftCnt;
gvShift.DataBind();
}

protected void txtNumShifts_TextChanged(object sender, EventArgs e)
{
CntShifts = Convert.ToInt16(txtNumShifts.Text);
ShiftSumry();
if (txtNumShifts.Text == "0") imgbAdd.Visible = false;
else imgbAdd.Visible = true;
}

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Panel panel_find = ((Panel)e.Row.FindControl("pnlOrders"));
panel_find.Visible = true;
;
}
}

protected void imgbAdd_Click(object sender, ImageClickEventArgs e)
{
totrows = gvShift.Rows.Count + 1;
ShiftCnt.Rows.Add(totrows.ToString());
gvShift.DataSource = ShiftCnt;
gvShift.DataBind();
txtNumShifts.Text = totrows.ToString();
}
}

vinodkumarnie 2-Apr-13 15:16pm

There some ending tags missing.. Eg: Panel, Gridview.. Plz check source code..

FabeCode 2-Apr-13 15:39pm

I could not fit the ASPX and ASPX.CS code file into the one reply. After deleting the combined reply and reducing the gridview columns, I posted each individually.

vinodkumarnie 3-Apr-13 0:32am

You are not getting my point.. Check your source code, in that Panel ending tag and gridview anding tag is missing. How can i write code for you without knowing where your panel ends. Be cool in pasting source code. Just paste exactly gridview source correctly. I will write code for you..

FabeCode 3-Apr-13 0:50am

For some reason that end tag gets erased when I paste the code.

FabeCode 3-Apr-13 0:52am

All the end tags are removed when I paste.

FabeCode 3-Apr-13 1:05am

Something weird. No tags appear between the comments.

2 solutions

Solution 1

You cann't access controls which are inside Gridview as like normal. You have do find those controls and then try to access those.

See example below.

C#

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            Panel panel_find = ((Panel)e.Row.FindControl("pnlOrders"));
            panel_find.Visible=true;
        }
    }

Note: You can access all controls which are inside Gridview by finding those as mentioned below.

Hope this works and also helps you..

Posted 31-Mar-13 20:55pm

vinodkumarnie

Comments

vinodkumarnie 1-Apr-13 23:59pm

Is this solution worked or not..?

FabeCode 2-Apr-13 10:54am

No. it has not. The panel does not show once I click on the "plus" in first column of the grid.

vinodkumarnie 2-Apr-13 11:58am

try to use next() of find() functions of JQuery.

FabeCode 2-Apr-13 12:29pm

New to JQuery. Can you provide an example?

FabeCode 3-Apr-13 1:32am

For those lines that begin with ?, I remove the "less than" character. Hope this works...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="~/Scripts/jquery-1.4.1.js" type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "~/resources/images/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "~/resources/images/plus.png");
$(this).closest("tr").next().remove();
});

</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true">
? cc1:ToolkitScriptManager>
<div>
<asp:Panel ID="AssgnOffcrs" runat="server">
<asp:Label ID="lblShifts" runat="server" Text="Number of Shifts:">

<asp:TextBox ID="txtNumShifts" runat="server" OnTextChanged="txtNumShifts_TextChanged"
Width="35px" AutoPostBack="True">
? asp:TextBox>
<asp:ImageButton ID="imgbAdd" runat="server" Visible="false"
ImageUrl="~/Resources/Images/add.png" onclick="imgbAdd_Click" />
<br />
<table id="tblShiftSumry">
<tr>
<td class="summaryCost">
<asp:GridView ID="gvShift" runat="server" AutoGenerateColumns="False" Height="95px"
Style="margin-right: 1px" Width="100px" OnRowDataBound="OnRowDataBound">
? Columns>
<asp:TemplateField HeaderText="Frequency">
? ItemTemplate>
<img alt="" style="cursor: pointer" src="Resources/Images/plus.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:Label ID="lblMsg" Width="100px" runat="server" Text="Testing 1...2...3">
? /asp:Panel>
? /ItemTemplate>
<HeaderStyle Width="15px" />
? /asp:TemplateField>
? /Columns>
? /asp:GridView>
</td>
</tr>
</table>
? /asp:Panel>
</div>
</form>
</body>
</html>

vinodkumarnie 3-Apr-13 1:40am

This source code I was expecting from you.. U missing ending tags. Please delete your previous source code you posted. Is this code working..?

FabeCode 3-Apr-13 1:56am

No. The panel does not appear when you click on the + in column 1

FabeCode 3-Apr-13 1:57am

I had to remove the < in order to copy/paste the code.

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

FabeCode · Accepted Answer · 2013-04-03T09:20:00

I modified the javascript and defined a class parameter for the panel as follows:

$(document).ready(function () {
$(".plus").toggle(
function () {
$(this).next(".pnlOrders").show();
$(this).attr("src", "Resources/Images/minus.png");
},
function () {
$(this).next(".pnlOrders").hide();
$(this).attr("src", "Resources/Images/plus.png");
});
});

.
.
<asp:panel id="pnlOrders" class="pnlOrders" style="display: none" runat="server" xmlns:asp="#unknown">

Nesting A Panel Within a GridView

2 solutions

Solution 1

Solution 4

Add your solution here

Preview 0

Nesting A Panel Within a GridView

2 solutions

Solution 1

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us