Question

I have a RadGrid on one of my webforms, and I’m using InPlace (inline) editing, with an empty row at the bottom for inserts.

When the grid loads, the columns are being automatically resized post-render (you can actually see the columns adjusted when the page is loading) using JavaScript (I’m assuming), but the inputs in the columns are not being resized to fit the adjusted column widths, which leaves a lot of white space. I have tried to hook into the JavaScript method that auto-resizes the columns, but it doesn’t appear possible.

I would like to use jQuery to find all the inputs after the columns have been resized, and resize them to fit the width of the columns. The only inputs that need to be resized are TextBoxes and DropDowns, and I don’t need to calculate the width – just set the width of the controls to 100%, so they fill the available space in the columns.

EDIT

I should also note that the inputs are set to 100% width in the markup, but they don’t scale when the columns are resized. It seems like this behavior is incorrect.

The RadGrid does have a ClientSettings section where you can subscribe to many client-side events, but the resizing events do not fire when the grid is auto-resized; only when a user resizes the column manually.

Can some jQuery savvy individuals please suggest some ideas on how I can do this?

Here is some sample markup of the 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

No need for javascript, do it with CSS
CSS

#ClientID_OF_GRID input[type="text"] {
 width: 100% !important;
}

In your case your columns will be resized by content do this

 .grid-input {
     width: 100% !important;
    }

then call this script when column resize is finished

$('#grid_client_id input[type="text"]').setClass('grid-input');