I have a page with a nested gridview and within the nested gridview I have a TemplateField and an Imagebutton. What I am trying to accomplish is allow the user to expand the child grid and then click on the Imagebutton to display a panel below. The problem I am having is that when I click on the ImageButton a page postback occurs which gives the appearnce of the child grid collapsing. I have tried adding a javascript function to the ImageButtons OnClientClick event to return zero ( which does prevent the postback ) but then the Child Grid's SelectedIndexChanged event stops firing. The SelectedIndexChanges is where I load my details panel via the code below. Would anyone have any ideas how I can have the ImageButton clicked and fire The Nested Grids SelectedIndexChaged without have the Grids redisplay via post back.


Thanks in advance


Dave

Protected Sub gvItems_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim gvItems As GridView = CType(sender, GridView)
        If gvItems.SelectedIndex >= 0 Then
            Dim ItemId As Integer = CInt(gvItems.DataKeys(gvItems.SelectedRow.RowIndex).Value)
            Dim inq As InquiryItem = InqData.GetInquirysByItemID(ItemId)
        End If
    End Sub

Here is the source for my gridview:

function switchViews(obj,row)
        {
            var div = document.getElementById(obj);
            var img = document.getElementById('img' + obj);
            
            if (div.style.display=="none")
                {
                    div.style.display = "inline";
                    if (row=='alt')
                       {
                           img.src = "App_Themes/images/Expand_Button_white_Down.jpg";
                           mce_src = "App_Themes/images/Expand_Button_white_Down.jpg";

                       }
                   else
                       {
                           img.src = "App_Themes/images/Expand_Button_white_Down.jpg";
                           mce_src = "App_Themes/images/Expand_Button_white_Down.jpg";
                       }
                   img.alt = "Close to view other customers";
               }
           else
               {
                   div.style.display = "none";
                   if (row=='alt')
                       {
                           img.src = "App_Themes/images/Expand_button_white.jpg";
                           mce_src = "App_Themes/images/Expand_button_white.jpg";
                       }
                   else
                       {
                           img.src = "App_Themes/images/Expand_button_white.jpg";
                           mce_src = "App_Themes/images/Expand_button_white.jpg";
                      }
                   img.alt = "Expand to show orders";
              }
          }

          function noPostback() {              
              return false;              
          }


    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="maincontent" runat="Server">
    <div id="adminedit">
        <div>
            Wausau Steel Customer Inquiry
        </div>
        <br />
        <!-- I remved id="projectadministration" from this div -->
        <div id="MainGrid">            
            <a name="content_start" id="content_start"></a>
            <fieldset>
                <!-- add H2 here and hide it with css since you can not put h2 inside a legend tag -->
                <h2>
                    Inquiry Status</h2>
                <legend>Active Inquirys:</legend>
                <asp:UpdatePanel ID="updMainGrid" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:GridView ID="gvInqStatus" AutoGenerateColumns="False" DataKeyNames="inqID" AllowSorting="True"
                            BorderWidth="0" runat="server" BorderStyle="None" Width="99%" CellPadding="2"
                            AllowPaging="true" PageSize="10" BorderColor="White">
                            <Columns>
                            
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <a href="javascript:switchViews('div<%# Eval("inqID") %>', 'one');">
                                            <img id="imgdiv<%# Eval("inqID") %>" alt="Click to show/hide orders" border="0"
                                                src="App_Themes/images/expand_button_white.jpg" />
                                        </a>
                                    </ItemTemplate>
                                    <AlternatingItemTemplate>
                                        <a href="javascript:switchViews('div<%# Eval("inqID") %>', 'alt');">
                                            <img id="imgdiv<%# Eval("inqID") %>" alt="Click to show/hide orders" border="0"
                                                src="App_Themes/images/expand_button_white.jpg" />
                                        </a>
                                    </AlternatingItemTemplate>
                                </asp:TemplateField>

                                <asp:BoundField DataField="inqID" HeaderText="Inquiry Number" SortExpression="InqID"
                                    Visible="true"><ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="CustNum" HeaderText="Customer Number" SortExpression="CustNum">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="CustName" HeaderText="Customer Name" SortExpression="CustName">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="DistrictCode" HeaderText="District" SortExpression="DistrictCode">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="SalesNum" HeaderText="Sales Number" SortExpression="SalesNum">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="QuoteDate" HeaderText="Quote Date" DataFormatString="{0:d}"
                                    SortExpression="QuoteDate">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="Status" HeaderText="Quote Status" SortExpression="Status">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>  
                                
                                                               
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        </td></tr>
                                        <tr>
                                            <td colspan="100%">
                                                <div id="div<%# Eval("InqID") %>" style="display: none; position: relative;
                                                    left: 25px;">
                                                    <asp:GridView ID="gvItems" runat="server" Width="80%" AutoGenerateColumns="false"
                                                        DataKeyNames="ItemID" EmptyDataText="No items for this customer." HeaderStyle-BackColor="#D6DDE9"
                                                        AllowSorting="false" OnSelectedIndexChanged="gvItems_SelectedIndexChanged">
                                                        <Columns>
                                                            <asp:BoundField DataField="Quantity" HeaderText="Quantity">
                                                            <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                                            <asp:BoundField DataField="Description" HeaderText="Description"/>
                                                            <asp:BoundField DataField="Grade" HeaderText="Grade">
                                                            <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                                            <asp:BoundField DataField="Feet" HeaderText="Feet">
                                                            <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                                            <asp:BoundField DataField="Inches" HeaderText="Inches">
                                                            <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                                            
                                                            <asp:TemplateField ShowHeader="false">
                                                                <ItemStyle HorizontalAlign="Center" />
                                                                <ItemTemplate>
                                                                    <asp:ImageButton ID="btnView" runat="server" CausesValidation="False" CommandName="Select"
                                                                        ImageUrl="App_Themes/images/grid-view.gif" ToolTip="View"
                                                                        OnClientClick="JavaScript: return noPostback();" />
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                        </Columns>
                                                        <RowStyle HorizontalAlign="Left" CssClass="row1" />
                                                        <HeaderStyle HorizontalAlign="Left" />
                                                    </asp:GridView>
                                                </div>
                                            </td>
                                        </tr>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                 
                            </Columns>
                            <RowStyle HorizontalAlign="Left" CssClass="row1" />
                            <HeaderStyle HorizontalAlign="Left" />
                            <EmptyDataTemplate>
                                <asp:Label ID="Label10" runat="server" Text="Label">There are no Purchase Inquirys Entered</asp:Label>
                            </EmptyDataTemplate>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </fieldset>
        </div>
    </div>
