When a grid is fit in the page, then browser scrollbars should not appear

[CSW]

Hi Telerik Team,

We have a requirement that the grid should fit in the page in such a way that the 
browser scrollbars should not appear.

We are dynamically creating the grid (i.e. programmatically in the code behind function DefineGridAttributes() (refer original function below),
(refer the attachments screenshot_1.jpg, screenshot_2.jpg)

This grid is being added into the placeholder control.
<! -- ASPX -- >
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel">
 <div>
            <asp:PlaceHolder ID="plcHolderGridControl" runat="server"></asp:PlaceHolder>
        </div>
</telerik:RadAjaxPanel>

Then,in order to achieve the above requirement, we used the following properties and we were able to
succesfully fit the grid (width + height) in the page. (Refer attachments, screenshot_3.jpg and refer modified function below)

//-- setting width to the rad grid --
grid.Width = Unit.Percentage(97);
grid.ClientSettings.Scrolling.ScrollHeight = Unit.Percentage(100);//changed from fixed pixel to percentage

But, when we do a sort on the grid column, then the grid spills outside the border. (Please refer screenshot_4.jpg)

Also, if we move the grid scrollbars, then browser scrollbars appear. (Please refer screenshot_5.jpg )

Before applying these two properties (grid.Width and grid.ClientSettings.Scrolling.ScrollHeight),
everything was working fine.

Can anyone please suggest, if we could try something here?
(also the solution should take care of the monitor resolution)

Regards,
CSW Support

-----------------------------------------------

// -- Original function --


// this function DefineGridAttributes defines the attributes of a dynamically build grid.
    private void DefineGridAttributes(RadGrid grid)
    {
        // Grid General Setting
        grid.ID = "RadGrid1";
        //-- setting width to the rad grid --
        //grid.Width = Unit.Percentage(97);
        //grid.Height = Unit.Percentage(100);
        //grid.Skin = "Office2007";
        grid.AllowMultiRowSelection = true;
        grid.AutoGenerateColumns = false;
        grid.AllowPaging = true;
        grid.AllowCustomPaging = true;
        grid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
        grid.AllowSorting = true;
        grid.ShowGroupPanel = true;
        grid.ShowFooter = true;
        grid.PageSize = Convert.ToInt32(GeneralCode.sPageSize);
        grid.PagerStyle.Position = GridPagerPosition.Top;
        grid.BorderWidth = Unit.Pixel(1);
        grid.GridLines = GridLines.None;
        // Grid grouping and exporting Setting
        grid.GroupingSettings.ShowUnGroupButton = true;
        grid.ExportSettings.HideStructureColumns = true;
        // Added for Export To Excel

        grid.ExportSettings.OpenInNewWindow = true;
        grid.ExportSettings.ExportOnlyData = true;
        grid.ExportSettings.IgnorePaging = true;
        //--------
        grid.ExportSettings.Pdf.PageBottomMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageFooterMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageHeaderMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageLeftMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageRightMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageTopMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PaperSize = GridPaperSize.A4;
        grid.ExportSettings.Pdf.FontType = Telerik.Web.Apoc.Render.Pdf.FontType.Subset;
        //grid.ExportSettings.Csv.ColumnDelimiter = GridCsvDelimiter.Semicolon;
        //grid.ExportSettings.Csv.EncloseDataWithQuotes = false;
        grid.ExportSettings.FileName = "CustomReport";
        // Grid client Setting
        if (bAllowedCellReorderResizing())
        {
            grid.ClientSettings.AllowColumnsReorder = true;
            grid.ClientSettings.AllowDragToGroup = true;
            grid.ClientSettings.ReorderColumnsOnClient = true;
            grid.ClientSettings.Resizing.AllowColumnResize = true;
            grid.ClientSettings.Resizing.ResizeGridOnColumnResize = false;
            grid.ClientSettings.Resizing.EnableRealTimeResize = false;
        }
        grid.ClientSettings.Selecting.AllowRowSelect = true;
        grid.ClientSettings.Selecting.EnableDragToSelectRows = true;
        grid.ClientSettings.Scrolling.AllowScroll = true;
        grid.ClientSettings.Scrolling.UseStaticHeaders = true;
        grid.ClientSettings.Scrolling.ScrollHeight = Unit.Pixel(600);
        //grid.ClientSettings.Scrolling.ScrollHeight = Unit.Percentage(97);
        //grid.ClientSettings.Scrolling.ScrollBarWidth = Unit.Percentage(97);
        grid.ClientSettings.EnableAlternatingItems = true;
        grid.ClientSettings.ClientEvents.OnRowContextMenu = "RowContextMenu";
        //grid.ClientSettings.ClientEvents.OnRowSelected = "OnRowSelected";
        grid.ClientSettings.ClientEvents.OnGridCreated = "OnGridCreated";
        // Grid mastertableview Setting
        grid.MasterTableView.EnableHeaderContextMenu = false;
        grid.MasterTableView.ShowGroupFooter = true;
        grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;
        grid.MasterTableView.TableLayout = GridTableLayout.Auto;
        grid.MasterTableView.AllowMultiColumnSorting = true;
        grid.MasterTableView.CommandItemSettings.ShowExportToCsvButton = true;
        grid.MasterTableView.CommandItemSettings.ShowExportToExcelButton = true;
        grid.MasterTableView.CommandItemSettings.ShowExportToPdfButton = false;
        grid.MasterTableView.CommandItemSettings.ShowExportToWordButton = true;
        grid.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = false;
        grid.MasterTableView.CommandItemSettings.ShowRefreshButton = false;
        //grid.MasterTableView.Width = Unit.Percentage(97);
        //grid.MasterTableView.Height = Unit.Percentage(100);
    }

--------------------------------

// --- Modified Function ---


// this function DefineGridAttributes defines the attributes of a dynamically build grid.
    private void DefineGridAttributes(RadGrid grid)
    {
        // Grid General Setting
        grid.ID = "RadGrid1";
        //-- setting width to the rad grid --
        grid.Width = Unit.Percentage(97);
        //grid.Height = Unit.Percentage(100);
        //grid.Skin = "Office2007";
        grid.AllowMultiRowSelection = true;
        grid.AutoGenerateColumns = false;
        grid.AllowPaging = true;
        grid.AllowCustomPaging = true;
        grid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
        grid.AllowSorting = true;
        grid.ShowGroupPanel = true;
        grid.ShowFooter = true;
        grid.PageSize = Convert.ToInt32(GeneralCode.sPageSize);
        grid.PagerStyle.Position = GridPagerPosition.Top;
        grid.BorderWidth = Unit.Pixel(1);
        grid.GridLines = GridLines.None;
        // Grid grouping and exporting Setting
        grid.GroupingSettings.ShowUnGroupButton = true;
        grid.ExportSettings.HideStructureColumns = true;
        // Added for Export To Excel

        grid.ExportSettings.OpenInNewWindow = true;
        grid.ExportSettings.ExportOnlyData = true;
        grid.ExportSettings.IgnorePaging = true;
        //--------
        grid.ExportSettings.Pdf.PageBottomMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageFooterMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageHeaderMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageLeftMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageRightMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PageTopMargin = Unit.Pixel(Convert.ToInt32(0.25));
        grid.ExportSettings.Pdf.PaperSize = GridPaperSize.A4;
        grid.ExportSettings.Pdf.FontType = Telerik.Web.Apoc.Render.Pdf.FontType.Subset;
        //grid.ExportSettings.Csv.ColumnDelimiter = GridCsvDelimiter.Semicolon;
        //grid.ExportSettings.Csv.EncloseDataWithQuotes = false;
        grid.ExportSettings.FileName = "CustomReport";
        // Grid client Setting
        if (bAllowedCellReorderResizing())
        {
            grid.ClientSettings.AllowColumnsReorder = true;
            grid.ClientSettings.AllowDragToGroup = true;
            grid.ClientSettings.ReorderColumnsOnClient = true;
            grid.ClientSettings.Resizing.AllowColumnResize = true;
            grid.ClientSettings.Resizing.ResizeGridOnColumnResize = false;
            grid.ClientSettings.Resizing.EnableRealTimeResize = false;
        }
        grid.ClientSettings.Selecting.AllowRowSelect = true;
        grid.ClientSettings.Selecting.EnableDragToSelectRows = true;
        grid.ClientSettings.Scrolling.AllowScroll = true;
        grid.ClientSettings.Scrolling.UseStaticHeaders = true;
        //grid.ClientSettings.Scrolling.ScrollHeight = Unit.Pixel(600);
        grid.ClientSettings.Scrolling.ScrollHeight = Unit.Percentage(97);
        //grid.ClientSettings.Scrolling.ScrollBarWidth = Unit.Percentage(97);
        grid.ClientSettings.EnableAlternatingItems = true;
        grid.ClientSettings.ClientEvents.OnRowContextMenu = "RowContextMenu";
        //grid.ClientSettings.ClientEvents.OnRowSelected = "OnRowSelected";
        grid.ClientSettings.ClientEvents.OnGridCreated = "OnGridCreated";
        // Grid mastertableview Setting
        grid.MasterTableView.EnableHeaderContextMenu = false;
        grid.MasterTableView.ShowGroupFooter = true;
        grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;
        grid.MasterTableView.TableLayout = GridTableLayout.Auto;
        grid.MasterTableView.AllowMultiColumnSorting = true;
        grid.MasterTableView.CommandItemSettings.ShowExportToCsvButton = true;
        grid.MasterTableView.CommandItemSettings.ShowExportToExcelButton = true;
        grid.MasterTableView.CommandItemSettings.ShowExportToPdfButton = false;
        grid.MasterTableView.CommandItemSettings.ShowExportToWordButton = true;
        grid.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = false;
        grid.MasterTableView.CommandItemSettings.ShowRefreshButton = false;
        //grid.MasterTableView.Width = Unit.Percentage(97);
        //grid.MasterTableView.Height = Unit.Percentage(100);
    }

[Pavlina]

Hi,

The sample project in the following link demonstrates how to configure r.a.d.grid to occupy 100% height of the total browser window height with scrolling and static headers enabled:
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

Please give it a try and let me know if it helps to achieve your goal.

Kind regards,
Pavlina
the Telerik team

[CSW]

Hi Pavelina/Telerik Team,

I am encountering following issues with the approach discussed in the sample project

1. In the sample project he Grid is already present in the aspx markup. In our case, we are dynamically creating the grid in the code behind and adding it to the placeholder control.  Therefore, the code "document.getElementById("<%= RadGrid1.ClientID" is throwing an error.

Let me know your thoughts on this?

Regards,
CSW Support

[Pavlina]

Hi,

Can you please examine grid_100_width_height.zip project which is also attached in the pointed code library and see if it works for you.

Greetings,
Pavlina
the Telerik team

[CSW]

Hi Pavelina,

We had referred 086832_grid_100_width_height.zip project.

Just wanted to clarify following points:

1. "Keep in mind that if the grid is nested inside containers, at least one of them should have fixed height dimension in pixels". If we give a fixed dimension to the container, then the whole purpose will be defeated, right?

2. The resize function "function Resize();" given by Stephan has to be used only if Paging is used in the grid right? We have used paging, so we had asked the question related to "finding the Client Id in javascript" in the earlier post.

Note: We are using Telerik.Web.UI.dll version 2011.2.712.35 in our project.

Regards.
CSW Support

[Pavlina]

Hello,

At this point to be able to properly assist you I will ask you to send us a sample project demonstrating the issue you are facing. To attach a project, you should open a regular support ticket and send us the attachment.

Thank you for your cooperation in advance.

Kind regards,
Pavlina
the Telerik team