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>