Search results

Split Panes in JavaScript Splitter control

This section explain about split panes behaviours.

Horizontal layout

By default, splitter will render in horizontal orientation. Splitter container will be splitted as panes in horizontal flow direction with vertical seperator.

Source
Preview
app.ts
index.html
index.css
import { Splitter } from '@syncfusion/ej2-layouts';

// Initialize Splitter control
let splitObject: Splitter = new Splitter({
    height: '250px',
    paneSettings: [
        { size: '200px' },
        { size: '200px' },
        { size: '200px' }
    ],
    width: '600px'
});

// Render initialized Splitter
splitObject.appendTo('#splitter');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="splitter" >
            <div>
                <div class="content">
                    <h3 class="h3">Grid </h3>
                    The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">Schedule </h3>
                    The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">Chart </h3>
                    ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
                </div>
            </div>
        </div>
    </div>
</body>
</html>
#container {  
  margin: 50px auto;
  width: 600px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.content {
  padding: 9px;
}

Vertical layout

By setting orientation API as Vertical, splitter will render in vertical orientation. Splitter container will be splitted as panes in vertical flow direction with horizontal seperator.

Source
Preview
app.ts
index.html
index.css
import { Splitter } from '@syncfusion/ej2-layouts';

// Initialize Splitter control
let splitObject: Splitter = new Splitter({
    height: '305px',
    paneSettings: [
        { size: '100px' },
        { size: '100px' },
        { size: '100px' }
    ],
    width: '600px',
    orientation: 'Vertical'

});

// Render initialized Splitter
splitObject.appendTo('#splitter');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="splitter" >
            <div>
                <div class="content">
                    <h3 class="h3">Grid</h3>
                    The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">Schedule</h3>
                    The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">Chart</h3>
                    ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
                </div>
            </div>
        </div>
    </div>
</body>
</html>
#container {  
  margin: 30px auto;
  width: 570px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.content {
  padding: 9px;
}

Multiple panes

You can render the multiple panes with both Horizontal/Vertical orientations.

Source
Preview
app.ts
index.html
index.css
import { Splitter } from '@syncfusion/ej2-layouts';

// Initialize Splitter control
let splitObject: Splitter = new Splitter({
    height: '300px',
    paneSettings: [
        { size: '150px' },
        { size: '150px' },
        { size: '150px' },
        { size: '150px' }
    ],
    width: '600px',

});

// Render initialized Splitter
splitObject.appendTo('#splitter');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="splitter" >
            <div>
                <div class="content">
                    <h3 class="h3">PARIS </h3>
                    Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">CAMEMBERT </h3>
                    The village in the Orne département of Normandy where the famous French cheese is originated from.
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">GRENOBLE </h3>
                    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>
            <div>
                <div class="content">
                    <h3 class="h3">Australia </h3>
                    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>
        </div>
    </div>
</body>
</html>
#container {  
  margin: 30px auto;
  width: 600px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.content {
  padding: 9px;
}

Separator

By default, pane separator will be render with 1px width/height. You can customize the separator size by using separatorSize API.

For horizontal orientation, it will be considered as separator width. For vertical orientation, it will be considered as separator height.

Source
Preview
app.ts
index.html
index.css
import { Splitter } from '@syncfusion/ej2-layouts';

// Initialize Splitter control
let splitObject: Splitter = new Splitter({
    height: '250px',
    paneSettings: [
        { size: '200px' },
        { size: '200px' },
        { size: '200px' }
    ],
    width: '600px',
    separatorSize: '5'

});

// Render initialized Splitter
splitObject.appendTo('#splitter');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="splitter" >
            <div>
                <div class="content">
                    <h3 class="h3">Grid </h3>
                    The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">Schedule </h3>
                    The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">Chart </h3>
                    ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
                </div>
            </div>
        </div>
    </div>
</body>
</html>
#container {  
  margin: 50px auto;
  width: 600px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.content {
  padding: 9px;
}

Nested Splitter

Splitter provides support to render the nested pane to achieve the complex layouts. You can use the same <div> element for splitter pane and nested splitter.

Also you can render the nested splitter using direct child of the splitter pane. For this, nested splitter should have 100% width and height to match with the parent pane dimensions.

