Radgrid width/column width not 100% at first Load

6 posts, 0 answers
  1. Setiawan
    Setiawan avatar
    9 posts
    Member since:
    Jul 2011

    Posted 11 Nov 2014 Link to this post

    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>
  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 14 Nov 2014 Link to this post

    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.

     
  3. Setiawan
    Setiawan avatar
    9 posts
    Member since:
    Jul 2011

    Posted 08 Jan 2015 in reply to Venelin Link to this post

    I didn't see any attachment. And I am sorry I just saw this reply.
  4. Setiawan
    Setiawan avatar
    9 posts
    Member since:
    Jul 2011

    Posted 08 Jul 2015 in reply to Venelin Link to this post

    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?

  5. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 13 Jul 2015 Link to this post

    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
  6. Setiawan
    Setiawan avatar
    9 posts
    Member since:
    Jul 2011

    Posted 17 Jun in reply to Venelin Link to this post

    I solved the issue with the following trick:

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

     

    Thank you.

Back to Top