why selectedrowstyle of a gridview is not shown when doing asyncpostback? - asp.net

Question

I have a gridview which contains a select commandfield.
I also have an updatepanel which contains a details view.
The gridview is outside update panel.
I want when selected button is pressed the selected row of the gridview to change color and the details to be shown in the details view without page refreshing.
Here is my code:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Column1" DataSourceID="SqlDataSource1">
<Columns>
<asp:CommandField HeaderText="details" ShowSelectButton="True" />
<asp:BoundField DataField="Column1" HeaderText="Column1" SortExpression="Column1" />
</Columns>
<SelectedRowStyle BackColor="#FFFFFF" />
</asp:GridView>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="Column1" DataSourceID="SqlDataSource2" Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="Column1" HeaderText="Column1" InsertVisible="False" ReadOnly="True" SortExpression="Column1" />
<asp:BoundField DataField="Column2" HeaderText="Column2" SortExpression="Column2" />
</Fields>
</asp:DetailsView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" />
</Triggers>
</asp:UpdatePanel>
The problem is that gridview does not change the color of the selected row when it is outside the update panel.
I know that when i move it inside the updatepanel it will work but I want to know why this happens.
Thanks.
Forgot the most important thing:
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
SelectCommand="SELECT * FROM Products WHERE (Column1=#Column1)">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1" Name="Column1" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
I think this is where the source of misbehavior lies...but still i am not sure why...

Answer 1

Yes my bad, I just replicated your scenario and the reason I found is really simple actually.
First, Asynchronous postbacks using the UpdatePanel will only refresh its child controls (that's why they are called partial render posts). Controls outside the UpdatePanel won't be refreshed.
As you mention:
I know that when i move it inside the updatepanel it will work but I want to know why this happens.
At first sight I thought that the GridView should do a full postback but nope, that's because you added this control as a trigger for the UpdatePanel
The reason is that you are registering all the events from the GridView as triggers of the UpdatePanel, and you are registering it using this <asp:AsyncPostBackTrigger ControlID="GridView1" /> which is causing the desired effect, firing the GridView events asynchronously to refresh the UpdatePanel, and since the GridView is outside, it is not refreshed
You could change this behavior, fixing the problem but your page will do a full postback:
<asp:PostBackTrigger ControlID="GridView1" />
As a reminder (for you and for me =p), we need to remember than whenever we register a control as a trigger of an UpdatePanel, its events will be caught in order to be sent asynchronously, causing sometimes the undesired effect of not rendering the source control if it's outside of the UpdatePanel