2

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

2 回答 2

4

不需要 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');
于 2011-09-16T19:11:54.340 回答
1

我同意 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>

在ColumnResizedJavaScript 函数内部，您可以直接设置子控件。

于 2011-09-16T19:18:47.097 回答