RTL Support
8 Jan 20189 minutes to read
The Splitter provides you with RTL (Right-To-Left) support. The alignment of Splitter can be changed from Left-To-Right to Right-To-Left.
Enable RTL
The following steps explain enabling the right-to-left property for Splitter widget.
In the View page add the Splitter helper to enable the RTL functionality.
<ej-splitter id="splitter" height="300" width="600" orientation="@Orientation.Vertical" enable-rtl="true">
<e-split-panes>
<e-split-pane pane-size="60" min-size="30">
<e-content-template>
<div class="content" style="padding: 0px 15px;">
<h3 class="h3">
ASP.NET MVC
</h3>
</div>
</e-content-template>
</e-split-pane>
<e-split-pane minSize="30">
<e-content-template>
<div style="height:100%">
<ej-Splitter id="innerSplitter" is-responsive="true" width="600" enable-auto-resize="true">
<e-split-panes>
<e-split-pane pane-size="200" minSize="30">
<e-content-template>
<div class="content">
<h3 class="h3">
Tools
</h3>
Essential Tools is an collection of user interface components used to create interactive
ASP.NET MVC applications.
</div>
</e-content-template>
</e-split-pane>
<e-split-pane pane-size="33%" min-size="30">
<e-content-template>
<div class="content">
<h3 class="h3">
Chart
</h3>
Essential Chart is a business-oriented charting component.
</div>
</e-content-template>
</e-split-pane>
<e-split-pane min-size="200">
<e-content-template>
<div class="content">
<h3 class="h3">
Grid
</h3>
Essential MVC Grid offers full featured a Grid control with extensive support for
Grouping and the display of hierarchical data.
</div>
</e-content-template>
</e-split-pane>
</e-split-panes>
</ej-Splitter>
</div>
</e-content-template>
</e-split-pane>
</e-split-panes>
</ej-splitter><style type="text/css">
#splitter
{
margin: 0 auto;
}
.h3
{
font-size: 14px;
}
#innerSplitter
{
border: 0 none;
}
.content
{
padding: 15px;
}
</style>The output for Splitter when EnableRTL is “true”.
