Available in the OSS Version
Split Button - Api and Events

This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to handle events in the Split Button control and API usage.
Code View

Copy to Clipboard
HTML
                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
    <!-- Used to add markup and provide logging 
        functionality for the API Explorer and API Viewer UI -->
    <script src="/js/apiviewer.js"></script>
    
    <style>
        @media print {
            .noprint {
                display: none;
            }
        }

        .arrorRight {
        }

        .arrorLeft {
        }

    </style>
</head>
<body>
    <div class="api-explorer noprint">
        <button id="split-expand">Expand</button>
        <button id="split-collapse">Collapse</button>
    </div>
    <br />
    <div id="split-button"></div>
    <div class="api-viewer noprint"></div>

    <script>
        $(function () {
            // Used to show output in the API Viewer at runtime, 
            // defined in external script 'apiviewer.js'    
            var apiViewer = new $.ig.apiViewer();

            $("#split-button").igSplitButton({
                items: [{
                    name: "arrowLeft",
                    label: "arrowLeft",
                    icon: "ui-igbutton ui-igbutton-undo"
                }, {
                    name: "arrorRight",
                    label: "arrorRight",
                    icon: "ui-igbutton ui-igbutton-redo"
                }],
                defaultItemName: "arrowLeft"
            });

            $("#split-button").on("igsplitbuttonclick", function () {
                var message = "igsplitbuttonclick";
                apiViewer.log(message);
            });

            $("#split-button").on("igsplitbuttonexpanded", function () {
                var message = "igsplitbuttonexpanded";
                apiViewer.log(message);
            });

            $("#split-button").on("igsplitbuttonexpanding", function () {
                var message = "igsplitbuttonexpanding";
                apiViewer.log(message);
            });

            $("#split-button").on("igsplitbuttoncollapsed", function () {
                var message = "igsplitbuttoncollapsed";
                apiViewer.log(message);
            });

            $("#split-button").on("igsplitbuttoncollapsing", function () {
                var message = "igsplitbuttoncollapsing";
                apiViewer.log(message);
            });

            // Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation. 
            // Those events are only raised by their respective user interaction.
            $("#split-expand").on("click", function (e) {
                $("#split-button").igSplitButton("expand", e);
            });

            // Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation. 
            // Those events are only raised by their respective user interaction.
            $("#split-collapse").on("click", function (e) {
                $("#split-button").igSplitButton("collapse", e);
            });
        });


    </script>
</body>
</html>
Ignite UI for jQuery | Samples

Search Results

Split Button - Api and Events

Code View
