Multiple panes

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

tagHelper

controller.cs

<ejs-splitterid="splitter"height="280px"width="600px"><e-splitter-panes><e-splitter-panesize="150px"content="<div class='content'><h4 class='h4'>PARIS </h4>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...</div>"></e-splitter-pane><e-splitter-panesize="150px"content="<div class='content'><h4 class='h4'>CAMEMBERT </h4>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>"></e-splitter-pane><e-splitter-panesize="150px"content="<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>"></e-splitter-pane><e-splitter-panesize="150px"content="<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>"></e-splitter-pane></e-splitter-panes></ejs-splitter><style>.content{padding: 9px;}.h4{font-weight: 550;font-size: 14px;}</style>

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.

tagHelper

controller.cs

<div><ejs-splitterid="splitter"height="320px"width="600px"><e-splitter-panes><e-splitter-panesize="200px"content="<div class='content'><h4 class='h4'>PARIS </h4>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...</div>"></e-splitter-pane><e-splitter-panesize="200px"content="<div class='content'><h4 class='h4'>CAMEMBERT </h4>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>"></e-splitter-pane><e-splitter-panesize="200px"content="<div id ='vertical_splitter' 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></div><style>.content{padding: 9px;}.vertical_splitter.e-splitter.e-splitter-vertical{border: none;}.h4{font-weight: 550;font-size: 14px;}</style><scripttype="text/javascript">functiononCreate(args){var splitterObj =newej.layouts.Splitter({
paneSettings:[{ size:'150px', min:'20%'},{ size:'100px', min:'20%'}],
orientation:'Vertical'});
splitterObj.appendTo('#vertical_splitter');}</script>