Question

我有一个名为＆＃34的栏目; Weightage＆＃34;在GridView中。我在gridview外面有一个名为＆＃34; Total＆＃34;我想将此文本框对齐在“权重”列下方。

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

代码背后：

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

注意：假设由于某种原因我无法将此总文本框放在页脚中。

Answer 1

您无法获取服务器端GridView列的计算宽度。为此，您必须使用JavaScript。

为此，你必须像这样给你的列提供一个类名

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

也不需要使用runat="server"作为范围。

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

或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：此代码假定列联系人姓名是表格的最后列。

如何在rowbound事件中获取GridView列的宽度？

1 个答案: