Problem with display:none

[Lynda Lafreniere]

Hi,

I've a page with a RadFileExplorer in a div. When the page load, this div has the style "display:none". In this page, there's a linkbutton that call a javascript that change the style of the div to "display:block".

The problem is that the files are not shown correctly.

If I use the basic version of RadFileExplorer (case 1 in the example), the width of the grid do not adjust to the percent set, it seems to have a preset value (the percent works if the RadFileExplorer is shown on the load). In addition, the height if the grid seems to be automatically set to a very little value.

If I use a custom provider to add some columns (case 2 in the example), it's even worse: the width and height problem is still there and I don't see the filename anymore. The custom provider I use is the one for local path in the code library here with very little changes (to add two custom columns).

Is there a way to make them appear correctly ?
I send you a simple example that doesn't work for me. I have the latest internal build of AJAX controls (2009_2_817). I tested it on IE, FF3 and Chrome and each navigator has little differences. but none works correctly, I let you test and see.

Thanks !!

Here's the calls of a simple example of what I'm experiencing

<asp:Content runat="server" ContentPlaceHolderID="head">
    <script type="text/javascript">
        function test1() {
            document.getElementById('div1').style.display = 'block';
            document.getElementById('div2').style.display = 'none';
        }

        function test2() {
            document.getElementById('div1').style.display = 'none';
            document.getElementById('div2').style.display = 'block';
        }
    </script>
</asp:Content>

<asp:Content runat="server" ContentPlaceHolderID="content">

    <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="test1(); return false;" Text="test1" /><br />
    <asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="test2(); return false;" Text="test2" /><br />

    <br />

    <div id="div1" style="background-color:White; width:100%; display:none;">
        1
        <br />
        <rad:RadFileExplorer ID="file_explorer" runat="server" EnableCreateNewFolder="false" VisibleControls="Grid,Toolbar,ContextMenus,TreeView"
            TreePaneWidth="150px" Width="100%" Configuration-MaxUploadFileSize="1024000" AllowPaging="false" />
        <br />
        &nbsp;
    </div>

    <div id="div2" style="background-color:White; width:100%; display:none;">
        2
        <br />
        <rad:RadFileExplorer ID="RadFileExplorer1" runat="server" EnableCreateNewFolder="false" VisibleControls="Grid,Toolbar,ContextMenus,TreeView"
            TreePaneWidth="150px" Width="100%" Configuration-MaxUploadFileSize="1024000" AllowPaging="false" />
        <br />
        &nbsp;
    </div>
</asp:Content>

And the code

protected void Page_Load(object sender, EventArgs e)
    {
        string[] paths = new string[] { "~/templates/" };
        file_explorer.Configuration.ViewPaths = paths;
        file_explorer.Configuration.UploadPaths = paths;
        file_explorer.Configuration.DeletePaths = paths;


        /* 2nd explorer */
        string[] p_paths = new string[] { "C:\\documents\\candidats\\" };
        RadFileExplorer1.Configuration.ViewPaths = p_paths;
        RadFileExplorer1.Configuration.UploadPaths = p_paths;
        RadFileExplorer1.Configuration.DeletePaths = p_paths;
        RadFileExplorer1.Configuration.ContentProviderTypeName = typeof(CandidatFileSystemProvider).AssemblyQualifiedName;

        GridTemplateColumn col_taille_ko = new GridTemplateColumn();
        col_taille_ko.HeaderText = "Taille";
        col_taille_ko.SortExpression = "Taille_ko";
        col_taille_ko.UniqueName = "Taille_ko";
        col_taille_ko.DataField = "Taille_ko";
        col_taille_ko.ItemStyle.Width = col_taille_ko.HeaderStyle.Width = Unit.Pixel(100);
        col_taille_ko.ItemStyle.HorizontalAlign = col_taille_ko.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;
        RadFileExplorer1.Grid.Columns.Add(col_taille_ko);

        GridTemplateColumn col_date = new GridTemplateColumn();
        col_date.HeaderText = "Date de création";
        col_date.SortExpression = "Date";
        col_date.UniqueName = "Date";
        col_date.DataField = "Date";
        col_date.ItemStyle.Width = col_date.HeaderStyle.Width = Unit.Pixel(150);
        col_date.ItemStyle.HorizontalAlign = col_date.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
        RadFileExplorer1.Grid.Columns.Add(col_date);
    }

[Fiko]

Hi Lynda,

In reference to your questions :

• The RadFileExplorer control does not support values in percentage and this restriction is by design - you need to use fixed values in its declaration. Please note that the control does not have API that can be used to control its width and height on the client (oExplorer.set_height() for example) and you cannot change the size of the control after it is loaded.
• I believe that after using an appropriate fixed values for the Width and Height properties in the RadFileExplorer's declaration, then the second problem will be solved as well.

I hope this helps. 

Sincerely yours,

Fiko
the Telerik team

 

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Lynda Lafreniere]

Hi,

set the width to a fixed value has corrected a part of the problem. Now I see the columns correctly.

The remaining problem is concerning the height of the file list. The height of the manager is correct but, on the first load, the manager still show the file list with a very little height (I see a scrollbar to the right and the text's space is so little that I can't read it). When I navigate to another directory, the problem is corrected, the height is back to its correct value.

I've tested with the same example from my previous post, but I changed the width to a fixed value. It does the same thing on the three navigators (IE8, FF3 and Chrome).

Can you take a look at it ?

Thanks for the help !!

[Fiko]

Hello Lynda,

I was able to reproduce the problem without adding a custom column as well. The problem comes from the fact that the Grid embedded in the RadFileExplorer needs to be repainted when it is shown. That is why I added the following code in the test1 and test2 functions :

var oExplorer = $find("<%= file_explorer.ClientID %>");
oExplorer.get_grid().repaint(); // Repaint the grid ;

This code repaints the embedded Grid in the corresponding FileExplorer shown and fixes the problem in this scenario. I have attached my test project as well.

Please do not hesitate to contact us if you have any additional questions.

All the best,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.