Search results

Set the disabled state in JavaScript (ES5) SplitButton control

SplitButton component can be enabled or disabled using disabled property. To disable SplitButton component, set the disabled property as true.

The following example illustrates how to set the disable state in SplitButton component.

Source
Preview
index.js
index.html
styles.css
ej.base.enableRipple(true);

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

//To disable the SplitButton.
var splitBtn = new ej.splitbuttons.SplitButton({iconCss: 'e-sb e-sigma', items: items, disabled: true}, '#iconbutton');
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.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;
  }