[Solved] Resizing window breaks frozen columns

[Colin]

For whatever reason, when I set the width from JavaScript, frozen columns stop working, they are no longer frozen in place, I can't seem to find a work around either including repainting it.

This is where the grid starts and is set to have frozen columns:

<telerik:RadGrid ID="OrganizationalErrorsGrid" runat="server" OnItemDataBound="onItemDataBound"
        OnItemCreated="onItemCreated" AllowSorting="true" OnSortCommand="onSorting" >
        <ClientSettings>
            <%-- <Selecting AllowRowSelect="true" /> --%>
            <Scrolling FrozenColumnsCount="3" AllowScroll="True" UseStaticHeaders="True" />
            <ClientEvents OnGridCreated="getwithdrawnEmployeesGrid" />
        </ClientSettings>

And this is my javascript that handles resizing:

function jsUpdateSize() {
            var grid = document.getElementById("<%=OrganizationalErrorsGrid.ClientID%>");
            var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (width > 1650)
                grid.style.width = "1533px";
            else if (width > 680)
                grid.style.width = (width-80).toString() + "px";
            else
                grid.style.width = "600px";
        }

Any ideas or more info that you need? 

Thanks in advanced

[Venelin]

Hi Colin,

From the provided code I couldn't reproduce the same issue. I am attaching a sample project, please examine it and see if it helps you to find your issue. Also note I have added repaint method on the end of your function.

Here is the code:

JavaScript:

function pageLoad() {
    var gridObj = $find("<%= RadGrid1.ClientID %>"),
        gridEl = gridObj.get_element();
    resizeGrid(gridEl, gridObj);

    window.onresize = function () {
        resizeGrid(gridEl, gridObj);
    };
};

function resizeGrid(gridEl, gridObj) {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width > 1600)
        gridEl.style.width = "1533px";
    else if (width > 680)
        gridEl.style.width = (width - 80).toString() + "px";
    else
        gridEl.style.width = "600px";
    gridObj.repaint();
}

ASPX:

<ClientSettings>
    <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="3"/>
</ClientSettings>

I hope this helps.

Regards,
Venelin
Telerik