GridView列宽与HtmlTableCell宽度匹配 [英] GridView Column width matching with HtmlTableCell width
问题描述
大家好
我正在使用带有3列和2行的HtmlTable。我在第2行内创建GridView，所有3个cols。所以我的顶行HtmlTable充当GridView的标题。我没有使用GridView标题显示标题。相反，我只使用它来排序单词'Sort'，所以我将所有列标题名称放在HtmlTable第一行。我设置每个gridview排序列宽的HtmlTableCell宽度。当gridview切换到编辑模式时，cols变宽，作为结果我必须根据gridview的cols宽度设置new。但是它没有反映我的设置也注意到当我调整一列时其他因桌子性质而变得混乱，但我想知道这是否真的可能？我曾经在GridView划船事件中设置宽度。也请注意我的网格视图宽度没有设置。你能告诉别人为什么？这可以用代码隐藏或其他任何方式完成吗？我尝试使用文字控件和InnerHtml各方面但没有成功。
问候
Thusith
这是我的asp.net.cs类和codebehind < br $>
Hi guys
I am using HtmlTable with 3 cols and 2 rows. I create GridView inside 2nd row spaning all 3 cols. so my top row of HtmlTable acts as heading for GridView. I am NOT using GridView header as displaying headings. instead I use it just to Sort with word 'Sort" so I put all column heading names in HtmlTable 1st row. I am setting HtmlTableCell width each of gridview sort column width. when the gridview swaps into edit mode it cols get wider and as a result I have to set the new with according to cols width of gridview. but its not reflecting my settings also I noticed when I adjust one column others get mess up due to table nature, but I want to know whether this is really possible?. I used to set width in GridView rowediting event. Please also not that my gridview width is not set. Could you please tell someone why? and how this could be done in codebehind or any other way? I tried every way using literal control and InnerHtml but no success.
regards
Thusith
This is my asp.net.cs class and codebehind
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" Runat="Server">
<div id="grid">
<table id="BaseTable" runat="server" border="0" cellpadding="0" cellspacing="1" class="GridviewTable">
<tr class="GridviewTabletr">
<td id="_code" runat="server">
Code
</td >
<td id="des" runat="server" >
Description
</td>
<td id="Info" runat="server">
Delete Insert
</td>
</tr>
<tr>
<td colspan="3">
<asp:GridView CssClass="GridViewStyle" runat="server"
ID="CurrencyGridView"
DataKeyNames="CurrCode"
AutoGenerateColumns="False"
AllowPaging="True"
AllowSorting="True" GridLines="None"
PagerSettings-Mode="NextPreviousFirstLast"
onrowcancelingedit="CurrencyGridView_RowCancelingEdit"
OnRowUpdating="CurrencyGridView_RowUpdating"
OnRowDeleting="CurrencyGridView_RowDeleting"
OnLoad="Page_Load"
OnRowEditing="CurrencyGridView_RowEditing"
OnPreRender="CurrencyGridView_Render"
DataSourceID="CurrenciesDataSource"
ondatabinding="CurrencyGridView_DataBinding"
onpageindexchanging="CurrencyGridView_PageIndexChanging">
<Columns>
<asp:TemplateField HeaderText="Sort" SortExpression="Currcode" >
<EditItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Currcode") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Currcode") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle ForeColor="#df5015" CssClass="HeaderStyle" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Sort" SortExpression="description" >
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("description") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("description") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle ForeColor="#df5015" CssClass="HeaderStyle"/>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" ItemStyle-BorderStyle="None"
ButtonType="Link" HeaderStyle-BorderStyle="None" ControlStyle-CssClass="GridViewLinkButtonStyle">
<HeaderStyle Width="80px" />
</asp:CommandField>
<asp:CommandField ShowDeleteButton="True" ItemStyle-BorderStyle="None"
ButtonType="Link" HeaderStyle-BorderStyle="None" ControlStyle-CssClass="GridViewLinkButtonStyle">
<HeaderStyle Width="80px" />
</asp:CommandField>
</Columns>
<PagerSettings Mode="NextPreviousFirstLast">
</PagerSettings>
<PagerStyle ForeColor="Orange" CssClass="PagerStyle" />
</asp:GridView>
</td>
</tr>
</table>
</div>
</asp:Content>
protected void CurrencyGridView_RowEditing(object sender, GridViewEditEventArgs e)
{
DataControlFieldCollection fields = ((GridView)sender).Columns;
LiteralControl lc = (LiteralControl)Page.Controls[0].Controls[3].Controls[3].Controls[0];
HtmlTableRow r = (HtmlTableRow)Page.Controls[0].Controls[3].Controls[3].Controls[1].Controls[0];
foreach (DataControlField fld in fields)
{
switch (fld.SortExpression)
{
case "Currcode":
HtmlTable tb = (HtmlTable)lc.FindControl("BaseTable");
HtmlTableCell cel1 = (HtmlTableCell)tb.FindControl("_code");
cel1.Width = Convert.ToString(fld.ControlStyle.Width.Value);
break;
case "description":
HtmlTable tb1 = (HtmlTable)lc.FindControl("BaseTable");
HtmlTableCell cel2 = (HtmlTableCell)tb1.FindControl("des");
cel2.Width = Convert.ToString(fld.ControlStyle.Width.Value);
break;
}
}
}推荐答案
I think the problem is inside EditItemTemplate’s html controls.
Giving width to table will not work if your html control’s width are larger then table’s width. So try to give width of control in your EditItemTemplate.
Hope this help
I think the problem is inside EditItemTemplate's html controls.
Giving width to table will not work if your html control's width are larger then table's width. So try to give width of control in your EditItemTemplate.
Hope this help
function SyncTableColumns() {
var grid = document.getElementById("<%= dgvTasks.ClientID %>");
var table = document.getElementById("tblContainer");
for (var i = grid.rows[0].cells.length - 1; i > -1; i--)
{
table.rows[0].cells[i].style.width = (parseInt(grid.rows[0].cells[i].offsetWidth)) + 'px';
}
}Have you tried by giving width attribute to all elements inside edit template
Try by this Please!!!
Have you tried by giving width attribute to all elements inside edit template
Try by this Please!!!
这篇关于GridView列宽与HtmlTableCell宽度匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
