ejmSplitPane

The Essential JavaScript Mobile SplitPane divides a region on the web page. It is configured to split up the horizontal view vertically. Center pane displays content from an external URL that is specific to the item selected in the left pane or right pane.

Custom Design for HTML SplitPane control.

$(element).ejmSplitPane()

Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane();
        </script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.mobile.core

    • module:ej.data

    • module:ej.touch

    Members

    contentPane

    Specifies content pane specific properties.

    contentPane.templateId string

    Specifies Id for template content of content pane.

    Default Value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-contentpane-templateid="contenttemplate">
            <div id="target2" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
        </div>
    
        <script id="contenttemplate" type="text/x-jsrender">
                <div>Main contents goes here</div>
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target2" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
        </div>
    
        <script id="contenttemplate" type="text/x-jsrender">
                <div>Main contents goes here</div>
        </script>
    
        <script>
            $("#splitview").ejmSplitPane({ contentPane: { templateId: "contenttemplate" } });
        </script>

    cssClass string

    Sets the root class for SplitPane theme. This cssClass API helps to use custom skinning option for SplitPane control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value

    • ””

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-cssclass="customclass">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <style>
            .customclass * {
                color: red;
            }
        </style>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ cssClass: "customclass" });
        </script>
    
        <style>
            .customclass * {
                color: red;
            }
        </style>

    edgeThreshold number

    Sets swipe threshold width for both left and right panes.

    Default Value

    • 50

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-edgethreshold="100">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ edgeThreshold: 100 });
        </script>

    enablePersistence boolean

    Saves current model value to browser cookies for state maintains. While refreshing the page retains the model value apply from browser cookies.

    Default Value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-enablepersistence="true">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ enablePersistence: true });
        </script>

    enableSwipe boolean

    Enable or Disable the swiping behavior to the content.

    Default Value

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-enableswipe="false">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ enableSwipe: false });
        </script>

    height string

    Specifies the height of the SplitPane.

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-height="300px">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ height: "300px" });
        </script>

    isRelative string

    Sets relative position to the SplitPane if this property is true. Otherwise absolute position.

    NOTE

    If you set relative positioning for SplitPane, you should set height for SplitPane.

    Default Value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <br /><br /><br />
        <div id="splitview" data-role="ejmsplitpane" data-ej-isrelative="true" data-ej-height="200px">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <br /><br /><br />
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ isRelative: true, height: "200px" });
        </script>

    leftPane

    Specifies left pane specific properties.

    leftPane.animationType enum

    Specifies the animation type for leftpane on its open or close. See SliptpaneAnimationType

    NOTE

    To animate leftpane while opening or closing, set the property leftPane.showOnTablet to false.

    Default Value

    • “overlay”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-showontablet="false" data-ej-leftpane-animationtype="reveal">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ leftPane: { showOnTablet: false, animationType: "reveal" } });
        </script>

    leftPane.showOnTablet boolean

    Specifies the leftpane visibility for tablet devices. If this property set as false, the leftpane will be hidden and it will be open from left side window on swipe.

    Default Value

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-showontablet="false">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ leftPane: { showOnTablet: false } });
        </script>

    leftPane.templateId string

    Specifies Id for template content of leftpane.

    Default Value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-templateid="lefttemplate">
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="lefttemplate" type="text/x-jsrender">
                <div>Leftpane contents goes here</div>
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="lefttemplate" type="text/x-jsrender">
            <div>Leftpane contents goes here</div>
        </script>
    
        <script>
            $("#splitview").ejmSplitPane({ leftPane: { templateId: "lefttemplate" } });
        </script>

    leftPane.width string

    Specifies the width of leftpane.

    Default Value

    • “280px”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-width="350px">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ leftPane: { width: "350px" } });
        </script>

    renderMode enum

    Changes the rendering mode of the SplitPane. See RenderMode

    Default Value

    • auto

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-rendermode="android">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ renderMode: "android" });
        </script>

    rightPane

    Specifies right pane specific properties.

    rightPane.animationType enum

    Specifies the animation type for rightpane on its open or close. See SliptpaneAnimationType

    NOTE

    To animate rightpane while opening or closing, set the property rightPane.showOnTablet to false.

    Default Value

    • “overlay”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-rightpane-showontablet="false" data-ej-rightpane-animationtype="reveal">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
    
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({rightPane: { showOnTablet: false, animationType: "reveal" } });
        </script>

    rightPane.showOnTablet boolean

    Specifies the rightpane visibility for tablet devices. If this property set as false, the rightpane will be hidden and it will be open from right side window on swipe.

    Default Value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-rightpane-showontablet="true">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
    
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ rightPane: { showOnTablet: true } });
        </script>

    rightPane.templateId string

    Specifies Id for template content of rightpane.

    Default Value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-rightpane-templateid="righttemplate">
    
            <div id="target2" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="righttemplate" type="text/x-jsrender">
                <div>Rightpane contents goes here</div>
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
    
            <div id="target2" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="righttemplate" type="text/x-jsrender">
            <div>Rightpane contents goes here</div>
        </script>
    
        <script>
            $("#splitview").ejmSplitPane({ rightPane: { templateId: "righttemplate" } });
        </script>

    rightPane.width string

    Specifies the width of rightpane.

    Default Value

    • “280px”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-rightpane-width="350px">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
    
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ rightPane: { width: "350px" } });
        </script>

    stopEventPropagation boolean

    Stops event propagation for other elements.

    Default Value

    • true if windows render mode, otherwise false.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-stopeventpropagation="true">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ stopEventPropagation: true });
        </script>

    width string

    Specifies the width of the SplitPane.

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-width="700px">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            $("#splitview").ejmSplitPane({ width: "700px" });
        </script>

    Methods

    closePane()

    To close the currently opened pane.

    Example

  • html
  • <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-animationtype="reveal"  data-ej-leftpane-showontablet="false">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <input data-role="ejmbutton" type="button" data-ej-text="Open LeftPane" data-ej-touchend="open" />
                <input data-role="ejmbutton" type="button" data-ej-text="Close Pane" data-ej-touchend="close" />
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            function open() {
                $("#splitview").ejmSplitPane("openLeftPane");
            }
            function close() {
                $("#splitview").ejmSplitPane("closePane");
            }
        </script>

    openLeftPane()

    To open leftpane on demand.

    Example

  • html
  • <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-showontablet="false">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <input data-role="ejmbutton" type="button" data-ej-text="Open LeftPane" data-ej-touchend="open" />
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            function open() {
                $("#splitview").ejmSplitPane("openLeftPane");
            }
        </script>

    openRightPane()

    To open rightpane on demand.

    Example

  • html
  • <div id="splitview" data-role="ejmsplitpane">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <input data-role="ejmbutton" type="button" data-ej-text="Open RightPane" data-ej-touchend="open" />
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            function open() {
                $("#splitview").ejmSplitPane("openRightPane");
            }
        </script>

    Events

    beforeClose

    Event triggers before the leftpane or rightpane closing.

    Name Type Description
    argument Object Event parameters from SplitPane.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    panel string Returns the panel which is closing
    content object Returns closing panel contents as HTML elements
    element object Returns closing panel as HTML elements

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-beforeclose="close">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            function close(args) {
                //Handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="lefttemplate" type="text/x-jsrender">
            <div>Leftpane contents goes here</div>
        </script>
    
        <script>
            $("#splitview").ejmSplitPane({ beforeClose: "close" });
            function close(args) {
                //Handle the event
            }
        </script>

    beforeOpen

    Event triggers before the leftpane or rightpane opening.

    Name Type Description
    argument Object Event parameters from SplitPane.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    panel string Returns the panel which is closing
    content object Returns opening panel contents as HTML elements
    element object Returns opening panel as HTML elements

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-beforeopen="open">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            function open(args) {
                //Handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="lefttemplate" type="text/x-jsrender">
            <div>Leftpane contents goes here</div>
        </script>
    
        <script>
            $("#splitview").ejmSplitPane({ beforeopen: "open" });
            function open(args) {
                //Handle the event
            }
        </script>

    close

    Event triggers while the leftpane or rightpane close.

    Name Type Description
    argument Object Event parameters from SplitPane.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    panel string Returns the panel which is closing
    content object Returns closed panel contents as HTML elements
    element object Returns closed panel as HTML elements

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-close="close">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            function close(args) {
                //Handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="lefttemplate" type="text/x-jsrender">
            <div>Leftpane contents goes here</div>
        </script>
    
        <script>
            $("#splitview").ejmSplitPane({ close: "close" });
            function close(args) {
                //Handle the event
            }
        </script>

    open

    Event triggers while the leftpane or rightpane open.

    Name Type Description
    argument Object Event parameters from SplitPane.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    panel string Returns the panel which is closing
    content object Returns opened panel contents as HTML elements
    element object Returns opened panel as HTML elements

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-open="open">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            function open(args) {
                //Handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="lefttemplate" type="text/x-jsrender">
            <div>Leftpane contents goes here</div>
        </script>
    
        <script>
            $("#splitview").ejmSplitPane({ open: "open" });
            function open(args) {
                //Handle the event
            }
        </script>

    swipe

    Event triggers while swipe happens in the page to open leftpane or rightpane.

    Name Type Description
    argument Object Event parameters from SplitPane.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    event object Returns the event object which contains information about the event
    direction string Returns the direction from which swipe event happens

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="splitview" data-role="ejmsplitpane" data-ej-swipe="swipe">
            <div id="target1" data-ej-pane="left">
                <div>Leftpane contents goes here</div>
            </div>
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script>
            function swipe(args) {
                //Handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="splitview">
            <div id="target2" data-ej-pane="right">
                <div>Rightpane contents goes here</div>
            </div>
            <div id="target3" data-ej-pane="content">
                <div>Main contents goes here</div>
            </div>
        </div>
    
        <script id="lefttemplate" type="text/x-jsrender">
            <div>Leftpane contents goes here</div>
        </script>
    
        <script>
            $("#splitview").ejmSplitPane({ swipe: "swipe" });
            function swipe(args) {
                //Handle the event
            }
        </script>