Kendo Splitter Using jQuery


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.


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  7.   <link rel="stylesheet" href="">  
  8.   <link rel="stylesheet" href="">  
  9.   <link rel="stylesheet" href="">  
  10.   <link rel="stylesheet" href="">  
  12.   <script src=""></script>  
  13.   <script src=""></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.


Orientation – vertical

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


 Kendo Splitter Using jQuery

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.


Before collapse

Kendo Splitter Using jQuery
After collapse
 Kendo Splitter Using jQuery
I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this article are always welcomed.