Adjust Height to screen resolusion

[edward ropero]

Hi,

Is there any way that the height of the grid will self adjust to the screen resolution each user when it is filled automatically (AutoGenerateColumns="True")?

This is the code of my grid:

<telerik:RadGrid ID="grdReport" runat="server" AllowPaging="true" AutoGenerateColumns="True"
        BorderWidth="1px" GridLines="None"
                        OnPageIndexChanged="grdReport_PageIndexChanged" PageSize="10"
        onitemdatabound="grdReport_ItemDataBound" >
                                        <PagerStyle AlwaysVisible="true"
                                        FirstPageToolTip="<%$ Resources:WebDexon, FirstPage %>"
                                        LastPageToolTip="<%$ Resources:WebDexon, LastPage %>" Mode="NextPrevAndNumeric"
                                        NextPagesToolTip="<%$ Resources:WebDexon, NextPages %>"
                                        NextPageToolTip="<%$ Resources:WebDexon, NextPage %>"
                                        PagerTextFormat="<%$ Resources:WebDexon, PagerTextFormat %>" Position="Bottom"
                                        PrevPagesToolTip="<%$ Resources:WebDexon, PrevPages %>"
                                        PrevPageToolTip="<%$ Resources:WebDexon, PrevPage %>" Visible="true" />
                                        <clientsettings scrolling-allowscroll="true" scrolling-usestaticheaders="true" Resizing-AllowColumnResize="true" Resizing-ClipCellContentOnResize="false">
                                        <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
                                        </clientsettings>       
                                        <statusbarsettings loadingtext="<%$ Resources:WebDexon, Loading %>"
                                        readytext="<%$ Resources:WebDexon, Ready %>" />
                                        <mastertableview nodetailrecordstext="" nomasterrecordstext="" Height="90%">
                                        <HeaderStyle Width="200px" />
                                        </mastertableview>
                    </telerik:RadGrid>

[Dimo]

Hello Edward,

Please refer to

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

Kind regards,
Dimo
the Telerik team

[edward ropero]

Hi,

I've tried to do it with the example:

<script type="text/javascript">

function Resize()

{

setTimeout(function(){

var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData");

if(scrollArea)

{

scrollArea.style.height = document.body.offsetHeight + "px";

}

if(window["<%= RadGrid1.ClientID %>"].ClientSettings.Scrolling.UseStaticHeaders)

{

var header = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridHeader");

scrollArea.style.height = document.body.offsetHeight - header.offsetHeight + "px";

}

if(window["<%= RadGrid1.ClientID %>"].ClientSettings.Scrolling.UseStaticHeaders && document.getElementById("<%= RadGrid1.ClientID %>" + "_ctl01_Pager"))

{

var pagerArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_ctl01_Pager");

scrollArea.style.height = document.body.offsetHeight - header.offsetHeight - pagerArea.offsetHeight + "px";

}

}, 200);

}

windowwindow.onresize = window.onload = Resize;

</script>

but I get this error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
 

[Dimo]

Hello Еdward,

You should wrap the <script> tag in a RadCodeBlock.

http://www.telerik.com/help/aspnet-ajax/ajxradscriptblockradcodeblock.html

By the way, you seem to be using the old API for the classic RadGrid for ASP.NET. If you are using RadGrid for ASP.NET AJAX, you should modify your Javascript code. The RadGrid client object is no longer obtained with window[....]. but with $find(....).

http://www.telerik.com/help/aspnet-ajax/grdgettingradgridclientobject.html

Kind regards,
Dimo
the Telerik team

[edward ropero]

Hello Dimo,

Thanks, It works, but now I have a problem when I change the page index on my grid, the grid's height collapse.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">  
        function Resize()  
        {
            setTimeout(function()
            {
            var scrollArea = document.getElementById("<%= grdReport.ClientID %>" + "_GridData");
                if(scrollArea)  
                {
                    scrollArea.style.height = document.body.offsetHeight - 120 + "px";  
                }
           }, 200);  
       }  
        window.onresize = window.onload = Resize;  
    </script>
</telerik:RadCodeBlock>
<telerik:RadGrid ID="grdReport" runat="server" AllowPaging="true" AutoGenerateColumns="True"
        BorderWidth="1px" GridLines="None" OnPageIndexChanged="grdReport_PageIndexChanged" Height="100%"
        PageSize="10" OnItemDataBound="grdReport_ItemDataBound">
        <PagerStyle AlwaysVisible="true" FirstPageToolTip="<%$ Resources:WebDexon, FirstPage %>"
            LastPageToolTip="<%$ Resources:WebDexon, LastPage %>" Mode="NextPrevAndNumeric"
            NextPagesToolTip="<%$ Resources:WebDexon, NextPages %>" NextPageToolTip="<%$ Resources:WebDexon, NextPage %>"
            PagerTextFormat="<%$ Resources:WebDexon, PagerTextFormat %>" Position="Bottom"
            PrevPagesToolTip="<%$ Resources:WebDexon, PrevPages %>" PrevPageToolTip="<%$ Resources:WebDexon, PrevPage %>"
            Visible="true" />
        <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        </ClientSettings>
        <StatusBarSettings LoadingText="<%$ Resources:WebDexon, Loading %>" ReadyText="<%$ Resources:WebDexon, Ready %>" />
        <MasterTableView NoDetailRecordsText="" NoMasterRecordsText="" >
            <HeaderStyle Width="200px" />
        </MasterTableView>
    </telerik:RadGrid>


protected void grdReport_PageIndexChanged(object source, GridPageChangedEventArgs e)
        {
            grdReport.CurrentPageIndex = e.NewPageIndex;
            RefreshReport();
        }

private void RefreshReport()
        {
                    DataTable dtReport = new DataTable();
                    dtReport = reportsPresenter.GetReport();
                    grdReport.DataSource = dtReport;
                    grdReport.DataBind();
        }

[Dimo]

You should either set height to the RadGrid's update panel (see link below), or adjust the RadGrid height manually in the control's GridCreated client event handler, similarly to the Resize() function.

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

Example of using GridCreated:

http://www.telerik.com/help/aspnet-ajax/grdresizegridwithscrollingwhenlessdata.html

All the best,
Dimo
the Telerik team

[edward ropero]

Thanks, it works as I expected