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

RadGrid size problem

7 Answers 172 Views
Grid
This is a migrated thread and some comments may be shown as answers.
André Azevedo
Top achievements
Rank 1
André Azevedo asked on 30 Jul 2010, 11:11 AM
Hi,

i have a problem with a radgrid that is losing the height when it is in a modal popup.
i have already add the css .rgDataDiv height: auto, but it get's passed by a inline style that has a height of 10px, and i can't find any thing that is putting that size to the grid.
in attach i will send the pictures of the error and style that it in the problem.

thanks

7 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 02 Aug 2010, 04:47 PM
Hi André,

Possible reason for this behavior is if your grid is ajaxified. Here is an example, which demonstrates how to obtain the client ID of an update panel and set a 100% height style with CSS:
http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

The easiest way to achieve your goal is to use the UpdatePanelHeight property of the AjaxUpdatedControl tag in RadAjaxManager.

If the issue persists, you can open a formal support ticket, and send us a small working project, demonstrating your setup, and showing the unwanted behavior. We will debug it locally, and advise you further.

Greetings,
Pavlina
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
André Azevedo
Top achievements
Rank 1
answered on 02 Aug 2010, 05:14 PM
hi,

the problem isn't fixing the size on a normal page, but is the size on a modal popup extender.
when it's in a modal is gets a 10px height in the rgDataDiv that i cant bypass it, as you can see in the pictures that i've posted before.
it works fine in a normal window, but in popup it gets a 10px height.

thanks in advance.
0
Pavlina
Telerik team
answered on 05 Aug 2010, 02:05 PM
Hi André,

In order to progress in the resolution of this problem I will ask you to open up a formal support ticket and send your files for debugging.

Thank you.

Greetings,
Pavlina
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
André Azevedo
Top achievements
Rank 1
answered on 06 Aug 2010, 11:27 AM
hello,

I've fond the solution for the problem. instead of setting a height to the grid i have set a scroll height  and it works perfectly.

thanks for the time spent.

by the way here is a sugestion, permit that the person that started the post to mark his final response has anser, for cases like this.
0
KidSysco
Top achievements
Rank 1
answered on 30 May 2014, 03:51 PM
OK I realize this is an old post but I just hit this problem and I fixed it as follows...

For the most part, it is due to ajax-ified radgrids and their parent container as indicated in this post.

However, my situation was very specific.

I needed to specify the RadSplitter conatining the RadGrid as the Ajax Updated ControlID in my AjaxSettings. If I specify the RadGrid as the Ajax Updated ControlID then it works fine in old IE versions but will not function in modern browsers due to injecting the 10px height setting inline as shown in the example above.

So do this...

<telerik:AjaxUpdatedControl ControlID="RadSplitterPageContent" LoadingPanelID="RadAjaxLoadingPanelSearch" />

Not this...

<telerik:AjaxUpdatedControl ControlID="RadGridSearchResults" LoadingPanelID="RadAjaxLoadingPanelSearch" />
0
Stacy
Top achievements
Rank 1
answered on 22 Sep 2017, 12:37 PM

I have this same issue where I have a popup which contains a table.  one side is 20% wide, other is 80%.  I have a grid in the 20% wide side (left side) and in IE and Chrome, it is fine, but in firefox, the .rgDataDiv class is injecting a height of 10px.  No ajax.  Any ideas?

<table style="width: 100%; height: 88vh; border-spacing: 0; border-collapse: collapse; border: 0">
    <tr>
        <td width="20%">
            <RadGrid
                ID="PayrollProcessSummaryGrid"
                runat="server"
                GridLines="None"
                Height="100%"
                AutoAssignModifyProperties="true">
 
                <ClientSettings AllowColumnsReorder="false" ReorderColumnsOnClient="false">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <Selecting AllowRowSelect="true" />
                    <ClientEvents OnRowClick="onRowClick" OnGridCreated="onGridCreated" OnCommand="onCommand" />
                </ClientSettings>
 
                <MasterTableView
                    AutoGenerateColumns="false"
                    CommandItemDisplay="Top"
                    AllowSorting="false">
 
                    <CommandItemTemplate></CommandItemTemplate>
 
                    <Columns>
                        <wasp:GridDateTimeControl DataField="field1" LabelText="*field1*" SortExpression="field1" UniqueName="field1" />
                        <wasp:GridDateTimeControl DataField="field2" LabelText="*field2*" SortExpression="field2" UniqueName="field2" />
                    </Columns>
                </MasterTableView>
 
                <HeaderContextMenu EnableAutoScroll="true" />
            </RadGrid>
        </td>
        <td width="80%">
            <telerik:RadSplitter ID="RadSplitter" runat="server" Orientation="Horizontal" Height="100%" Width="100%" VisibleDuringInit="false" OnClientLoad="onClientLoad" BorderSize="0">
                <telerik:RadPane ID="RadPane" runat="server" Width="100%" />
            </telerik:RadSplitter>
        </td>
    </tr>
</table>
0
Stacy
Top achievements
Rank 1
answered on 26 Sep 2017, 12:02 PM

I hacked my way around this for now, again this is a FireFox issue only.
Even though my table has a height set, I had to set my TD to have the same height as well.
So the html was:

 

<table style="width: 100%; height: 88vh; border-spacing: 0; border-collapse: collapse; border: 0">
    <tr>
        <td style="width:20%">
            <Grid....
                ID="blah"
                runat="server"
                GridLines="None"
                Height="100%"
                AutoAssignModifyProperties="true">
  
is now
  
<table style="width: 100%; height: 88vh; border-spacing: 0; border-collapse: collapse; border: 0">
    <tr>
        <td style="width:20%; height:88vh"> <!-- had to set height here for FIREFOX to work -->
            <Grid....
                ID="blah"
                runat="server"
                GridLines="None"
                Height="100%"
                AutoAssignModifyProperties="true">
Tags
Grid
Asked by
André Azevedo
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
André Azevedo
Top achievements
Rank 1
KidSysco
Top achievements
Rank 1
Stacy
Top achievements
Rank 1
Share this question
or