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

我在我的一个WebForm上有一个RadGrid，我正在使用

InPlace

（内联）编辑，底部有一个空行用于插入

当网格加载时，使用JavaScript（我假设）在渲染后自动调整列的大小（您实际上可以看到在页面加载时调整的列），但是列中的输入没有调整大小以适应调整后的列宽，这会留下大量空白。我曾尝试使用JavaScript方法自动调整列的大小，但似乎不可能

我想在调整列的大小后使用jQuery查找所有输入，并调整它们的大小以适应列的宽度。唯一需要调整大小的输入是

文本框

和

下拉列表

，我不需要计算宽度-只需将控件的宽度设置为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>           

---

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

---

我同意Senad的观点，CSS是一条出路

但是，如果您真的想使用JavaScript，下面是来自的RadGrid函数：

并设置客户端设置：

<telerik:RadGrid ID="RadGrid1" runat="server">
    <ClientSettings>
        <Resizing AllowColumnResize="true" />
        <ClientEvents OnColumnResized="ColumnResized" />
    </ClientSettings>
</telerik:RadGrid>

---

在

ColumnResized

JavaScript函数中，您可以直接设置子控件。

您最好显示生成的

html

。这会在自动调整大小逻辑后生效吗？这才是真正的问题——在使用JavaScript渲染后，列的大小正在调整。你可能会认为输入会自行缩放，看到宽度设置为100%，但它们没有。+1这让我有了一部分方法，这总比没有好，但应用此样式似乎会中止自动调整大小，自动调整大小将列设置为相对于内容的宽度（因此地址字段的宽度大于邮政编码字段的宽度）。好的，我理解您的问题，您的脚本正在调整有关内容的列的大小，并且编辑框是100%宽度，因此字段不会调整大小。因此，您可以做的是按照我的帖子中的append进行操作。这就是我所说的-看起来很有希望。我会马上通知您。如果您回忆起我的描述，此问题与用户所做的调整大小无关（

OnColumnResized

，

OnColumnResized

），而是它在渲染后完成的自动调整大小。这也是我怀疑CSS方法的原因-输入已设置为100%宽度，但当发生自动调整大小时，输入无法缩放以适应调整后的列宽。

<telerik:RadGrid ID="RadGrid1" runat="server">
    <ClientSettings>
        <Resizing AllowColumnResize="true" />
        <ClientEvents OnColumnResized="ColumnResized" />
    </ClientSettings>
</telerik:RadGrid>