Using jQuery to resize all editable fields in grid

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>

You'd be better off showing the generated `html`. – Jack Sep 16 '11 at 19:11 — Jack, Sep 16 '11 at 19:11

Senad Meškin · Accepted Answer · 2011-09-16T19:53:13.727

4

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');

edited Sep 16 '11 at 19:53

answered Sep 16 '11 at 19:11

Senad Meškin

13,597
4
37
55

Will this take effect after the auto-resizing logic though? That's the real issue - the columns are being resized post-render with JavaScript. You would think that the inputs would scale on their own seeing that the width is set to 100%, but they don't. – James Johnson Sep 16 '11 at 19:18
+1 This gets me part of the way there, which is better than nothing, but applying this style seems to abort the auto-resize, which sets the columns at widths relative to the content (so the width of the address field is larger than the width of the zip code field). – James Johnson Sep 16 '11 at 19:37
ok I understand your problem, your script is resizing columns regarding content, and edit box is 100% width so field wont be resized. So what you can do is follow append from my post – Senad Meškin Sep 16 '11 at 19:39
That's what I'm talking about - that looks promising. I'll let you know in a sec. – James Johnson Sep 16 '11 at 19:42

score 1 · Answer 2 · answered Sep 16 '11 at 19:18

I agree with Senad, CSS is the way to go.

But, if you really want to do JavaScript, here's the RadGrid function from the docs:

function ColumnResized(sender, eventArgs) {
    alert("Column with Index: " + 
     eventArgs.get_gridColumn().get_element().cellIndex + 
     " was resized, width: " + 
     eventArgs.get_gridColumn().get_element().offsetWidth);
}

And set the client settings:

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

Inside the ColumnResized JavaScript function, you can set child controls directly.

If you recall my description, this issue is not related to resizing done by the user (`OnColumnResized`, `OnColumnResizing`), but rather the auto-resize that it done post-render. That is also why I have doubts about the CSS approach - the inputs are already set to 100% width, but when the auto-resize occurs the inputs do not scale to fit the adjusted column width. — James Johnson, Sep 16 '11 at 19:26

Using jQuery to resize all editable fields in grid

2 Answers2