Nested Gridview sollte/Einsturz erweitern, wenn Zeile geklickt wird

Question

ich eine verschachtelte Gridview haben wie folgt:

<asp:GridView ID="gvParent" runat="server" DataKeyNames="id"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:GridView ID="gvChild" runat="server"> 
        <Columns> 
         <asp:TemplateField> 
          <ItemTemplate> 
           <asp:Label ID="lblChild1" runat="server"/> 
          </ItemTemplate> 
         </asp:TemplateField> 
         //... some more child columns 
        </Columns> 
       </asp:GridView> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:Label ID="lblParent1" runat="server"/> 
      </ItemTemplate> 
     </asp:TemplateField> 
     //... some more parent columns 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:HiddenField ID="IsExpanded" ClientIDMode="Static" runat="server" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

Was ich tun möchte, ist, wenn der Benutzer eine beliebige Stelle auf der übergeordneten Zeile klickt, wird das Kind Reihe, zeigt Alle Zeilen in der untergeordneten GridView, die sich auf das übergeordnete Element beziehen. Wenn ich dann erneut klicke, sollte es zusammenklappen.

Ich kann die Daten in die GridViews fein bekommen und kann die Expand/Collapse Funktion wie in this tutorial bekommen, aber ich will nicht nur das Bild klickbar haben, ich möchte die ganze Zeile anklickbar.

zumindest versuchen und es ich die gleiche Logik aus dem Tutorial zu erweitern: auf der rechten Seite des angeklickten Spalte in dieser Zeile auf die

$(function() { 
    $("[id*=gvParent] td").click(function() { 
     $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>"); 
    }); 
}); 

Aber es um den Inhalt der Spalte nur Kopien nächste Reihe (siehe snip). Ich bin mir sicher, es ist wahrscheinlich einfach, aber ich kann nirgends die Antwort finden!

UPDATE:

Ich habe jetzt:

$("[id*=gvFileUploadAdmin] td").click(function() { 
    if ($("#IsExpanded").val() == "expanded") { 
     debugger; 
     collapseRow(this); 
    } 
    else if (typeof $("#IsExpanded").val() == 'undefined' 
      || $("#IsExpanded").val() == "collapsed") { 
     expandRow(this); 
    } 
}); 

function expandRow(row) { 
    $(row) 
     .closest("tr") 
     .after("<tr><td></td><td colspan = '999'>" + 
      $("[id*=pnlFiles]", $(row).closest("tr")).html() + 
      "</td></tr>");  
    $("#IsExpanded").val("expanded"); 
}; 

function collapseRow(row) { 
    $(row).closest("tr").next().remove(); 
    $("#IsExpanded").val("collapsed"); 
} 

Was mir Reihen zu öffnen und zu schließen einzelne erlaubt, aber wenn eine Zeile offen ist, und dann wird eine andere geöffnet, wird die Zeile neben dem gelöscht . Mit den eindeutigen IDs ist definitiv etwas los, aber ich bin mir nicht sicher, wie ich es beheben soll. Ich habe einige C# im Hintergrund haben dies zu tun:

HiddenField IsExpanded = row.FindControl("IsExpanded") as HiddenField; 
var uniqueId = IsExpanded.UniqueID; 
IsExpanded.Value = Request.Form[uniqueId]; 

Aber wenn dieser entfernt ist es macht keinen Unterschied, wie es funktioniert, weil Request.Form [UniqueId] gibt null zurück.

Answer 1

Also habe ich es endlich geschafft, es zum Laufen zu bringen!Hier ist, was ich habe (beachten Sie, dass dies nicht die Zeile nicht erweitern, wenn der Benutzer auf eine Schaltfläche in dieser Zeile drückt):

$(function() { 
    $("[id*=gvParent] td").click(function() { 
     if ($(this).parents('tr').find('input[type="hidden"]').val() == "expanded") 
      collapseRow(this); 
     else 
      expandRow(this); 
    }); 

    // Ensure the row doesn't expand/collapse if a button is clicked 
    $("[id*=gvParent] td .btn").click(function (e) { 
     e.stopPropagation(); 
    }); 
    //Ensures any clicks on the child row aren't registered 
    $("[id*=gvParent] td .gvChild").click(function (e) { 
     e.stopPropagation(); 
    }); 
}); 

function expandRow(row) { 
    $(row).closest("tr").after("<tr><td></td><td colspan = '999'>" + 
       $("[id*=pnlFiles]", $(row).closest("tr")).html() + 
       "</td></tr>"); 
    $(row).parents('tr').find('input[type="hidden"]').val("expanded"); 
}; 

function collapseRow(row) { 
    $(row).closest("tr").next().hide(); 
    $(row).parents('tr').find('input[type="hidden"]').val("collapsed"); 
} 

ich auch die ClientIDMode aus statischen geändert:

<asp:HiddenField ID="IsExpanded" ClientIDMode="Static" runat="server" /> 

zu AutoID:

<asp:HiddenField ID="IsExpanded" ClientIDMode="AutoID" runat="server" /> 

Answer 2

Haben Sie versucht, eine Listview anstelle einer Gridview zu verwenden? Ich benutze einen LinkButton, um die Zeilenerweiterung zu aktivieren/deaktivieren.

1. In der ItemTemplate umschließen Sie Ihre Anzeigezellen innerhalb der LinkButton-Definition.

<ItemTemplate> 
 
    <tr> 
 
    <td> 
 
     <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select"> 
 
     LOC: 
 
     <asp:Label Text='<%# Eval("LocationCode") %>' runat="server" ID="LocationCodeLabel" /></span> 
 
     </asp:LinkButton> 
 
    </td> 
 
    <td> 
 
     <asp:Button ID="editLocation" runat="server" Text="EDIT" CommandName="Edit" CommandArgument='<%# Eval("LocationID") %>' /> 
 
     <asp:Button ID="deleteLocation" runat="server" Text="DELETE" CommandName="Delete" CommandArgument='<%# Eval("LocationID") %>' /> 
 
    </td> 
 
    </tr> 
 
</ItemTemplate>

2. der Linkbutton Command = "Select" des ItemTemplate Geben - dies den Effekt der Aktivierung des SelectedItemTemplate hat.

3. Umschließen Sie in der SelectedItemTemplate die Datenzellen mit einem anderen LinkButton. Der LinkButton CommandName = "UnSelect".

Die ListView behandelt den Select-Befehl kostenlos. Der UnSelect muss vom Listview1_ItemCommand() Event Handler behandelt werden.

Sie können Ihre GridView in eine Div in SelectedItemTemplate einfügen. Ein anderer ListView, der in dem SelectedItemTemplate eingebettet wird, wäre jedoch ideal.