Grid Auto Height (%) which supports according to browser height change.

[Vargis]

We want to set the Grid Height automatically according to browser height. When full screen is activated it should acquired the free vertical space maximum and then show data inside scroll if there is more data rows.

There may be other controls along with this grid.

I had visit and go through the link below
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx

Attached files

• 54468_grid.zip

and downloaded the zip file but i cant run. Please help me to view that project.

Also I am attaching the sample what we exactly want. Please have a look on the below attached image.

[Pavlina]

Hi,

I suggest that you examine the grid_100_width_height.zip project and let us know if any questions or problems arise.

Regards,
Pavlina
the Telerik team

[Vargis]

We are currently installed 4.0.30319. Is it match for this?

[Vargis]

Telerik Team please reply for the matter mentioned above

And also please check the attached file. In IE7 checkbox in the grid row going outside of the grid.

[Pavlina]

Hi Vargis,

In case you are using RadControls for ASP.NET you should refer to the project attached below:
GridWith100PercHeightAndResizeOnBrowserResize.zip

Regarding the problem with checkboxes:
This is a well known position: relative bug in IE6/7. To fix it, you need to add position:relative to any scrollable container(RadGrid in your case) in which these checkboxes are located:

.rgDataDiv
{
   position:relative;
}

Regards,
Pavlina
the Telerik team

[Vargis]

html, body, form{
    min-height: 100%;
    height: auto;
    height: 100%!important;
}

So Rad Grid Height in Percentage(Height="100%") ...normal asp page its working in  IE and other browser. But in RadAjaxManager added pages Height in percentage is not working in IE. So we search in the forum and found a method to solve this..

<script type="text/javascript">
    function RowDblClick(sender, args) {
               
                var editedRow = args.get_itemIndexHierarchical();

                $find("<%= rgRegion.ClientID %>").get_masterTableView().editItem(editedRow);

            }
            </script>


<style type="text/css">
html {overflow:hidden;}
html,body,form,#<%= rgRegionPanelClientID %>{margin:0;height:100%;}
</style>

Now its working but a blank space under Grid last row in IE.

[Pavlina]

Hi,

If you have a live url or an isolated project which exhibits the problem, please share it with us so we can test it locally.

Regards,
Pavlina
the Telerik team

[Vargis]

How we can set "min-width" to radgrid. Is it possible??

In our project we dont have to fix the Radgrid width in pixels/fixed. In this case we are facing a big problem. If there is 10columns and after edit when we save the data one additional column for remarks will be shown. At that time the grid row alignment will break. Please check the attached screen shot...horizontal scroll works only when we put the Radgris width in pixels(fixed).

Also we want Image button
...will proved transparent PNG icons but wants to change its background according to Theme.

Thanks in Advance

[Pavlina]

Hello,

Note that to display horizontal scroll for navigation, you need to make sure that the total width of the columns (either auto-generated or declaratively set) exceeds the width of the grid (as demonstrated in  this online demo). Otherwise the columns will fit in the available space and horizontal scroll will not appear.

All the best,
Pavlina
the Telerik team

[Vargis]

In CSS
html, body, form {width:100%; height:99%!important;}
.gridWrap {height:99%}

And added UpdatePanelsRenderMode="Inline"
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">

<div class="gridWrap">
<telerik:RadGrid ID="rgAirport" runat="server" CellSpacing="0"  Height="100%">

Percentage Works in all browsers But the issue is ..
-------------------------------------------------------------------------------------------------------------------------------

Its height % is not working while using

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="RadPageView1" runat="server">


Pls help very urgent ....Thanks in Advnce

[Pavlina]

Hello,

Keep in mind that if the grid is nested inside containers, at least one of them should have fixed height dimension in pixels. Thus the control will calculate its dimensions in regards with this container pixel height. For more information refer to this code library.

Regards,
Pavlina
the Telerik team

[Vargis]

Mainly 2 errors

1. Empty Row above Radgrid Header

<table id="rgQualificationType_GroupPanel_TB" class="rgGroupPanel" style="width:100%;border-spacing:0;border-collapse:separate;">
Wants to remove that empty row

2. Scroll Bar Theming not affected

[Vargis]

Firstly I like to thank for your support but i like to say one thing
'If you dont know pls dont mislead anyone ...'

In this project we have almost 40 - 50 pages. In all other pages Parent Div height is in Percentage (%) and it is working in all Browsers ...but when we are looking to pages in which multipage(Tabs) is using Percentage doesnt works.. So pls try to understant the actual issue and give us a solution ...no scripts acceptable.

[Vargis]

Pls reply here ..My superiors are watching this only

[Pavlina]

Hello,

At this point to be able to provide a proper solution for your case we will need a sample project where the described issue can be observed. We will debug it locally and will advice you further. You can refer to the code library below for more information how to isolate the problem in a sample project:

http://blogs.telerik.com/blogs/posts/10-09-29/isolating-a-problem-in-a-sample-project.aspx

Kind regards,

Pavlina
the Telerik team

[Vargis]

I had post another query about while image button dragging inside textbox ...but not reply from team telerick now its over 48hrs

[Vargis]

So horrible ...

In all execpt one RadGrid Scroll Horz and Vertical is working.
Only difference i had found is in that

<ClientSettings>
<Scrolling AllowScroll="true" />
</ClientSettings>

is added. Wats a mad ?!