[Solved] Set initial splitter pane collapsed

[alex]

Hi all, is there way to set pane size collapsed when you create splitter?

Example:
 vPanes.Add()
.Size("20%")
.Collapsible(true)
.Collapsed(true or false) // <-- some property or another way

Thanks for all, and sorry for my bad English

[Aalano]

I'd be interested in a response to this as well.  
There is a Collapsed(true) method, but when you try that the initial display gets all buggered
                vPanes.Add()
                    .Collapsible(false)
                    .Collapsed(false)
                    .Content(() =>
                    {%>
                        <h2>Hello</h2>
                    <%});
                vPanes.Add()
                    .Collapsible(true)
                    .Collapsed(true)
                    .Content(() =>
                    {%>
                        <h2>GoodBye</h2>
                    <%});

[Dimo]

Hello Aalano,

I can't reproduce the described issue on my side by using your code snippet. Can you provide the complete Splitter declaration, which causes the problem shown on your screenshot?

Kind regards,
Dimo
the Telerik team

[Aalano]

Hi Dimo, sorry for the delayed response.  It took me a while to track it down.  The problem seems to be when you include 
telerik.draganddrop.min.js.  I've attached some files for reference

[Dimo]

Hi Aalano,

Thanks for the sent files, but I still cannot reproduce the problem. Everything works as expected, no matter whether I register telerik.draganddrop.js or not. I also tested in RTL mode, since you seem to be using it (judging by the registered RTL CSS file). Probably some styles which trigger the issue are missing, so I will appreciate if you provide a complete runnable project.

All the best,
Dimo
the Telerik team

[Aalano]

Hi Dimo, here's a full test project.  I've also attached a screen shot

[Dimo]

Hi Aalano,

Thanks, now I reproduced the problem. It is caused by the fact that the Splitter is rendered initially in a container with a display:none style (the inactive tab). In such cases Javascript size calculations do not work and the Splitter cannot adjust its layout.

The solution is to manually repaint the Splitter once it becomes visible:

Html.Telerik()
    .TabStrip()
    .ClientEvents(ev => ev.OnSelect("repaintSplitter"))

function repaintSplitter(e) {
    window.setTimeout(function () {
        var splitter = $("#Splitter").data("tSplitter");
        if (splitter) {
            $("#Splitter").data("tSplitter").resize();
        }

    }, 100);
}

All the best,
Dimo
the Telerik team