HelpBot Assistant

How can I help you?

Pane content in EJ2 JavaScript Splitter control

5 Mar 202616 minutes to read

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

HTML Markup

Splitter is a layout container control. Existing HTML markup can be used directly as pane content. Converting an existing HTML element into a splitter pane is an easy way to add pane content dynamically.

// Initialize Splitter control
var splitObject = new ej.layouts.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'
});

// 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="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <!--element which is going to render the splitter-->
        <div id="splitter"> 
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Also, pane content can be provided via the pane’s inner HTML.

// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
    height: '200px',
    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="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <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>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

JavaScript UI controls

Any JavaScript UI controls can be rendered along with their native and control events within splitter as pane content.

Refer to the Accordion within splitter and Listview within splitter examples.

Plain content

Plain text can be added to a pane using inner HTML or content API

// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
    height: '200px',
    paneSettings: [
        { size: '200px',  content: 'Left pane'
        },
        { size: '200px', content: 'Middle pane'
        },
        { size: '200px', content: 'Right pane'
        }
    ],
    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="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <!--element which is going to render the splitter-->
        <div id="splitter"> 
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Pane content using selector

HTML element can be set as 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.

// Initialize Splitter control
var splitObject = new ej.layouts.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
});

// Render initialized splitter
splitObject.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/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <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>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>