Question

我的某个网络表单上有一个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>

Answer 1

不需要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');

Answer 2

我同意Senad，CSS是要走的路。

但是，如果真的想要做JavaScript，那么这里是来自docs的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函数中，您可以直接设置子控件。

使用jQuery调整网格中所有可编辑字段的大小

2 个答案: