Expandable Gridview inside ASP Panel

Question

I want to add an expandable asp grid inside an ASP Panel which I want to make visible/invisible by changing the visible true/false option of the panel.

If I remove asp:Panel ID="test1", the site opens with the exandable gridview working no problem.

Once I've add the code inside the panel I get an error message:

Expression expected.
Source Error:
Line 46: <a href="JavaScript:divexpandcollapse('div<%# Eval(&quot;reporting_group&quot;) %>');">

Would anyone could explain why it this happening and how to avoid it. I have tried also Ajax TabContainer with the same result.

See code below.

<script language="javascript" type="text/javascript">
    function divexpandcollapse(divname) {
        var div = document.getElementById(divname);
        var img = document.getElementById('img' + divname);
        if (div.style.display == "none") {
            div.style.display = "block"; img.src = "Images/Icons/minus.jpg";
        } else { div.style.display = "none"; img.src = "Images/Icons/plus.jpg"; }
    }</script>

<asp:Panel ID="test1" runat="server">
    Panel 1<br />
    <asp:UpdatePanel ID="UP_TabContainer" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:GridView ID="GV_SL" runat="server" AutoGenerateColumns="False" 
                DataSourceID="SQL_Weekly" OnRowCommand="GV_SL_RowCommand" 
                OnRowDataBound="gvUserInfo_RowDataBound">
                <Columns>
                    <asp:TemplateField ItemStyle-Width="50px">
                        <ItemTemplate>
                            <a href="JavaScript:divexpandcollapse('div<%# Eval(&quot;reporting_group&quot;) %>');">
                            <img id="imgdiv<%# Eval("reporting_group") %>" width="15px" border="0" src="Images/Icons/plus.jpg" />
                            </a>
                        </ItemTemplate><ItemStyle Width="40px" />
                    </asp:TemplateField>
                    <asp:BoundField DataField="name" HeaderText="Group" SortExpression="name" />
                    <asp:BoundField DataField="ASL" HeaderText="SL% Act" ReadOnly="True" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <tr>
                                <td >
                                    <div ID='div<%# Eval("reporting_group") %>' style="display: none; position: relative;
                                    left: 15px; overflow: auto">
                                        <asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false">
                                            <Columns>
                                                <asp:BoundField DataField="Metric" 
                                                    HeaderText=" "/> 
                                                <asp:BoundField DataField="Actual" HeaderText="Actual" />
                                            </Columns>
                                        </asp:GridView> 
                                    </div>
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <br />
            <asp:SqlDataSource ID="SQL_Weekly" runat="server" 
                ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand=" SQL QUERY" <SelectParameters> 
                </SelectParameters>
            </asp:SqlDataSource>
            <asp:SqlDataSource ID="SQL_Group" runat="server" 
                ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand=" SQL QUERY" ></asp:SqlDataSource>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="DateSelection" 
                EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>
    <br />
</asp:Panel>

Superzadeh Superzadeh · Accepted Answer · 2013-10-08T13:42:13

try changing the way your link triggers JavaScript to something like this:

<a href="#" onclick="divexpandcollapse('div<%# Eval("reporting_group") %>');return false;">
    <img id="imgdiv<%# Eval("reporting_group") %>" width="15px" border="0" src="Images/Icons/plus.jpg" />
</a>

Note:

use " instead of " (fixes compilation error)
set the link href to "#"
use the onclick event to execute JavaScript (good practice)

.

Expandable Gridview inside ASP Panel

2 Answers