Pane content in EJ2 TypeScript Splitter control

8 May 202315 minutes to read

This section explains how to provide plain text content or HTML markup or integrate other JavaScript UI controls as content of splitter.

HTML Markup

Splitter is a layout based container control. You can render the pane contents from existing HTML markups. Converting HTML markup as splitter pane is easy way to add the panes content dynamically.

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

let splitObj: Splitter = new Splitter({
    height: '200px',
    paneSettings: [
        { size: '200px',
        content: '<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>'
        },
        { size: '200px',
        content: '<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>'
        },
        { size: '200px',
        content: '<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>'
        }
    ],
    width: '600px'
});
splitObj.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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="splitter"> 
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

Also, you can provide the pane content inner HTML.

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

let splitObj: Splitter = new Splitter({
    height: '200px',
    paneSettings: [
        { size: '200px' },
        { size: '200px' },
        { size: '200px' }
    ],
    width: '600px'
});
splitObj.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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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>
</body>
</html>

JavaScript UI controls

You can render any JavaScript UI controls along with their native and control events within splitter as pane content.

You can refer Accordion within splitter and Listview within splitter examples.

Plain content

You can add the plain text as a pane contents using either inner HTML or content API

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

let splitObj: Splitter = new Splitter({
    height: '200px',
    paneSettings: [
        { size: '200px', content: 'Left pane'
        },
        { size: '200px', content: 'Middle pane'
        },
        { size: '200px', content: 'Right pane'
        }
    ],
    width: '600px'
});
splitObj.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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="splitter"> 
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

Pane content using selector

You can set HTML element as pane content using the query selectors such as ID or CSS class selectors.

The following code demonstrates how to fetch an element from the document and load it to pane using its ID.

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

/**
 *  Splitter pane content as html element using ID selector
 */

let splitObj1: Splitter = new Splitter({
    height: '200px',
    paneSettings: [
        { size: '25%', min: '60px', content: '#left-pane-content' },
        { size: '50%', min: '60px', content: '#middle-pane-content' },
        { size: '25%', min: '60px', content: '#last-pane-content' }
    ],
    width: '100%',
    separatorSize: 4
});
splitObj1.appendTo('#horizontal');
<!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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <!--element which is going to render the splitter-->
        <div id="target" class="control-section">
            <!-- Splitter control target -->
            <div id="horizontal"></div>
        </div>
        
        <!-- pane contents -->
        <div id="left-pane-content" style="display: none;">
            <div>Left pane<div id='panetext'>size: 25%</div>
                <div id='panetext'>min: 60px</div>
            </div>
        </div>
        
        <div id="middle-pane-content" style="display: none;">
            <span>Middle pane<div id="panetext">size: 50%</div>
                <div id="panetext">min: 60px</div>
            </span>
        </div>
        
        <div id="last-pane-content" style="display: none;">
            <span>Right pane<div id="panetext">size: 25%</div>
                <div id="panetext">min: 60px</div>
            </span>
        </div>
    </div>
</body>
</html>