我的一个网络表单上有一个 RadGrid,我正在使用InPlace
(内联)编辑,底部有一个空行用于插入。
当网格加载时,使用 JavaScript(我假设)在渲染后自动调整列的大小(您实际上可以在页面加载时看到调整的列),但列中的输入没有调整大小以适应调整列宽,留下大量空白。我试图挂钩自动调整列大小的 JavaScript 方法,但它似乎不可能。
我想在调整列大小后使用 jQuery 查找所有输入,并调整它们的大小以适应列的宽度。唯一需要调整大小的输入是and 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>