Refresh makes rows into nothing

[George]

I have a RadGrids that resize the height with the window.  That has been working for several years in 6 different grids with almost identical code.  In one of these grids all of sudden, on a new page/refresh the grid rows go to about 10 pixels high.  If I resize the window it all goes back to normal. I have tried many different things to get open a new page for the grid to be 100% in the panel it is in.  I am lost, I did not change anything, the ASP.NET Ajax drop was working fine and suddenly this problem appears with one of six grids. Programming is not supposed to work this way.

<script type="text/javascript">
    $(document).ready(function () {
        SetGridDiv();
    });

    window.onresize = function (event) {
        SetGridDiv();
    }

    function SetGridDiv() {
        var height = $(window).height();
        var gridDiv = document.getElementById("MainContent_GridDiv");
        height = height - 100;
        height += "px";
        gridDiv.style.height = height;
    }
</script>

<div id="GridDiv" runat="server" >

    <asp:panel runat="server" ID="HomeGridPanel"  CssClass="windowPercent" >

        <telerik:RadGrid runat="server" ID="OrganizationsGrid" OnItemCommand="Grid_ItemCommand">

            <ClientSettings>

                <ClientEvents OnRowDblClick="RowDblClick" />

            </ClientSettings>

        </telerik:RadGrid>

    </asp:panel>

</div>

 

And the C# .cs code.

RadGrid adminGrid = OrganizationsGrid;
                adminGrid.NeedDataSource += new GridNeedDataSourceEventHandler(AdminGrid_NeedDataSource);

                adminGrid.Skin = "Default";
                adminGrid.AutoGenerateColumns = false;
                adminGrid.EnableViewState = false;
                adminGrid.GroupingEnabled = false;
                adminGrid.AllowPaging = true;
                adminGrid.PageSize = 500;
                adminGrid.Height = Unit.Percentage(100);
                adminGrid.EnableHeaderContextMenu = true;
                adminGrid.AllowSorting = true;
                adminGrid.AllowFilteringByColumn = true;
                adminGrid.AllowMultiRowSelection = false;
                adminGrid.AllowAutomaticDeletes = true;
                adminGrid.MasterTableView.HierarchyDefaultExpanded = true;

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

                //Add columns to Grid
                GridBoundColumn boundColumn;

                boundColumn = new GridBoundColumn();
                boundColumn.Display = false;
                boundColumn.DataField = OrganizationListData.FIELD_ID;
                boundColumn.HeaderText = OrganizationListData.FIELD_ID;
                boundColumn.ShowFilterIcon = false;
                adminGrid.MasterTableView.Columns.Add(boundColumn);

The columns and rows are all done in server code.

This all just so strange.  The grid rows appear correctly and then a flash later shrinks to half a row. Resize and all works fine.

I have tried delayed multiple resize SetGridDiv calls, no luck.

I have tried setting the grid height to 100%, the panel windowPercent class sets the height to 100% already.

I have tried setting a row count.

The Grid samples seem to do nothing to get grids with height.  They use class demo-container and no-bg which are not defined in the sample code.

 

This is a MAJOR product disaster, an important grid starting out as a half row. If this cannot be fixed I will be forced to find other tools.

 

[George]

Looking further into this, I found that setting the grid Height to 100% is at the heart of the problem.

It appears the grid is formatted normally, then the 100% is applied the first time it goes to something like 1% instead.  That it fails on only one of my 6 grids doing the same thing remains a mystery and the happening out of nowhere is a concern for the other grids. I think the resize event is caught by the grid code which does the 100% properly.

Following through with this resize concept I tried several different ways to initiate a resize event when the page is loaded. This one that sends a resize event works around the problem (for now at least until Telerik breaks the 100% in resizing).

$(document).ready(function () {
    setTimeout(function () {
        window.dispatchEvent(new Event('resize'));
     }, 50);
});

window.onresize = function (event) {
    SetGridDiv();
}

