Setting Invisible on start does not initialize properly

2 posts, 0 answers
  1. George
    George avatar
    82 posts
    Member since:
    Oct 2014

    Posted 21 Dec 2016 Link to this post

    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 "display:none" 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 display:none set, forced to accept this with its accompanying disappearing flash as the window opens).

    George

  2. Vessy
    Admin
    Vessy avatar
    1541 posts

    Posted 23 Dec 2016 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top