Source
Preview
app.ts
index.html
index.css
import { Splitter } from '@syncfusion/ej2-layouts';

let horizontalObj: Splitter = new Splitter({
    height: '316px',
    paneSettings: [
        { size: '200px' },
        { size: '200px' },
        { size: '200px' }
    ],
    width: '600px'
});
horizontalObj.appendTo('#Horizontal_splitter');

let verticalObj: Splitter = new Splitter({
    height: '308px',
    paneSettings: [
        { size: '150px', min: '20%' },
        { size: '100px', min: '20%' }
    ],
    orientation: 'Vertical'
});
verticalObj.appendTo('#vertical_splitter');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="Horizontal_splitter" >
            <div>
                <div class="content">
                    <h3 class="h3">PARIS </h3>
                    Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
                </div>
            </div>
            <div>
                <div class="content">
                    <h3 class="h3">CAMEMBERT </h3>
                    The village in the Orne département of Normandy where the famous French cheese is originated from.
                </div>
            </div>
            <div>
                <div id ='vertical_splitter' class="vertical_splitter">
                    <div>
                        <div class="content">
                            <h3 class="h3">GRENOBLE </h3>
                            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>
                    <div>
                        <div class="content">
                            <h3 class="h3">Australia </h3>
                            Australia is a country and continent surrounded by the Indian and Pacific oceans
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
#container {
  margin: 30px auto;
  width: 600px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.content {
  padding: 9px;
}

.vertical_splitter.e-splitter.e-splitter-vertical  {
  border: none;
}

Add or remove pane

You can add the panes programmatic but it will makes you complex. For this, you can use the addPane/removePane methods to add and remove the panes dynamically in the splitter.

Add pane

You can add the panes dynamically in the splitter by passing paneProperties along with index to the addPane method

Source
Preview
app.ts
index.html
index.css
import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';

let splitObj: Splitter = new Splitter({
    height: '200px',
    paneSettings: [
        { size: '190px'},
        { size: '190px'}
    ],
    width: '600px',
    created: onSplitterCreate
});
splitObj.appendTo('#splitter');


let paneDetails : PanePropertiesModel = {
    size: '190px',
    content: 'New Pane',
    min: '30px',
    max: '250px',
}

function onSplitterCreate() {
    document.getElementById('addpane').addEventListener('click', () => {
        splitObj.addPane(paneDetails, 1);
    })
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="splitter"> 
            <div>
                <div class='content'>
                    Pane 1
                </div>
            </div>
            <div>
                <div class='content'>
                    Pane 2
                </div>
            </div>
        </div>
        <button id='addpane' class="e-btn">Add Pane</button>
    </div>
</body>
</html>
#container {
  visibility: hidden;  
  margin: 49px;
  width: 500px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.content {
  padding: 9px;
}

#addpane {
  margin-top: 15px;
}

Remove pane

You can remove the split panes dynamically by passing the pane index to removePane method.

Source
Preview
app.ts
index.html
index.css
import { Splitter } from '@syncfusion/ej2-layouts';
import { isNullOrUndefined } from '@syncfusion/ej2-base';

let splitObj: Splitter = new Splitter({
    height: '200px',
    paneSettings: [
        { size: '200px'},
        { size: '200px'},
        { size: '200px'}
    ],
    width: '600px'
});
splitObj.appendTo('#splitter');

document.getElementById('removepane').addEventListener('click', () => {
    if (!isNullOrUndefined(document.querySelector('#splitter').querySelectorAll('.e-pane-horizontal')[1]))
    {
        splitObj.removePane(1);
    }
})
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="splitter"> 
            <div>
                <div class='content'>
                    Pane 1
                </div>
            </div>
            <div>
                <div class='content'>
                    Pane 2
                </div>
            </div>
            <div>
                <div class='content'>
                    Pane 3
                </div>
            </div>
        </div>
        <button id='removepane' class="e-btn">Remove Pane</button>
    </div>
</body>
</html>
#container {
  visibility: hidden;  
  margin: 49px;
  width: 500px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.content {
  padding: 9px;
}

#removepane {
  margin-top: 15px;
}

See Also