使用jQuery调整网格中所有可编辑字段的大小
我在我的一个webforms上有一个RadGrid，我正在使用InPlace (内联)编辑，底部是一个空行，用于插入。
当网格加载时，将使用JavaScript (我假设)自动调整列的大小后呈现(在加载页面时实际上可以看到调整的列)，但是列中的输入没有调整大小以适应调整后的列宽，这就留下了大量的空白。我尝试过连接到自动调整列大小的JavaScript方法，但这似乎不可能。
我希望在调整列的大小后使用jQuery查找所有输入，并调整它们的大小以适应列的宽度。唯一需要调整大小的输入是TextBoxes和DropDowns，我不需要计算宽度--只要将控件的宽度设置为100%，它们就可以填充列中的可用空间。
编辑
我还应该注意，输入在标记中被设置为100%的宽度，但是当调整列的大小时，它们不会缩放。这种行为似乎是不正确的。
RadGrid有一个ClientSettings部分，您可以订阅许多客户端事件，但是当网格自动调整大小时，调整大小的事件不会触发；只有当用户手动调整列大小时才会触发。
一些精通jQuery的人能给我一些关于我如何做到这一点的建议吗？
下面是RadGrid的一些示例标记：
<telerik:RadGrid ID="grdVendorAddresses" runat="server">
<MasterTableView AutoGenerateColumns="false" InsertItemDisplay="Bottom" EditMode="InPlace" DataKeyNames="AddressID, AddressTypeID, IsActive">
<ItemStyle Font-Size="12px" Font-Names="Verdana" Wrap="false" />
<HeaderStyle Font-Size="12px" Font-Names="Verdana" Wrap="false" />
<AlternatingItemStyle Font-Size="12px" Font-Names="Verdana" Wrap="false" />
<Columns>
<telerik:GridEditCommandColumn UniqueName="EditButton" ButtonType="ImageButton" EditImageUrl="/images/edit_icon_pencil.png" InsertImageUrl="/images/save_icon_small.png" UpdateImageUrl="/images/save_icon_small.png" CancelImageUrl="/images/cancel_icon.png">
<ItemStyle HorizontalAlign="Center" Width="60" />
</telerik:GridEditCommandColumn>
<telerik:GridTemplateColumn HeaderText="Address" DataField="StreetAddress" Resizable="false">
<ItemStyle HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Left" />
<ItemTemplate>
<%#Eval("StreetAddress")%>
</ItemTemplate>
<EditItemTemplate>
<div style="padding:5px 0px 5px 0px;">
<telerik:RadTextBox ID="txtStreetAddress" runat="server" Skin="Sunset" Text='<%#Bind("StreetAddress")%>' Font-Size="12px" Font-Names="Verdana" Width="100%"></telerik:RadTextBox>
</div>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="City" DataField="City">
<ItemStyle HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Left" />
<ItemTemplate>
<%#Eval("City")%>
</ItemTemplate>
<EditItemTemplate>
<div style="padding:5px 0px 5px 0px;">
<telerik:RadTextBox ID="txtCity" runat="server" Skin="Sunset" Text='<%#Bind("City")%>' Font-Size="12px" Font-Names="Verdana" Width="100%"></telerik:RadTextBox>
</div>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Country" DataField="CountryID">
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
<ItemTemplate>
<%#Eval("CountryName")%>
</ItemTemplate>
<EditItemTemplate>
<div style="padding:5px 5px 5px 5px;">
<telerik:RadComboBox ID="ddlCountry" runat="server" Skin="Sunset" Font-Size="12px" Font-Names="Verdana" DataSourceID="ddsCountries" Height="200" DataTextField="CountryName" DataValueField="CountryID" Width="100%" SelectedValue='<%#Bind("CountryID")%>'></telerik:RadComboBox>
</div>
</EditItemTemplate>
</telerik:GridTemplateColumn>
</MasterTableView>
</telerik:RadGrid> 回答 2
Stack Overflow用户
发布于 2011-09-16 19:11:54
不需要javascript，可以用CSS CSS来完成。
#ClientID_OF_GRID input[type="text"] {
width: 100% !important;
}在您的情况下，您的列将按内容调整大小，这样做
.grid-input {
width: 100% !important;
}然后在完成列调整大小时调用此脚本。
$('#grid_client_id input[type="text"]').setClass('grid-input');Stack Overflow用户
发布于 2011-09-16 19:18:47
我同意Senad的观点，CSS是可行的。
但是，如果您真的想做JavaScript，下面是来自文档的RadGrid函数
function ColumnResized(sender, eventArgs) {
alert("Column with Index: " +
eventArgs.get_gridColumn().get_element().cellIndex +
" was resized, width: " +
eventArgs.get_gridColumn().get_element().offsetWidth);
}并设置客户端设置：
<telerik:RadGrid ID="RadGrid1" runat="server">
<ClientSettings>
<Resizing AllowColumnResize="true" />
<ClientEvents OnColumnResized="ColumnResized" />
</ClientSettings>
</telerik:RadGrid>在ColumnResized JavaScript函数中，可以直接设置子控件。
https://stackoverflow.com/questions/7449300
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号