jube-fork/Jube.App/wwwroot/kendo/examples/toolbar/api.html

<!DOCTYPE html>
<html>
<head>
    <title>API</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Get selected action</h4>
            <ul class="options">
                <li>
                    <button class="getSelected">Get selected action</button>
                </li>
                <li>
                    Selected: <span id="selectedFromGroup"></span>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Show / Hide</h4>
            <ul class="options">
                <li>
                    <button class="togglePlayerControlsVisibility">Hide player controls</button>
                </li>
                <li>
                    <button class="toggleRepeatVisibility">Hide Repeat</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Enable / Disable</h4>
            <ul class="options">
                <li>
                    <button class="toggleRepeat">Enable/Disable Repeat</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Add</h4>
            <ul class="options">
                <li>
                    <button class="addItem">Add new button</button>
                </li>
                <li>
                    <button class="addSplitButton">Add new SplitButton</button>
                </li>
                <li>
                    <button class="addButtonGroup">Add new ButtonGroup</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Remove</h4>
            <ul class="options">
                <li>
                    <button class="removeItem">Remove by ID</button>
                    <input type="text" value="#delete" id="forRemoval" style="width:130px" />
                </li>
            </ul>
        </div>
    </div>

    <div class="demo-section k-content wide">
        <div id="toolbar"></div>
    </div>

    <script>
        $(document).ready(function () {
            $("#toolbar").kendoToolBar({
                items: [
                    {
                        type: "buttonGroup",
                        id: "playerControls",
                        buttons: [
                            { id: "play", text: "play", togglable: true, group: "player" },
                            { id: "pause", text: "pause", togglable: true, group: "player", selected: true },
                            { id: "stop", text: "stop", togglable: true, group: "player" }
                        ]
                    },
                    { type: "button", togglable: true, id: "repeat", text: "repeat" },
                    {
                        type: "splitButton",
                        id: "save",
                        text: "save",
                        menuButtons: [
                            { id: "favourites", text: "add to favourites" },
                            { id: "later", text: "listen later" },
                            { id: "download", text: "download" }
                        ]
                    },
                    { type: "button", id: "delete", text: "delete" }
                ]
            });

            $(".getSelected").click(function () {
                var toolbar = $("#toolbar").data("kendoToolBar"),
                    selected;

                selected = toolbar.getSelectedFromGroup("player");
                $("#selectedFromGroup").text(selected.text());
            });

            $(".togglePlayerControlsVisibility").click(function (e) {
                var toolbar = $("#toolbar").data("kendoToolBar"),
                    buttonGroup = $("#playerControls"),
                    isVisible = buttonGroup.is(":visible");

                if (isVisible) {
                    toolbar.hide(buttonGroup);
                    $(e.target).text("Show player controls");
                } else {
                    toolbar.show(buttonGroup);
                    $(e.target).text("Hide player controls");
                }
            });

            $(".toggleRepeat").click(function () {
                var toolbar = $("#toolbar").data("kendoToolBar"),
                    repeatButton = $("#repeat"),
                    isDisabled = repeatButton.hasClass("k-state-disabled");

                toolbar.enable(repeatButton, isDisabled);
            });

            $(".toggleRepeatVisibility").click(function (e) {
                var toolbar = $("#toolbar").data("kendoToolBar"),
                    repeatButton = $("#repeat"),
                    isVisible = repeatButton.is(":visible");

                if (isVisible) {
                    toolbar.hide(repeatButton);
                    $(e.target).text("Show Repeat");
                } else {
                    toolbar.show(repeatButton);
                    $(e.target).text("Hide Repeat");
                }
            });

            $(".removeItem").click(function () {
                var toolbar = $("#toolbar").data("kendoToolBar"),
                    id = $("#forRemoval").val();

                toolbar.remove(id);
            });

            $(".addItem").click(function () {
                var toolbar = $("#toolbar").data("kendoToolBar");
                toolbar.add({ type: "button", text: "New Button", id: "newButton", togglable: true });
            });

            $(".addSplitButton").click(function () {
                var toolbar = $("#toolbar").data("kendoToolBar");

                toolbar.add({
                    type: "splitButton",
                    text: "New SplitButton",
                    menuButtons: [
                        { text: "Option 1" },
                        { text: "Option 2" }
                    ]
                });
            });

            $(".addButtonGroup").click(function () {
                var toolbar = $("#toolbar").data("kendoToolBar");

                toolbar.add({
                    type: "buttonGroup",
                    buttons: [
                        { text: "Left" },
                        { text: "Middle" },
                        { text: "Right" }
                    ]
                });
            });
        });
    </script>

    <style>
        #toolbar {
            margin: 0 auto;
        }

        #selectedFromGroup {
            font-weight: bold;
            font-color: #000;
        }
    </style>
</div>

    
</body>
</html>