Setting Invisible on start does not initialize properly

[George]

I have a dropdown the controls the visibility of some controls including a RadExplorer. This is all in a BootStrap form where the form-group visibility is changed.  If I start with the RadExplorer invisible, the toolbar and windows are not formed properly. Resizing the browser window fixes it though all visibility changes until the next refresh. If I start out with the RadExplorer visible and make it invisible on loading the toolbar is fine but the windows are not correct, please see the attached picture.  I need to be able to make the RadExplorer invisible at page load.

The function BackgroupSettingChanged(); changes the visiblity of controls.

Sys.Application.add_load(function loadHandler() {
    BackgroupSettingChanged();
    Sys.Application.remove_load(loadHandler);
});

BackgroupSettingChanged(); calls ObjVisible() to change the visibility of the different div's.

function ObjVisible(control, visible)
{
    if (visible) {
        control.style.visibility = 'visible'
        control.style.display = "block";
    }
    else {
        control.style.visibility = 'hidden';
        control.style.display = "none";
    }
}

The RadExplorer is in a form-group

<div class="form-group" id="ExplorerDiv" runat="server" >
    <asp:Label runat="server" AssociatedControlID="SelectImage" CssClass="col-md-2 control-label">Explorer</asp:Label>
    <div class="col-md-4" >

        <span >Use the file explorer to choose an image, you can download an image.</span>

        <telerik:RadFileExplorer RenderMode="Lightweight" runat="server" ID="FileExplorer1" Width="580px" Height="300px"  EnableCreateNewFolder="true"
            VisibleControls="Grid,TreeView,ContextMenus,Toolbar,FileList"
            AllowPaging="true" PageSize="8" OnClientItemSelected="OnClientItemSelected">
            <Configuration  EnableAsyncUpload="true"  AllowMultipleSelection="true"
                ViewPaths = "~/Organizations/Org3"
                UploadPaths = "~/Organizations/Org3"
                DeletePaths = "~/Organizations/Org3"></Configuration>
        </telerik:RadFileExplorer>
    </div>
</div>

 

Is there something I can call on the RadExplorer when I make it visible to ensure it initializes properly?  or maybe my initial call to add_load to make it invisible could be made on another startup event?

It is actually the 

control.style.display = "none";

that causes the problem. Without "none", the file list window of the RadExplorer shows even though the RadExplorer div is visibility='hidden'.  The is needed to get rid of the space taken by the controls.  I also have a RadColorPicker that works fine if it does not start out invisible (with set, forced to accept this with its accompanying disappearing flash as the window opens).

George

[Vessy]

Hi George,

When RadFileExplorer is used in LightWeight render mode it is not able to recalculate its sizes when its parent is initially not visible. You can either switch to Classic render mode of the control, or recalculate the size of the  nested controls of RadFileExplorer in a similar way:

function ObjVisible(control, visible) {

    if (visible) {

        control.style.visibility = 'visible'

        control.style.display = "block";

 

        var fileExplorer = $find("FileExplorer1");

        var toolbar = fileExplorer.get_toolbar();

        var splitter = fileExplorer.get_splitter();

        var grid = fileExplorer.get_grid();

        var height = splitter.get_height() - 37; //37 is the height of the toolbar


        var width = 580;

         

        setTimeout(function () {

            grid.get_element().style.height = height + "px";

            grid.repaint();

            toolbar.repaint();

            splitter.resize(width, height);

            splitter.repaint();

        }, 100);

    }

    else {

        control.style.visibility = 'hidden';

        control.style.display = "none";

    }

}

You can also submit this requirement as a feature request in our feedback portal:
https://feedback.telerik.com/Project/108/Feedback/List/Feature%20Request

Regards,
Vessy
Telerik by Progress