RTL Support in EJ 1 ASP.NET MVC splitter (Splitter)

5 Jan 2018 / 2 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.

@{Html.EJ().Splitter("outerSplitter").Height("300").Width("600").Orientation(Orientation.Vertical).EnableRTL(true)

      .PaneProperties(

    p =>

    {

        p.Add().ContentTemplate(

            @<div>

                <div class="content" style="padding: 0px 15px;">

                    <h3 class="h3">

                        ASP.NET MVC

                    </h3>

                </div>

            </div>).PaneSize("60");

        p.Add().ContentTemplate(

            @<div style="height: 100%; width: 100%">

                @innerSplitter()

            </div>);

    }).Render();}



@helper innerSplitter()

{

@Html.EJ().Splitter("innerSplitter").Width("600").PaneProperties(p1 =>

{

	p1.Add().ContentTemplate
	(@<div>

		<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>

	</div>).PaneSize("200");

	p1.Add().ContentTemplate
	(@<div>

		<div class="content">

		<h3 class="h3">

		Chart

		</h3>

		Essential Chart is a business-oriented charting component.

		</div>

	</div>).PaneSize("200");

	p1.Add().ContentTemplate
	(@<div>

		<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>

	</div>).PaneSize("200");

})

}
<style type="text/css">

    #outerSplitter 
	{

        margin: 0 auto;

    }

    .h3 
	{

        font-size: 14px;

    }

    #innerSplitter 
	{

        border: 0 none;

    }

    .content 
	{

        padding: 15px;

    }

</style>

The output for Splitter when EnableRTL is “true”.

RTL-Support_img1