Can splitter support vertical and horizontal orientation together?

[Kuan Long Khiu]

Hi Syncfusion team,

Can splitter support vertical and horizontal orientation together? I only can set the orientation to horizontal or vertical.

Code:

<ejs-splitter id="outerSplitter" orientation="Vertical" separatorSize="4" height="500px" >

        <e-splitter-panes>

            <e-splitter-pane size="50%">

                <e-content-template>

                    <ejs-splitter id="innerSplitter1" height="50%" width="100%" separatorSize="4">

                        <e-splitter-panes>

                            <e-splitter-pane size="50%">

                                <e-content-template>

                                    <div>panel 1 </div>

                                </e-content-template>

                            </e-splitter-pane>

                            <e-splitter-pane size="50%">

                                <e-content-template>

                                    <div>panel 2 </div>

                                </e-content-template>

                            </e-splitter-pane>

                        </e-splitter-panes>

                    </ejs-splitter>

                </e-content-template>

            </e-splitter-pane>

            <e-splitter-pane size="50%">

                <e-content-template>

                    <ejs-splitter id="innerSplitter2" height="50%" width="100%" separatorSize="4">

                        <e-splitter-panes>

                            <e-splitter-pane size="50%">

                                <e-content-template>

                                    <div>panel 3</div>

                                </e-content-template>

                            </e-splitter-pane>

                            <e-splitter-pane size="50%">

                                <e-content-template>

                                    <div>panel 4</div>

                                </e-content-template>

                            </e-splitter-pane>

                        </e-splitter-panes>

                    </ejs-splitter>

                </e-content-template>

            </e-splitter-pane>

        </e-splitter-panes>

    </ejs-splitter>

Regards,

Kuan Long

[Buvana Sathasivam]

Hi Kuan,

Greetings from Syncfusion support.

You are not able to set both orientations to the same splitter component. You will be able to set the horizontal or vertical orientation at a time. If you wish to render in both orientations, you need to use a nested splitter as per shared code and screenshot. 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/splitter/split-panes

Regards,

Buvana S

[Kuan Long Khiu]

Hi Buvana S,

I tried the nested splitter. It doesn't work. What else did I miss? 

<ejs-splitter id="splitter" height="400px" width="400px" created="onCreate">

    <e-splitter-panes>

        <e-splitter-pane size="200px" content="<div id ='vertical_splitter1' class='vertical_splitter'>

                <div class='content'><h4 class='h4'>GRENOBLE </h4>

                The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.</div>

                <div class='content'><h4 class='h4'>AUSTRALIA </h4>Australia is a country and continent surrounded by the Indian and Pacific oceans. Its major cities – Sydney, Brisbane, Melbourne, Perth, Adelaide – are coastal. Its capital, Canberra, is inland.</div>

               </div>"></e-splitter-pane>

        <e-splitter-pane size="200px"

        content="<div id ='vertical_splitter2' class='vertical_splitter'>

                <div class='content'><h4 class='h4'>GRENOBLE </h4>

                The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.</div>

                <div class='content'><h4 class='h4'>AUSTRALIA </h4>Australia is a country and continent surrounded by the Indian and Pacific oceans. Its major cities – Sydney, Brisbane, Melbourne, Perth, Adelaide – are coastal. Its capital, Canberra, is inland.</div>

               </div>"></e-splitter-pane>

    </e-splitter-panes>

</ejs-splitter>

<script type="text/javascript">

    function onCreate(args) {

        var splitterObj = new ej.layouts.Splitter({

            paneSettings: [

                { size: '200px', min: '20%' },

                { size: '200px', min: '20%' },

            ],

            orientation: 'Vertical',

        });

        splitterObj.appendTo('#vertical_splitter1');

        splitterObj.appendTo('#vertical_splitter2');

    }

</script>

Regards,

Kuan Long

[Buvana Sathasivam]

Hi Kuan,

We have checked your shared code. You are using the same object variable appended into different splitter elements. So, you have faced a problem resizing the splitter panes. We suggest using different object variables for each splitter element, like in the below code and sample.

<script type="text/javascript">

 

    function onCreate(args) {

 

        var splitterObj1 = new ej.layouts.Splitter({

 

            paneSettings: [

 

                { size: '200px', min: '20%' },

 

                { size: '200px', min: '20%' },

 

            ],

 

            orientation: 'Vertical',

 

        });

 

        splitterObj1.appendTo('#vertical_splitter1');

        var splitterObj2 = new ej.layouts.Splitter({

 

            paneSettings: [

 

                { size: '200px', min: '20%' },

 

                { size: '200px', min: '20%' },

 

            ],

 

            orientation: 'Vertical',

 

        });

 

        splitterObj2.appendTo('#vertical_splitter2');

 

    }

 

 

 

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_(9)-335454899

Regards,

Buvana S

[Kuan Long Khiu]

Hi Buvana,

Thanks for your replying. But it still cannot resize vertical at the same time in both div. In this scenerio,Is that possible resize in both orientation? 

Regards,

Kuan Long

[Buvana Sathasivam]

Hi Kuan,

In your sample, you have rendered one main outer splitter component and two nested splitter components. So, it is not feasible to move different splitters resized at the same time.

Regards,

Buvana S

[Kuan Long Khiu]

Hi Buvana S,

May I know is that any other solution or sample? I tried the code from previous link that you provided is not 4 square grids.

Regards,

Kuan Long

[Buvana Sathasivam]

As mentioned in the previous update, two splitters can be nested inside one another but cannot be overlapped. This is the case demonstrated in the already shared documentation. We can have a vertical splitter which contains another nested splitter in both of its panes, as per your screenshot. But these nested splitters can not be resized together and will act individually.