Unknown Control Error with CollapsiblePanelExtender in a gridview

Question

I'm in the process of troubleshooting a coding challenge in a gridview where I'm attempting to insert a CollapsiblePanelExtender from the Ajax Control Toolkit (in Visual Studio 2012) into a section of checkboxes. What I'm hoping to do is to make the entire section of checkboxes collapse and expand at the users request.

The challenge I'm facing (the asp code is below - no cs code) is that in the " < asp:Panel ID="pnlClick"..." portion of the code there is a green squiggly line below 'Panel' and under every instance of 'CheckBoxField' with the following errors (as noted from the debug output):

Element 'Panel' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing.

Element 'CheckBoxField' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing.

Also, when I switch to the design view of this page I get the following error:

Error Creating Control - GridView1

System.Web.UI.WebControls.DataControlFieldCollection must have items of type 'System.Web.UI.WebControlField'.  'asp:Panel' is of type 'System.Web.UI.WebControls.Panel'.

The SQL portion of this puzzle is rock solid so I don't need assitance with this. I'm new to the Ajax Control Toolkit so I'm trying to determine what exactly I need to tweak to make this work (if this is even the right solution for what I'm attempting to accomplish). I've been pouring through Google for answers but nothing has helped me to resolve this matter with a gridview. The code below is the product of trying to piece together other non gridview solutions within the past six months to a year. There's something I'm probably missing and I'm willing to bet this is probably something simple that needs to be fixed. What am I missing here (below) if this is even possible?

If anyone also knows of a good non-msdn reference with examples that would be greatly appreciated too.

Aspx code:

<%@ Page Title="Test Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="form2.aspx.cs" Inherits="form2" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager> 
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:CommandField ShowEditButton="True" />
            <asp:BoundField DataField="Field 1" HeaderText="Field 1" SortExpression="Field 1" />
            <asp:BoundField DataField="Field 2" HeaderText="Field 2" SortExpression="Field 2" />
            <asp:BoundField DataField="Field 3" HeaderText="Field 3" SortExpression="Field 3" />
            <asp:BoundField DataField="Field 4" HeaderText="Field 4" SortExpression="Field 4" />
            <asp:BoundField DataField="Field 5" HeaderText="Field 5" SortExpression="Field 5" />
            <asp:BoundField DataField="Field 6" HeaderText="Field 6" SortExpression="Field 6" />
            <asp:BoundField DataField="Field 7" HeaderText="Field 7" SortExpression="Field 7" />
            <asp:BoundField DataField="Field 8" HeaderText="Field 8" SortExpression="Field 8" />
            <asp:BoundField DataField="Field 9" HeaderText="Field 9" SortExpression="Field 9" />
          <asp:Panel ID="pnlClick" runat="server" CssClass="collapsiblepanelCSS">
              <div style="background-color:blue;height:30px; vertical-align: middle">
                  <div style="float: left;color:white;padding: 5px 5px 0 0 ">
                      Server List Collapsable Panel
                  </div>
                  <div style="float: right; color: white; padding: 5px 5px 0 0" id="divshow">
                      <asp:Label ID="lblMessage" runat="server" Text="Label" />
                      </div>
                  <div style="clear:both">
                </div>
                    </div>
                  </asp:Panel>
            <asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="collapsiblepanelCSS">
            <asp:CheckBoxField DataField="Check Box 1" HeaderText="Check Box 1" SortExpression="Check Box 1" />
            <asp:CheckBoxField DataField="Check Box 2" HeaderText="Check Box 2" SortExpression="Check Box 2" />
            <asp:CheckBoxField DataField="Check Box 3" HeaderText="Check Box 3" SortExpression="Check Box 3" />
            <asp:CheckBoxField DataField="Check Box 4" HeaderText="Check Box 4" SortExpression="Check Box 4" />
            <asp:CheckBoxField DataField="Check Box 5" HeaderText="Check Box 5" SortExpression="Check Box 5" />
            <asp:CheckBoxField DataField="Check Box 6" HeaderText="Check Box 6" SortExpression="Check Box 6" />
            <asp:CheckBoxField DataField="Check Box 7" HeaderText="Check Box 7" SortExpression="Check Box 7" />
            <asp:CheckBoxField DataField="Check Box 8" HeaderText="Check Box 8" SortExpression="Check Box 8" />
            <asp:CheckBoxField DataField="Check Box 9" HeaderText="Check Box 9" SortExpression="Check Box 9" />
            <asp:CheckBoxField DataField="Check Box 10" HeaderText="Check Box 10" SortExpression="Check Box 10" />
            <asp:CheckBoxField DataField="Check Box 11" HeaderText="Check Box 11" SortExpression="Check Box 11" />
            <asp:CheckBoxField DataField="Check Box 12" HeaderText="Check Box 12" SortExpression="Check Box 12" />
              </asp:Panel>
            <CC1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" Collapsed="true" ExpandControlID="pnlClick" TextLabelID="lblMessage" CollapsedText="Click To Show" ExpandedText="Click To Hide" ImageControlID="imgArrows" ExpandDirection="Vertical" TargetControlID="pnlCollapsable" ScrollContents="false" runat="server"></CC1:CollapsiblePanelExtender>

            <asp:BoundField DataField="Field 10" HeaderText="Field 10" SortExpression="Field 10" />
            <asp:BoundField DataField="Field 11" HeaderText="Field 11" SortExpression="Field 11" />
            <asp:BoundField DataField="Field 12" HeaderText="Field 12" SortExpression="Field 12" />
            <asp:CommandField ShowEditButton="True" />
        </Columns>
        <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>

    <sql connection strings, insert/update SQL code, update parameters, and closing ASP/HTML tags>

