asp: UpdatePanel auf einzelnen RadGrid-Zeilen

Question

Ich mache einige Änderungen an einer internen Anwendung, die eine Telerik RadGrid-Komponente auf einer ASPX-Seite hat.

Jede Zeile im RadGrid stellt einen Auftrag dar und es gibt ein Dropdown-Feld, in dem der Status des Auftrags festgelegt werden kann. Wenn Sie den Status des Auftrags ändern, werden einige andere Eigenschaften des Auftrags aktualisiert, die in dieser Zeile angezeigt werden.

Bis jetzt hat das Ändern des Bestellstatus zu einem vollständigen Seitenpostback und erneutem Rendern geführt. Ich bin daran interessiert, dies zu einem Teil Post zurück mit einem UpdatePanel zu ändern. Ich könnte das Status-Dropdown (ein RadCombo) in ein UpdatePanel einbinden, das sich um die tatsächlichen Datenbankänderungen kümmert, die erforderlich sind (gemäß dem Codebeispiel unten), aber ohne die anderen Eigenschaften in der RadGrid-Zeile zu aktualisieren, sind die Updates nicht dem Benutzer präsentiert.

<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> 

Ich frage mich, wie ich die Update effektiv nutzen kann, um die Zeile des RadGrid wickeln, so dass die gesamte Zeile aktualisiert werden kann, im Gegensatz zu nur die Zelle, die die Drop-Down-in ist. Ich habe versucht, das Experimentieren schon mit tag placement, aber ich bin neu bei Telerik und deshalb nicht sehr aufgeklärt.

Auf welcher Ebene im Markup kann ich das UpdatePanel platzieren, damit es so funktioniert, wie ich es möchte?

Oder gibt es einen Telerik Weg dies zu tun?

Ich könnte das ganze Netz wickeln, aber wenn möglich, würde ich lieber nicht das gesamte Netzupdate auf jedem Teil zurück haben, die zulässigen Operationen sind auf Zeilenebene beschränkt, so dass ich eine vollständige Netzaktualisierung als verschwenderisch sehe.

Answer 1

Sie können kein UpdatePanel um jede Zeile platzieren. Für den Anfang gibt es keine Möglichkeit, dies zu tun (Sie können es auch nicht mit dem Standard-GridView tun). Wenn Sie das schaffen (z. B. das Render-Ereignis überschreiben), würden Sie ein ungültiges Markup erhalten, weil Sie keine <div> Elemente innerhalb des <table> und zwischen den anderen <tr> Knoten haben können.

Ein Hinweis auf die Leistung - die AJAX-Anforderung führt dazu, dass die Seite ihren gesamten Lebenszyklus auf dem Server durchläuft, so dass der gesamte Code erneut ausgeführt wird und jede zeitaufwändige Operation ausgeführt wird. Der einzige Unterschied zwischen dem AJAX und dem vollständigen Postback besteht darin, was in der Antwort gerendert und zurückgegeben wird, sodass Sie nur die Netzwerkzeit abschatten.

Was können Sie tun, ist die folgende:

• das gesamte Raster wickeln. Ich würde RadAjaxPanel und RadAjaxLoadingPanel verwenden, so dass Sie eine hübsche Ladeanzeige haben. Etwas wie:

  <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> 
  

• ODER, verwenden Sie clientseitigen Code und jQuery. Die Combo kann einen WebService oder eine PageMethode aufrufen, die die Daten zurückgibt, und Sie können jQuery verwenden, um das DOM zu durchlaufen und die anderen Elemente (Textfelder, Dropdownlisten, was auch immer Sie haben) zu aktualisieren. Das wird schwieriger werden.