Radgrid width/column width not 100% at first Load

[Setiawan]

Hi,
I am having trouble making this right. So I have a page containing one radgrid showed in a iframe (as attached).
The weird this is that the first time it shows, the grid width is not 100% consuming the whole iframe width. But, when I page into page 2, it resizes itself to 100% (the width I was expecting to be in the first load).

Any idea on how to fix this?
I use radgrid width 100% and all other column item and header is in percentage.

<telerik:RadGrid ID="gvPreAddReturnsRequiringUserConfirmation" runat="server" Width="100%"
                    AllowPaging="true" BorderStyle="None" ShowHeader="true" ShowFooter="false" PageSize="2"
 AutoGenerateColumns="false">
                    <PagerStyle AlwaysVisible="false" />
                    <MasterTableView RetrieveAllDataFields="false" ClientDataKeyNames="PreAddReturnID"
                        DataKeyNames="PreAddReturnID">
                        <Columns>

                            <telerik:GridBoundColumn UniqueName="UniqueIdentifier" DataField="UniqueIdentifier"
                                HeaderText="Unique ID">
                                <ItemStyle Width="15%" />
                                <HeaderStyle Width="15%" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="FirstName" DataField="FirstName" HeaderText="First Name">
                                <ItemStyle Width="20%" HorizontalAlign="Center" />
                                <HeaderStyle Width="20%" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="LastOrBusinessName" DataField="LastOrBusinessName"
                                HeaderText="Last/Business Name">
                                <ItemStyle Width="20%" HorizontalAlign="Center" />
                                <HeaderStyle  Width="20%" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="StreetAddress" DataField="StreetAddress" HeaderText="Address">
                                <ItemStyle Width="15%" HorizontalAlign="Center" />
                                <HeaderStyle  Width="15%" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="City" DataField="City" HeaderText="City">
                                <ItemStyle Width="10%" HorizontalAlign="Center" />
                                <HeaderStyle  Width="10%" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="StateCode" DataField="StateCode" HeaderText="State">
                                <ItemStyle Width="5%" HorizontalAlign="Center" />
                                <HeaderStyle Width="5%" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="ZipCode" DataField="ZipCode" HeaderText="Zip Code">
                                <ItemStyle Width="10%" HorizontalAlign="Center" />
                                <HeaderStyle  Width="10%" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="IOCMatchIndicator" DataField="IOCMatchIndicator"
                                HeaderText="Match Indicator">
                                <ItemStyle Width="5%" HorizontalAlign="Center" />
                                <HeaderStyle Width="5%" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                        </Columns>
                        <NoRecordsTemplate>
                            <div class="box_notification info">
                                No PreAdd Returns</div>
                        </NoRecordsTemplate>
                    </MasterTableView>
                </telerik:RadGrid>

[Venelin]

Hi Setiawan,

I have tested your code but it works as expected on my side. Therefore I am attaching a sample test page. Could you please review it and tell what need to be changed in order to replicate the problem? Just open Default2.aspx, it should load in an iframe Default1.aspx (whre the grid resides).

Regards,
Venelin
Telerik

 

 

[Setiawan]

I didn't see any attachment. And I am sorry I just saw this reply.

[Setiawan]

If I access it directly (access via its url), the problem goes away. I guess it's only behaving incorrectly when it's loaded via iframe fancybox.

Any ideas?

[Venelin]

Hello Setiawan,

Could you please check again,  you should see the attachment now?

As for the initial question RadGrid should expand to 100% of the available width even if you don't set the Width property to 100%. This is because its wrapping container is a simple <div> element, which by default expands that way. All block-level html elements does unless something different is set.

So, there is something that makes the grid to deviate from its default behavior. This could be:
- some custom JavaScript logic that resizes RadGrid
- the wrapping container(s) doesn't expand to 100% for some reason and thus leaving the impression that the problem is in RadGrid.
- custom CSS interfering with grid's styles

Please check the above statements and let us know about the result.

Regards,
Venelin
Telerik

[Setiawan]

I solved the issue with the following trick:

<MasterTableView Width="100%" TableLayout="Fixed">

 

Thank you.