Getting Started

23 Nov 20166 minutes to read

This section helps to get started of the Splitter component in a React application.

Create a Splitter

Refer the common React JS Getting Started Documentation to create an application and add necessary scripts and styles for rendering our React JS components.

Create a JSX file for rendering Splitter component using <EJ.Splitter> syntax. Add required properties to it in <EJ.Splitter> tag element.

HTML

"use strict";
    ReactDOM.render(
    <EJ.Splitter id="default_outerSplitter" width= "100%" height="100%" isResponsive={true}      orientation={ej.Orientation.Vertical}>
    </EJ.Splitter>,
    document.getElementById(splitter-default')
    );

Define an HTML element for adding Rotator in the application and refer the JSX file created.

HTML

<div id="splitter-default"></div>
    <script type="text/babel" src="sample.jsx">

This will render an empty Splitter component on executing.

Note: You can find the Splitter properties from the API reference document__

Configure Splitter Panes

To configure properties for Splitter component, define properties in the JSX.

HTML

<EJ.Splitter id="integration_outterSplitter" width= "100%" height="100%" isResponsive={true}>

    </EJ.Splitter>

Configure the Splitter panes with images. Save the images in the corresponding location.

HTML

<div id="samplecontrol" className="integrationContainer">
        <EJ.Splitter id="integration_outterSplitter" width= "100%" height="100%" isResponsive={true}>
            <div>
                <div className="cont">
                    <h3 className="h3">React JS</h3>                               
                </div>
            </div>
            <div>
            <div className="cont">
                <div className="_content">Select any product from the tree to show the description.</div>
                <div className="mobile spe">
                    <h3>Mobile</h3>
                    <img src="content/images/Splitter/mobile.jpeg" />
                </div>
                <div className="harddisk spe">
                    <h3>Harddisk</h3>
                    <img src="content/images/Splitter/harddisk.jpg" />
                </div>
                <div className="logo spe">
                    <h3>Logo</h3>
                <img src="content/images/Splitter/logo.png" />
                </div>
            </div>
            </div>
         </EJ.Splitter>
    </div>

Configure Tree View

For adding Treeview component, you have to use <EJ.TreeView> syntax to corresponding element. You need to use “nodeSelect” event handler to perform any action while selection the node in Tree view.

Add the following code example in JSX to configure Tree View.

HTML

<EJ.TreeView id="treeView" className="visibleHide" nodeSelect={this.treeClicked}>
        <li>Mobile
            <ul>
                <li id="mobile" className="_child">Galaxy</li>
            </ul>
        </li>
        <li>Harddisk
            <ul>
                <li id="harddisk" className="_child">Segate </li>
            </ul>
        </li>
        <li>Logo
            <ul>
                <li id="logo" className="_child">Amazon</li>
            </ul>
        </li>
    </EJ.TreeView>

Set Actions

Add the nodeSelect event in JSX to set the action to view the images for “li” content of the Tree view.

JAVASCRIPT

treeClicked: function(e){
            if (e.currentElement.hasClass('_child')) {
                var content = $('.' + e.currentElement[0].id).html();
                $('._content').html(content);
            }
        }

You can render Splitter with Tree View using React JS, Please refer the below code in JSX.

HTML

ReactDOM.render(document.getElementById(splitter-default'));