Splitter with three Panels and EnablePersistence = true

[Reto Ruemmeli]

Hi

I am trying to build a layout with three panels and a splitter. The panels one and three should be collapsible.

Everything works fine. I also created two buttons to control it with javascript.

But as soon as I set EnablePersistence=true and execute the following steps.

-move right splitter by hand

-collapse right splitter

The right panel stays displayed and does not collapse anymore.

Here is my example.

<div class="d-flex">
    <ejs-button id="toggleTree" content="left" onclick="toggleSplitter(0)"></ejs-button>
    <ejs-button id="toggleDetail" onclick="toggleSplitter(2)" content="right" cssClass="e-flat"></ejs-button>
</div>


<ejs-splitter id="splitterMain" width="100%" height="600px" created="onCreated" EnablePersistence="true">
    <e-splitter-panes>


        @*Splitter left*@
        <e-splitter-pane size="16%" min="60px" collapsible="true">
            <e-content-template>
                <div class="content card">


                    <h1>left</h1>


                </div>
            </e-content-template>
        </e-splitter-pane>


        <e-splitter-pane collapsible="false">
            <e-content-template>
                <div class="content card">


                    <h2>center</h2>


                </div>
            </e-content-template>
        </e-splitter-pane>


        <e-splitter-pane size="25%" min="60px" collapsible="true">
            <e-content-template>
                <div class="content card">


                    <h2>right</h2>


                </div>
            </e-content-template>
        </e-splitter-pane>
    </e-splitter-panes>


</ejs-splitter>




<script>


    function onCreated() {
        splitterObj = this;
        splitterObj.expand(1);
    }
    function toggleSplitter(pane) {


        if (splitterObj.allPanes[pane].classList.contains('e-collapsed')) {
            splitterObj.expand(pane);
        } else {
            splitterObj.collapse(pane);
        }


    };


</script>

Thanks for the help.

[Buvana Sathasivam]

Hi Reto,

Greetings from Syncfusion support.

We have considered the issue “Splitter collapse not working properly when enabled the EnablePersistence property” as a bug from our end and the fix for the issue will be included with our upcoming weekly patch release on May 24, 2022.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link:

https://www.syncfusion.com/feedback/34744/splitter-collapse-not-working-properly-when-enabled-the-enablepersistence-property

Regards,

Buvana S

[Reto Ruemmeli]

Many Thanks

Best Regards, Reto

[Buvana Sathasivam]

Hi Roto,

As mentioned earlier, we will include the fix with our upcoming weekly patch release on May 24, 2022. We'll let you know when the problem has been resolved.

Regards,

Buvana S

[Buvana Sathasivam]

We have included the fix for the issue "Splitter collapse not working properly when enabled the EnablePersistence property" with our package version 20.1.58. So, can you please upgrade your package to the latest to resolve the issue from your end.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core-135074409