Wie erhält man die Breite einer GridView-Spalte im rowbound-Ereignis?

Question

Ich habe eine Spalte namens "Weightage" in GridView. Ich habe ein Textfeld außerhalb der Gridview namens "Total" Ich möchte dieses Textfeld direkt unter der Spalte Gewichtung ausrichten.

</asp:GridView> 
    <div> 
      <span id="q1totalweightage" runat="server">Total<asp:TextBox ID="txtq1totalweightage" runat="server" ></asp:TextBox></span> 
    </div> 

-Code Behind:

protected void grvGoals_RowDataBound1(object sender, GridViewRowEventArgs e) 
{ 
    switch (e.Row.RowType) 
    { 
     case DataControlRowType.DataRow: 
     q1totalweightage.Attributes.Add("style", "margin-left: " +  e.Row.Cells[0].Width + "px;"); 
break; 
    } 

HINWEIS: wird angenommen, dass ich nicht diese total Textbox in Fußzeile aus irgendeinem Grund platzieren können.

Answer 1

Sie kann nicht erhalten Sie die berechnete Breite der GridView Spalte in Server-Seite. Dazu müssen Sie JavaScript verwenden.

Dafür haben Sie einen Klassennamen auf Ihre Spalte wie diese

<asp:TemplateField HeaderText="Contact Name"> 
    <ItemTemplate> 
     <asp:Label ID="ContactName" runat="server" 
      CssClass="my-column" 
      Text='<%# Eval("ContactName") %>'> 
     </asp:Label>     
    </ItemTemplate> 
</asp:TemplateField> 

auch keine Notwendigkeit geben runat="server" für die Spanne zu verwenden.

<span id="q1totalweightage">Total 
    <asp:TextBox ID="txtq1totalweightage" runat="server" > 
    </asp:TextBox> 
</span> 

Vanilla JavaScript

document.addEventListener("DOMContentLoaded", function (event) { 
    var column = document.getElementsByClassName("my-column")[0].parentNode; 
    var row = column.parentNode; 
    var newMargin = row.clientWidth - column.clientWidth; 
    document.getElementById("q1totalweightage").style.marginLeft = newMargin + "px"; 
}); 

Oder jQuery

$(document).ready(function() { 
    var column = $(".my-column:first").closest("td"); 
    var row = column.closest("tr"); 
    //var newMargin = row.width() - column.width(); 
    var newMargin = row.outerWidth() - column.outerWidth(); 
    $("#q1totalweightage").css("margin-left", newMargin + "px"); 
}); 

P. S: Dieser Code geht davon aus, dass die Spalte Kontakt Name ist die letzte Spalte der Tabelle.