</asp:Content>

Recommended Answers

All 6 Replies

You need to add triggers to UpdatePanel.

Here is an example,

....
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="GridView1" 
      EventName="SelectedIndexChanged" />
</Triggers>
....
</asp:UpdatePanel>

as u r saying that ur javascript is stopping postback it is good now get the click id from child grid and sent it to codebehind by page method (good option) or Ajax then get the details in the form of string and then do some stuff like split if u had added multiple values then display those strings in panel

I am sorry I am still a newbee to this stuff. Could I ask how d o you get the click id from the page method.

Dave

I have a page with a nested gridview and within the nested gridview I have a TemplateField and an Imagebutton. What I am trying to accomplish is allow the user to expand the child grid and then click on the Imagebutton to display a panel below. The problem I am having is that when I click on the ImageButton a page postback occurs which gives the appearnce of the child grid collapsing. I have tried adding a javascript function to the ImageButtons OnClientClick event to return zero ( which does prevent the postback ) but then the Child Grid's SelectedIndexChanged event stops firing. The SelectedIndexChanges is where I load my details panel via the code below. Would anyone have any ideas how I can have the ImageButton clicked and fire The Nested Grids SelectedIndexChaged without have the Grids redisplay via post back.


Thanks in advance


Dave

Protected Sub gvItems_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim gvItems As GridView = CType(sender, GridView)
        If gvItems.SelectedIndex >= 0 Then
            Dim ItemId As Integer = CInt(gvItems.DataKeys(gvItems.SelectedRow.RowIndex).Value)
            Dim inq As InquiryItem = InqData.GetInquirysByItemID(ItemId)
        End If
    End Sub

Here is the source for my gridview:

