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

6 posts, 0 answers
  1. CSW
    CSW  avatar
    4 posts
    Member since:
    Nov 2010

    Posted 09 Feb 2012 Link to this post

    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);
        }

  2. Pavlina
    Admin
    Pavlina avatar
    5266 posts
    Member since:
    Sep 2012

    Posted 14 Feb 2012 Link to this post

    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

    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  3. CSW
    CSW  avatar
    4 posts
    Member since:
    Nov 2010

    Posted 17 Feb 2012 Link to this post


    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

  4. Pavlina
    Admin
    Pavlina avatar
    5266 posts
    Member since:
    Sep 2012

    Posted 20 Feb 2012 Link to this post

    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

    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  5. CSW
    CSW  avatar
    4 posts
    Member since:
    Nov 2010

    Posted 21 Feb 2012 Link to this post

    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

  6. Pavlina
    Admin
    Pavlina avatar
    5266 posts
    Member since:
    Sep 2012

    Posted 23 Feb 2012 Link to this post

    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

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

Back to Top