Create right to left splitbutton in EJ2 JavaScript Split button control

10 May 20233 minutes to read

SplitButton component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in SplitButton component.

ej.base.enableRipple(true);

var items = [
     {
        text: 'Autosum'
    },
    {
        text: 'Average'
    },
    {
        text: 'Count numbers',
    },
    {
        text: 'Min'
    },
    {
        text: 'Max'
    }];

//To enable RTL in SplitButton.
var splitBtn = new ej.splitbuttons.SplitButton({ iconCss: 'e-sb e-sigma', items: items, enableRtl: true }, '#iconbutton');

splitBtn.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 SplitButton</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="iconbutton">Autosum</button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

@font-face {
font-family: 'sb-icon';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRsAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmFjFe0gAAAcgAAABIaGVhZBIxlUcAAADQAAAANmhoZWEHHANtAAAArAAAACRobXR4B+gAAAAAAYAAAAAIbG9jYQAkAAAAAAHAAAAABm1heHABDQAeAAABCAAAACBuYW1lakQFAwAAAhAAAAIlcG9zdEP61+cAAAQ4AAAAMwABAAADUv9qAFoEAAAAAAADbgABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAj4iO918PPPUACwPoAAAAANfSqDwAAAAA19KoPAAAAAADbgPqAAAACAACAAAAAAAAAAEAAAACABIAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAJAAAAAEAAAAAA24D6gARAAATHQETARUhEyMHIQEDIRUzESG65f7gAsolLBH9ywES9gIFLf1wA5xDQv6u/pBSAQNyAVwBaXIBBAAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABwABAAEAAAAAAAIABwAIAAEAAAAAAAMABwAPAAEAAAAAAAQABwAWAAEAAAAAAAUACwAdAAEAAAAAAAYABwAoAAEAAAAAAAoALAAvAAEAAAAAAAsAEgBbAAMAAQQJAAAAAgBtAAMAAQQJAAEADgBvAAMAAQQJAAIADgB9AAMAAQQJAAMADgCLAAMAAQQJAAQADgCZAAMAAQQJAAUAFgCnAAMAAQQJAAYADgC9AAMAAQQJAAoAWADLAAMAAQQJAAsAJAEjIHNiLWljb25SZWd1bGFyc2ItaWNvbnNiLWljb25WZXJzaW9uIDEuMHNiLWljb25Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAHMAYgAtAGkAYwBvAG4AUgBlAGcAdQBsAGEAcgBzAGIALQBpAGMAbwBuAHMAYgAtAGkAYwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAYgAtAGkAYwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECAQMACXN1bW1hdGlvbgAAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-sb {
 font-family: 'sb-icon' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.e-sigma::before {
  content: '\e700';
}

.e-split-btn-wrapper{
  margin: 20px 20px 5px 5px;
  }