Post
Ask Question

Kendo Splitter Using jQuery

Introduction

Kendo splitter is a widget that is used to split two elements in an HTML page. In this blog, we will see how to implement Kendo Splitter with the static data in an HTML page. 

Kendo Splitter

The initial step in the kendo splitter is to configure the orientation.

KendoSplitter.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  7.   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script></head>  
  14. <body>  
  15.         <div id="splitter">  
  16.                 <div>Splitter Pane A</div>  
  17.                 <div>Splitter Pane B</div>  
  18.               </div>  
  19.               <script>  
  20.               $("#splitter").kendoSplitter({  
  21.                 orientation: "vertical"  
  22.               });  
  23.               </script>  
  24. </body>  
  25. </html>  

From the above code, you can notice that the kendoSplitter object is used to initialize the kendo splitter for the HTML element.

The orientation property is used to set the splitter as vertical or horizontal.

Result

Orientation – vertical

Kendo Splitter Using jQuery
 
Orientation – horizontal 
  1. $("#splitter").kendoSplitter({  
  2.               orientation: "horizontal"  
  3.             });  

Result

 Kendo Splitter Using jQuery
Collapse

You can even add the collapse feature to the splitter. So, by clicking on the collapse icon, we can define how much the pane should be collapsed using the collapsed Size property.

  1. $("#splitter").kendoSplitter({  
  2.                 orientation: "horizontal",  
  3.                 panes: [ { collapsible: true, collapsedSize: "10%" }, {} ]  
  4.               });  

The collapsible property is used to enable the collapse feature in the splitter.

Result

Before collapse

Kendo Splitter Using jQuery
 
After collapse
 
 Kendo Splitter Using jQuery
Reference
https://demos.telerik.com/kendo-ui/splitter/index
 
I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this article are always welcomed.