asp:UpdatePanel on individual RadGrid rows - asp.net

Question

I am making some changes to an internal application that has a Telerik RadGrid component on one .aspx page.
Each row in the RadGrid represents an order and there is a dropdown which allows setting the status of the order. Changing the status of the order updates a couple of other properties of the order which are displayed on that row.
Up until now, changing the order status has resulted in a complete page post back and re-render. I'm keen to change this to a partial post back using an UpdatePanel. I could wrap the status dropdown (a RadCombo) in an UpdatePanel which would take care of the actual database changes that are required (as per the code sample below), but then without updating the other properties on the RadGrid row, the updates are not presented to the user.
<telerik:RadGrid ID="OrdersGrid" runat="server" ...>
<MasterTableView DataKeyNames="OrderId" AllowMultiColumnSorting="false">
<NoRecordsTemplate ...></NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumn ... />
...
<telerik:GridTemplateColumn HeaderText="Order Status" UniqueName="OrderStatus">
<ItemTemplate>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<telerik:RadComboBox ID="RadOrderStatus" DataSourceID="OrderStatusDataSource" runat="server"
SelectedValue='<%# Bind("OrderStatus") %>' Skin="Metro" Width="180px" DataTextField="OrderStatus"
DataValueField="OrderStatus" AutoPostBack="True" EnableLoadOnDemand="False" OnSelectedIndexChanged="RadOrderStatus_SelectedIndexChanged">
</telerik:RadComboBox>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<SortExpressions>...</SortExpressions>
</MasterTableView>
</telerik:RadGrid>
I'm wondering how I can use the UpdatePanel to effectively wrap the row of the RadGrid so that the entire row can be updated as opposed to just the cell that the dropdown is in. I've tried experimenting already with tag placement but I'm new to Telerik and therefore not very clued up.
At what level in the mark up can I place the UpdatePanel to get this to work as I'd like?
Or is there a Telerik way of doing this?
I could wrap the whole grid but if possible, I'd rather not have the whole grid update on each partial post back, the permitted operations are limited to the row level so I see a full grid update as wasteful.

Answer 1

You can't place an UpdatePanel around each row. For starters, there is no provision to do that (you can't do it with the standard GridView either). Then, if you manage to do that (e.g., override the Render event), you would get invalid markup because you can't have <div> elements inside the <table> and between the other <tr> nodes.
One note on the performance—the AJAX request will have the page go through its entire lifecycle on the server, so all code will be executed again and any time consuming operation will also be executed. The only difference between the AJAX and the full postback is what gets rendered and returned in the response, so you basically shave off network time only.
What you can do is the following:
wrap the entire grid. I would use RadAjaxPanel and RadAjaxLoadingPanel so you have a pretty loading indicator. Something like:
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadGrid ID="RadGrid1" runat="server"></telerik:RadGrid>
</telerik:RadAjaxPanel>
OR, use client-side code and jQuery. The combo can call a WebService or a PageMethod that will return the data and you can use jQuery to traverse the DOM and update the other elements (textboxes, dropdowns, whatever you have). This is going to be more difficult.