RadGrid starts properly and resizes to less than a line

[George]

This is an odd problem that started yesterday. It has been working fine for years. It happens in all browsers.

In all my RadGrid pages, they all open correctly, and immediately the grid resizes to less than a line. If I change the browser between full screen and not full, the grid displays properly. So, every time I look at a list, I must change the window size mode - not a good work around for a product.

I have no idea what to even look at to solve this sudden out of nowhere problem.

All grids use a similar host code definition.

  RadGrid signupGrid = SignupGrid;
                signupGrid.NeedDataSource += new GridNeedDataSourceEventHandler(AdminGrid_NeedDataSource);
                signupGrid.Skin = "Default";
                signupGrid.AutoGenerateColumns = false;
                signupGrid.EnableViewState = false;
                signupGrid.GroupingEnabled = false;
                signupGrid.AllowPaging = true;
                signupGrid.PageSize = 100;
                signupGrid.Height = Unit.Percentage(100);
                signupGrid.EnableHeaderContextMenu = true;
                signupGrid.AllowSorting = true;
                signupGrid.AllowFilteringByColumn = true;
                signupGrid.AllowMultiRowSelection = false;
                signupGrid.AllowAutomaticDeletes = true;

                signupGrid.ClientSettings.EnableRowHoverStyle = true;
                signupGrid.ClientSettings.Selecting.AllowRowSelect = true;
                signupGrid.ClientSettings.Selecting.EnableDragToSelectRows = true;
                signupGrid.ClientSettings.ReorderColumnsOnClient = true;
                signupGrid.ClientSettings.AllowColumnsReorder = true;
                signupGrid.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder;
                signupGrid.ClientSettings.Virtualization.EnableVirtualization = true;
                signupGrid.ClientSettings.Virtualization.InitiallyCachedItemsCount = 2000;
                signupGrid.ClientSettings.Scrolling.AllowScroll = true;
                signupGrid.ClientSettings.Scrolling.UseStaticHeaders = true;
                signupGrid.ClientSettings.Scrolling.ScrollHeight = Unit.Percentage(100);
                signupGrid.ClientSettings.Resizing.AllowColumnResize = true;
                signupGrid.PagerStyle.Mode = GridPagerMode.NextPrevNumericAndAdvanced;
                signupGrid.GroupingSettings.CaseSensitive = false;

                               --- column definitions ---

The browser definition where windowPercent is height:100%

    <div id="GridDiv" runat="server" >
        <asp:panel runat="server" ID="Panel1"  CssClass="windowPercent" >
            <telerik:RadGrid runat="server" ID="SignupGrid" OnItemCommand="Grid_ItemCommand" ActiveItemStyle-VerticalAlign="Bottom" >
                <ClientSettings>
                    <ClientEvents OnRowDblClick="RowDblClick" />
               </ClientSettings>
            </telerik:RadGrid>
        </asp:panel>
    </div>

Any help or ideas to try are greatly appreciated.

George

              

[Rumen]

Hi George,

Which version of Telerik.Web.UI.dll is running by your app? Is the grid ajaxified by any chance by RadAjaxManager? I am asking because we recently found a bug in the RadAjaxManager where its AddAjaxSetting does not take Panel height values into account, .e.g

In the following example, the "Unit.Percentage(100)" part marked with yellow:

RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadGrid1, RadGrid2, RadAjaxLoadingPanel1, UpdatePanelRenderMode.Block, Unit.Percentage(100));

The problem is logged in the AddAjaxSetting does not take Panel height values into account bug report and the fix will go out with the R2 2023 release, scheduled for beginning of June 2023.

[George]

I went through the properties and figured out AllowScroll caused the less-than-one-line issue. Without that property, the window simply sized itself with data and off the page bottom using the browser scroll bar.

Attempting to play with control size, I turned on the browser console to see javascript log messages. In the console, I discovered an unrelated javascript error. I fixed the error and tried AllowScroll again. After changing a few "height: 100% !important" style changes, the radgrid went back to 100% with its own scrollbar - all fixed.

The reason it worked after switching between full screen and not full screen was that changing the screen size causes controls to resize. The unrelated javascript error only happened on a new page.

The lesson, if a telerik control suddenly stops working, you should check the console for any errors. That could be a standard first quick answer.

The BUG: having AllowScroll on should never set the line count showing to one-half.  If it cannot do it work, it should default to the default data row size showing all rows, which blinks up before the AllowScroll does its minimal lines trick. With that fixed, my post would have been about the radgrid not sizing to 100%. That would not be the total product disaster that a half-line showing is.

Another bug is not working when javascript complains about a "$(document).ready(function () {" being in the wrong place error happens.

I am using the latest ASP Ajax dlls.

[Rumen]

Great news! I am glad that you resolved the issue! Certainly, one of the first things to check when troubleshooting a web app is to check in the DevTools console for JavaScript errors. 

As for the other two findings:

• jQuery: $(document).ready()  !== MS AJAX: Sys.Application.Load - the Telerik AJAX controls are IScriptControls (MS ASP.NET AJAX controls) and their client object representation are created just as the last code on the page in the Sys.Application.init event, which is raised after the window.onload event and $(document).ready(). For that reason, you can get a reference to RadGrid no earlier that in the Sys.Application.load event, which is raised after all scripts have been loaded and the objects in the application have been created and initialized. You can find more information in https://stackoverflow.com/questions/7824069/jquery-document-ready-vs-pageload and https://learn.microsoft.com/en-us/previous-versions/aspnet/bb386417(v=vs.100) and https://docs.telerik.com/devtools/aspnet-ajax/getting-started/work-with-controls/get-client-side-reference. 
• Regarding the Grid height. It acts the same way as generic HTML, so, if you set the Height of an element in percentage, you must make sure the parent element and its parents also have a height set - How to set the height of a div to 100% using CSS and How to fix CSS height 100 not working.