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

Adjust Height to screen resolusion

6 Answers 262 Views
Grid
This is a migrated thread and some comments may be shown as answers.
edward ropero
Top achievements
Rank 1
edward ropero asked on 17 Aug 2010, 05:52 PM
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>

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 18 Aug 2010, 07:58 AM
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
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
edward ropero
Top achievements
Rank 1
answered on 18 Aug 2010, 09:14 PM
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. <% ... %>)
 
0
Dimo
Telerik team
answered on 19 Aug 2010, 08:09 AM
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
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
edward ropero
Top achievements
Rank 1
answered on 19 Aug 2010, 04:28 PM
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();
        }
0
Dimo
Telerik team
answered on 19 Aug 2010, 04:32 PM
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
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
edward ropero
Top achievements
Rank 1
answered on 19 Aug 2010, 04:50 PM
Thanks, it works as I expected
Tags
Grid
Asked by
edward ropero
Top achievements
Rank 1
Answers by
Dimo
Telerik team
edward ropero
Top achievements
Rank 1
Share this question
or