How To?

20 Feb 20185 minutes to read

Change Expand/Collapse icons

By default, you are provided with collapse/expand icons in Split bar to collapse or expand the splitter panes. We have provided template support to replace existing expand/collapse icons. The template support will only replace the icons, where you need to define the actions for the template icons.

• expanderTemplate Specifies HTML element string to replace template with existing expand/collapse icons.

• clickOnExpander event is triggered when we click on the template icon. This will allow you to define action to be performed on clicking the template icon.

HTML

<div id="outterSplitter">
    <div id="innerSplitter">
        <div>
            <div class="cont">Pane 1 </div>
        </div>
        <div>
            <div class="cont">Pane 2 </div>
        </div>
    </div>                   
</div>

JS

$("#innerSplitter").ejSplitter({
             height: 250,width:"80%",
             expanderTemplate: '<img class="eimg" src="basketball.png" alt="employee"/>',
			 clickOnExpander: function(args)
			{
			      if(flag) {this.collapse(0); flag=false;}
			      else {this.expand(0); flag=true;}
			}
		};)

CSS

.cont {
            padding: 10px 0 0 10px;
            text-align: center;
        }   
        .eimg {
            height:40px;
            width:35px;
			margin-left: -13px;
        }  
       .e-splitter .e-splitbar .e-splitter-h-template {
            top: 15%;
       }

The output for Splitter with Template support.

Change the splitter pane size dynamically

Splitter pane size can be changed by updating model property of paneSize and by refreshing the control using refresh public method. As shown in the below code, based on the selected dropdown list value, pane size of splitter is changed.

HTML

<span class="txt">Select PaneSize</span>
<input type="text" id="paneSize" />
<div id="Size">
    <ul>
       <li>25</li>
       <li>50</li>
       <li>75</li>
    </ul>
</div>
</br>
<div id="splitter">
    <div>
        <div class="cont">Pane 1 </div>
    </div>
    <div>
        <div class="cont">Pane 2 </div>
    </div>
</div>

JAVASCRIPT

<script type="text/javascript">
   $(function () {
      $("#splitter").ejSplitter({
           height: 250
       });
       $('#paneSize').ejDropDownList({
           targetID: "Size",
           value: "50",
	       change: "change"
       });
    });
    function change(args){
         var obj = $("#splitter").data("ejSplitter");
         obj.model.properties[0].paneSize = args.value + "%";
         obj.refresh();
    }
</script>