This is a migrated thread and some comments may be shown as answers.

Radgrid width/column width not 100% at first Load

5 Answers 168 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Setiawan
Top achievements
Rank 1
Setiawan asked on 12 Nov 2014, 02:15 AM
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>

5 Answers, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 14 Nov 2014, 12:16 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Setiawan
Top achievements
Rank 1
answered on 08 Jan 2015, 07:15 PM
I didn't see any attachment. And I am sorry I just saw this reply.
0
Setiawan
Top achievements
Rank 1
answered on 09 Jul 2015, 03:13 AM

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?

0
Venelin
Telerik team
answered on 13 Jul 2015, 06:33 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Setiawan
Top achievements
Rank 1
answered on 18 Jun 2019, 02:37 AM

I solved the issue with the following trick:

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

 

Thank you.

Tags
Grid
Asked by
Setiawan
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Setiawan
Top achievements
Rank 1
Share this question
or