2009-06-20 16 views
0

これが私の前の質問へのフォローアップである:私はそれの下にLinkBut​​tonコントロールとラベルを持っているGridViewの列で link textGridViewの列の中に隠れて/非表示解除コントロール - シフト問題

リンクボタンをクリックするとラベルを非表示にしたい。私はポストバックが欲しくないので、javascriptを使用します。 コード:

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

      } 

     } 

問題は、私はボタンをクリックすることでラベルを再表示するとき、LinkBut​​tonコントロールがシフトしていることであるビットは、上位には、細胞内の元の位置です。 gridviewsセルでリンクボタンの位置を保持することはできますか?

答えて

0

CSSをdisplay:noneからdisplay:hiddenに変更することをお勧めします。これはコントロールを非表示にしますが、飛び越えないようにスペースを維持します。

+0

たくさんのテキストを含む隠れたラベルがセルの空きスペースを埋めるので、これはうまくいかず、これは嫌です! –

0

トリックは、キーワード "this"を使用して、行への参照を取得し、そこからラベルを変更することです。

投稿文はhereです。ここには、CheckBox列と名前列を持つGridViewがあります。 CheckBoxをオンにすると、その行のNameの背景色が変わります。私、このチェックボックスの列でこの属性で始まるん:

onclick="toggleSelected(this)" 

その後、私は行を見つけ、次のセルを変更するJavaScript関数を持っている:

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 = ''; 

} 

これは、ヘルパー関数を使用しています。

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

あなたがのようなものを使用しますので、あなたがわずかに異なるのrequirmentを持っている:

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

あなたのラベルへの参照を得る。

関連する問題