Josh Darnell · Accepted Answer · 2013-07-11T06:56:18.443

Everything that's a direct child of your Columns collection needs to be a DataControlField type control (CheckBoxField, ButtonField, etc).

Thus. you need to put all of that Panel stuff inside a <Templatefield>, which allows you to create a custom field.

And you need to convert all of those CheckBoxFields to just regular checkboxes, bind those CheckBoxes to the data fields you wanted, and you should be good

<asp:TemplateField>
    <asp:Panel ID="pnlClick" runat="server" CssClass="collapsiblepanelCSS">
        <div style="background-color:blue;height:30px; vertical-align: middle">
            <div style="float: left;color:white;padding: 5px 5px 0 0 ">
                Server List Collapsable Panel
            </div>
            <div style="float: right; color: white; padding: 5px 5px 0 0" id="divshow">
                <asp:Label ID="lblMessage" runat="server" Text="Label" />
             </div>
             <div style="clear:both">
             </div>
         </div>
    </asp:Panel>
    <asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="collapsiblepanelCSS">
        <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%=Eval("Check Box 1") %>' Text="Check Box 1" />
        <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%=Eval("Check Box 2") %>' Text="Check Box 2" />
        <asp:CheckBox ID="CheckBox3" runat="server" Checked='<%=Eval("Check Box 3") %>' Text="Check Box 3" />
        <asp:CheckBox ID="CheckBox4" runat="server" Checked='<%=Eval("Check Box 4") %>' Text="Check Box 4" />
        <asp:CheckBox ID="CheckBox5" runat="server" Checked='<%=Eval("Check Box 5") %>' Text="Check Box 5" />
        <asp:CheckBox ID="CheckBox6" runat="server" Checked='<%=Eval("Check Box 6") %>' Text="Check Box 6" />
        <asp:CheckBox ID="CheckBox7" runat="server" Checked='<%=Eval("Check Box 7") %>' Text="Check Box 7" />
        <asp:CheckBox ID="CheckBox8" runat="server" Checked='<%=Eval("Check Box 8") %>' Text="Check Box 8" />
        <asp:CheckBox ID="CheckBox9" runat="server" Checked='<%=Eval("Check Box 9") %>' Text="Check Box 9" />
        <asp:CheckBox ID="CheckBox10" runat="server" Checked='<%=Eval("Check Box 10") %>' Text="Check Box 10" />
        <asp:CheckBox ID="CheckBox11" runat="server" Checked='<%=Eval("Check Box 11") %>' Text="Check Box 11" />
        <asp:CheckBox ID="CheckBox12" runat="server" Checked='<%=Eval("Check Box 12") %>' Text="Check Box 12" />
    </asp:Panel>
    <CC1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" Collapsed="true" 
        ExpandControlID="pnlClick" TextLabelID="lblMessage" CollapsedText="Click To Show" 
        ExpandedText="Click To Hide" ImageControlID="imgArrows" ExpandDirection="Vertical" 
        TargetControlID="pnlCollapsable" ScrollContents="false" runat="server">
    </CC1:CollapsiblePanelExtender>
</asp:Templatefield>

@TechieJoe Yes. I see that your other Panel has CheckBoxFields in it. That's going to be a little...weird. Let me think about that. — Josh Darnell, Jul 10 '13 at 20:33
Yeah that's the main challenge right now and probably why there isn't much documentation/information on it. — Techie Joe, Jul 10 '13 at 20:35
@TechieJoe Something like what I just added should work for you. You might have to tweak it for your actual data. I wouldn't think the actual field names in your datasource have spaces in them, but I could be wrong. And you might want to use "Bind" instead of "Eval" (if you are using two-way databinding). — Josh Darnell, Jul 10 '13 at 20:39
Quick Question. In the checked section of the checkboxes, is the quoted eval/bind value the DataField or the Header Text? — Techie Joe, Jul 10 '13 at 20:53
It should be the Datafield, @TechieJoe. Whatever the name of the field (column) in your datasource is. — Josh Darnell, Jul 10 '13 at 20:56
Question. Does the collapsable panel extender have to be only in a details view? Is that the way the Ajax Toolkit stuff works (im a n00b with the Toolkit)? My goal is to have the entire database be presented in a gridview for viewing, updating, and potential export to excel. I can use the details view information for another portion of this same project but I'd also like to present this in a gridview as well. — Techie Joe, Jul 10 '13 at 21:23
@TechieJoe IT doesn't have to be with a DetailsView. I forgot to mention, you need to move your collapsible panel extender inside the TemplateField with the pnlClick Panel for it to work (I think). Otherwise, it's in a different naming container, so it can't find the control. — Josh Darnell, Jul 11 '13 at 06:52
@TechieJoe After reading back over your code, I think you want to put all of that in one TemplateField. That should work. — Josh Darnell, Jul 11 '13 at 06:56
'System.Web.UI.WebControls.TemplateField' does not have a public property named 'Panel'. — Shekhar Pankaj, Oct 16 '15 at 13:28

Unknown Control Error with CollapsiblePanelExtender in a gridview

1 Answers1

Linked