Verstecken/Sichtbar machen von Kontrolle in der Gridview Spalte - Verschiebung Problem

Question

Dies ist eine meiner vorherigen Frage nachgehen ist: link text

In gridview Kolumne habe ich eine Linkbutton und ein Etikett darunter.

Ich möchte das Label ein-/ausblenden, wenn Linkbutton angeklickt wird. Ich benutze Javascript, weil ich keine Postbacks möchte. Der Code:

protected void gvwComments_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.DataRow) 
     { 
      LinkButton lButton = ((LinkButton)e.Row.Cells[2].FindControl("lbtnExpand")); 
      Label label = ((Label)e.Row.Cells[2].FindControl("lblBody")); 
      lButton.Attributes.Add("onclick", string.Format("HideLabel('{0}'); return false;", label.ClientID)); 

     } 
    } 



function HideLabel(button) { 

      var rowObj = document.getElementById(button); 


      if (rowObj.style.display == "none") { 
       rowObj.style.display = "block"; 

      } 
      else { 
       rowObj.style.display = "none"; 

      } 

     } 

Das Problem ist, dass, wenn ich das Etikett durch einen Klick auf die Schaltfläche einzublenden, Linkbutton verschoben wird ein etwas obere ist es ursprüngliche Position in der Zelle. Kann die Linkbutton-Position in der GridViews-Zelle beibehalten werden?

Answer 1

Ich würde vorschlagen, dass Sie Ihr CSS von display ändern: none to display: verdeckt, das das Steuerelement ausblenden wird, aber den Raum beibehalten verhindert das herumspringen.

Answer 2

Der Trick besteht darin, das Schlüsselwort "this" zu verwenden und dann einen Verweis auf die Zeile zu erhalten und die Beschriftung von dort zu ändern.

Ich habe einen Beitrag here, wo ich ein GridView mit einer CheckBox-Spalte und einer Name-Spalte habe. Wenn das Kontrollkästchen aktiviert ist, ändert sich die Hintergrundfarbe des Namens in dieser Zeile. Ich beginnen diese mit diesem Attribut in der Checkbox Kolumne:

onclick="toggleSelected(this)" 

dann habe ich eine JavaScript-Funktion, die die Zeile findet und ändert die nächste Zelle:

function toggleSelected(sender) { 
    // note that at this point the "this" is now "sender" -which is the checkbox 
    // get a reference to the row using the helper function - see below. 
    var row = GetParentElementByTagName(sender, "TR"); 

    if (sender.checked) 
     row.cells[1].className = "selected"; 
    else 
     row.cells[1].className = ''; 

} 

Dadurch wird die Hilfsfunktion verwendet:

function GetParentElementByTagName(element, tagName) { 
    var element = element; 
    while (element.tagName != tagName) 
     element = element.parentNode; 
    return element; 
} 

Sie haben ein etwas anderes requirment, so dass Sie so etwas wie verwenden würden:

var lbl = row.cells[1].childNodes[0].getElementsByTagName('label') 

, um einen Verweis auf Ihr Etikett zu erhalten.