function switchViews(obj,row)
        {
            var div = document.getElementById(obj);
            var img = document.getElementById('img' + obj);
            
            if (div.style.display=="none")
                {
                    div.style.display = "inline";
                    if (row=='alt')
                       {
                           img.src = "App_Themes/images/Expand_Button_white_Down.jpg";
                           mce_src = "App_Themes/images/Expand_Button_white_Down.jpg";

                       }
                   else
                       {
                           img.src = "App_Themes/images/Expand_Button_white_Down.jpg";
                           mce_src = "App_Themes/images/Expand_Button_white_Down.jpg";
                       }
                   img.alt = "Close to view other customers";
               }
           else
               {
                   div.style.display = "none";
                   if (row=='alt')
                       {
                           img.src = "App_Themes/images/Expand_button_white.jpg";
                           mce_src = "App_Themes/images/Expand_button_white.jpg";
                       }
                   else
                       {
                           img.src = "App_Themes/images/Expand_button_white.jpg";
                           mce_src = "App_Themes/images/Expand_button_white.jpg";
                      }
                   img.alt = "Expand to show orders";
              }
          }

          function noPostback() {              
              return false;              
          }


    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="maincontent" runat="Server">
    <div id="adminedit">
        <div>
            Wausau Steel Customer Inquiry
        </div>
        <br />
        <!-- I remved id="projectadministration" from this div -->
        <div id="MainGrid">            
            <a name="content_start" id="content_start"></a>
            <fieldset>
                <!-- add H2 here and hide it with css since you can not put h2 inside a legend tag -->
                <h2>
                    Inquiry Status</h2>
                <legend>Active Inquirys:</legend>
                <asp:UpdatePanel ID="updMainGrid" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:GridView ID="gvInqStatus" AutoGenerateColumns="False" DataKeyNames="inqID" AllowSorting="True"
                            BorderWidth="0" runat="server" BorderStyle="None" Width="99%" CellPadding="2"
                            AllowPaging="true" PageSize="10" BorderColor="White">
                            <Columns>
                            
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <a href="javascript:switchViews('div<%# Eval("inqID") %>', 'one');">
                                            <img id="imgdiv<%# Eval("inqID") %>" alt="Click to show/hide orders" border="0"
                                                src="App_Themes/images/expand_button_white.jpg" />
                                        </a>
                                    </ItemTemplate>
                                    <AlternatingItemTemplate>
                                        <a href="javascript:switchViews('div<%# Eval("inqID") %>', 'alt');">
                                            <img id="imgdiv<%# Eval("inqID") %>" alt="Click to show/hide orders" border="0"
                                                src="App_Themes/images/expand_button_white.jpg" />
                                        </a>
                                    </AlternatingItemTemplate>
                                </asp:TemplateField>

                                <asp:BoundField DataField="inqID" HeaderText="Inquiry Number" SortExpression="InqID"
                                    Visible="true"><ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="CustNum" HeaderText="Customer Number" SortExpression="CustNum">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="CustName" HeaderText="Customer Name" SortExpression="CustName">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="DistrictCode" HeaderText="District" SortExpression="DistrictCode">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="SalesNum" HeaderText="Sales Number" SortExpression="SalesNum">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="QuoteDate" HeaderText="Quote Date" DataFormatString="{0:d}"
                                    SortExpression="QuoteDate">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                <asp:BoundField DataField="Status" HeaderText="Quote Status" SortExpression="Status">
                                <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>  
                                
                                                               
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        </td></tr>
                                        <tr>
                                            <td colspan="100%">
                                                <div id="div<%# Eval("InqID") %>" style="display: none; position: relative;
                                                    left: 25px;">
                                                    <asp:GridView ID="gvItems" runat="server" Width="80%" AutoGenerateColumns="false"
                                                        DataKeyNames="ItemID" EmptyDataText="No items for this customer." HeaderStyle-BackColor="#D6DDE9"
                                                        AllowSorting="false" OnSelectedIndexChanged="gvItems_SelectedIndexChanged">
                                                        <Columns>
                                                            <asp:BoundField DataField="Quantity" HeaderText="Quantity">
                                                            <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                                            <asp:BoundField DataField="Description" HeaderText="Description"/>
                                                            <asp:BoundField DataField="Grade" HeaderText="Grade">
                                                            <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                                            <asp:BoundField DataField="Feet" HeaderText="Feet">
                                                            <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                                            <asp:BoundField DataField="Inches" HeaderText="Inches">
                                                            <ItemStyle HorizontalAlign="Center"></ItemStyle></asp:BoundField>
                                                            
                                                            <asp:TemplateField ShowHeader="false">
                                                                <ItemStyle HorizontalAlign="Center" />
                                                                <ItemTemplate>
                                                                    <asp:ImageButton ID="btnView" runat="server" CausesValidation="False" CommandName="Select"
                                                                        ImageUrl="App_Themes/images/grid-view.gif" ToolTip="View"
                                                                        OnClientClick="JavaScript: return noPostback();" />
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                        </Columns>
                                                        <RowStyle HorizontalAlign="Left" CssClass="row1" />
                                                        <HeaderStyle HorizontalAlign="Left" />
                                                    </asp:GridView>
                                                </div>
                                            </td>
                                        </tr>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                 
                            </Columns>
                            <RowStyle HorizontalAlign="Left" CssClass="row1" />
                            <HeaderStyle HorizontalAlign="Left" />
                            <EmptyDataTemplate>
                                <asp:Label ID="Label10" runat="server" Text="Label">There are no Purchase Inquirys Entered</asp:Label>
                            </EmptyDataTemplate>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </fieldset>
        </div>
    </div>
</asp:Content>

Hi,

Please check out this link

I hope it helps!! :)

I am at a loss. I understand Triggers. I even added another trigger to the UpdatePanel that uses the SelectedIndexChanged event of my outer gridview as it's EventName. But that has no affect on the fact that the page posts back and the grid is displayed. Could please elaborate on what you mean. I have read the link to see if I was missing something

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.