function SetGridDiv() {
    var height = $(window).height();
    var gridDiv = document.getElementById("MainContent_GridDiv");
    height = height - 100;
    height += "px";
    gridDiv.style.height = height;
}

 

I added a delay to sending the resize based on previous experience dealing with these kinds of issues.

I would be interested in knowing if there is a way to set the RadGrid height from JavaScript.  I can set Height in #px or #% on the RadGrid element.

It tried setting height the https://www.telerik.com/forums/how-to-set-the-radgrid-to-auto-resize-the-height-to-fit-the-page-size suggestion but the grid sized beyond the container div and panel.

 

[Attila Antal]

Hi George,

Please try the following approach of resizing the grid and see if that works for you.

HTML Markup (attach the GridCreated event to RadGrid which will be used to resize the grid when it is created.)

<telerik:RadGrid ID="RadGrid1">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <ClientEvents OnGridCreated="GridCreated" />
    </ClientSettings>
</telerik:RadGrid>

JavaScript - GridCreated event handler. (containing client logic that resizes the grid)

<telerik:RadCodeBlock runat="server">
    <script type="text/javascript">
        $(window).resize(function () { // execute the method that resizes the grid when the window is resized.
            GridCreated($find('<%= RadGrid1.ClientID %>'));
        });
        function GridCreated(sender, args) {
            var parentHeight = $(window).height(); // You can change this to the parentcontainer if you do not want to resize the grid to fit the window but the container it is residing in.
            var scrollArea = sender.GridDataDiv;
            var gridHeaderHeight = (sender.GridHeaderDiv) ? sender.GridHeaderDiv.offsetHeight : 0;
            var gridTopPagerHeight = (sender.TopPagerControl) ? sender.TopPagerControl.offsetHeight : 0;
            var gridDataHeight = sender.get_masterTableView().get_element().offsetHeight;
            var gridFooterHeight = (sender.GridFooterDiv) ? sender.GridFooterDiv.offsetHeight : 0;
            var gridPagerHeight = (sender.PagerControl) ? sender.PagerControl.offsetHeight : 0;

            // Do nothing if scrolling is not enabled
            if (!scrollArea) {
                return;
            }

            if (gridDataHeight < 350 || parentHeight > (gridDataHeight + gridHeaderHeight + gridPagerHeight + gridTopPagerHeight + gridFooterHeight)) {
                scrollArea.style.height = gridDataHeight + "px";
            } else {
                scrollArea.style.height = (parentHeight - gridHeaderHeight - gridPagerHeight - gridTopPagerHeight - gridFooterHeight - 2) + "px"
            }
        }
    </script>
</telerik:RadCodeBlock>

You can also check out the attached sample to see it in action.

I hope this will prove helpful.

Kind regards,
Attila Antal
Progress Telerik

[George]

I tried the OnGridCreated ClientEvent and it prevented the rows from being minimized, but it put a scroll bar that did not extend to the length of the grid window after the set grid size in the ready.  It also resulted in a grid scrollbar and a window scrollbar defeating the goal of only having grid scrollbar in a resized window - the point of the resize.

My dispatch resize event results in the correct window size and grid scrollbar although it does have a flash with the grid window coming up with the default size,  the OnGridCreated ClientEvent did not flash.

This is definitely a change in grid functionality in the latest ASP.NET Ajax update. The resizing grids have been working fine for at least 3 years before this update.  I would suggest my original code should be a test case in having a resizing window grid. The dispatch resize event should not be needed in ready, only a set grid size call.  This is a major bug considering the grid contents could not be seen.

 

[Attila Antal]

Hi George,

If you would adjust my sample to produce the behavior you have described and send it back us in a formal support ticket, we'll be happy to take a look and investigate it further. Unfortunately, the code you have provided is incomplete, hence we are unable to re-create the entire scenario that produces the error.

Kind regards,
Attila Antal
Progress Telerik