asp.net/C#/AJAXの子グリッドの非同期バインディングを使用してツリービューエフェクトを生成するネストされたグリッドビュー

Question

本質的に、ネストされたグリッドビューを使用してツリービューエフェクトを作成しようとしています。

-col 1 COL 2 COL 3 COL 4

childcol1 childcol2 childcol3 

    childcol1 childcol2 childcol3 

+ COL 1 COL 2 COL 3 COL 4

+ COL 1 COL 2 COL 3 COL 4：それはこのような何かを見てみましょう

+ COL 1 COL 2 COL 3 COL 4

親グリッドは、ページのロードに移入されますが、「プラス」をクリックすると、データの収集&結合子グリッドのはasynchroです選択されたレコードの値に基づいて「オンザフライで」配置されます。データはDBから引き出されます&一般的に、私はグリッドビューにバインドするためにDataSetsを使用していますが、ここでそれを行うことができないようです。

私はajaxとjqueryを読んできましたが、それは非同期呼び出しに合わせているようだから、解決策があるようですが、あまりよくわかりません。親グリッドにネストされたテンプレートフィールドとして子グリッドを作成する必要があるようです。

ご注意：私は「UpdatePanel」の使用を避けるよう求められており、これはオプションではありません。

Answer 1

これは、ネストした表とjQuery、jsonが返されたAjaxコール、およびテンプレートエンジンのjtemplateを使用してこれを行っています。

私はこれを概念的に行う方法を示すために、素早く​​を作成しました。基本的なレイアウトは非常に可能性があります。この

Table 
-row 
-subrow 
    -Table 
    -row 
    -row 

Answer 2

ようなものだろうが、あなたはGridViewコントロールを使用する場合は、列に子リストを配置する必要がありますので、私は、あなたの親コンテナとしてListViewコントロールまたはDataListコントロールを使用しますこれは醜く見えます。これは、正しい道にあなたを置く必要があります。

<table width="595px"> 
    <asp:DataList BackColor="#ffffff" id="DataList1" DataKeyField="<ID>" OnItemDataBound="DataList1_ItemDataBound" runat="server" Width="100%">  
     <ItemTemplate> 
      <tr> 
       <td> 
        <asp:LinkButton ID="LinkButton1" runat="server" Text="+" OnCommand="LinkButton1_Command" CommandArgument='<%#Container.ItemIndex%>'></asp:LinkButton>  
       </td> 
       <td><%#Eval("<COLUMN NAME>")%></td> 
       <td><%#Eval("<COLUMN NAME>")%></td> 
       <td><%#Eval("<COLUMN NAME>")%></td> 
      </tr> 
      <asp:Panel ID="pnlChildView" runat="server"> 
       <asp:DataList ID="DataList2" runat="server" Width="100%"> 
        <ItemTemplate> 
         <tr> 
          <td><%#Eval("<CHILD OLUMN NAME>")%></td> 
          <td><%#Eval("<CHILD COLUMN NAME>")%></</td> 
          <td><%#Eval("<CHILD COLUMN NAME>")%></</td>       
         </tr> 
        </ItemTemplate> 
       </asp:DataList> 
      </asp:Panel> 
     </ItemTemplate> 
    </asp:DataList> 
</table> 

、ユーザーがDataList1でLinkBut​​tonコントロール/ボタンをクリックすると、このような何か：明らか

protected void LinkButton1_Command(object sender, CommandEventArgs e) 
{ 
    //pass index of item in command argument 
    int itemIndex = Convert.ToInt32(e.CommandArgument);  

    //find the pnlChildView control 
    Panel childViewPanel = (Panel)DataList1.Items[itemIndex].FindControl("pnlChildView"); 
    if (childViewPanel != null) 
    { 
     //toggle visibility of childViewPanel and bind child list if panel is visible 

     if (childViewPanel.Visible) 
     { 
      DataList childList = childViewPanel.FindControl("DataList2"); 
      if (childList != null) 
      { 
       int keyValue = (int)DataList1.DataKeys[itemIndex]; 

       //bind the list using DataList1 data key value 
       childList.DataSource = <DATA SOURCE>; //get data using keyValue 
       childList.DataBind(); 
      } 
     } 
    } 
}