jube-fork/Jube.App/wwwroot/kendo/examples/checkboxgroup/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>Enable / Disable checkBoxGroup</h4>
            <ul class="options">
                <li>
                    <button id="enablecheckBoxGroup" type="button">Enable</button>
                    <button id="disablecheckBoxGroup" type="button">Disable</button>
                </li>
            </ul>
        </div>

        <div class="box-col">
            <h4>Enable / Disable item</h4>
            <ul class="options">
                <li>
                    <input type="number" value="0" id="buttonIndexEnable" /> <button type="button" id="enableItem">Enable item at index</button>
                </li>
                <li>
                    <input type="number" value="0" id="buttonIndexDisable" /> <button type="button" id="disableItem">Disable item at index</button>
                </li>
            </ul>
        </div>

        <div class="box-col">
            <h4>Get items</h4>
            <ul class="options">
                <li>
                    <input type="number" value="0" id="inputGetItem" /><button id="buttonGetItem" type="button">Get item at index</button>
                </li>
                <li>
                    <button id="getAllItems" type="button">Get all values</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Get/Set value</h4>
            <ul class="options">
                <li>
                    <input type="text" value="1" id="inputSetValue" /><button id="buttonSetValue" type="button">Set value</button>
                </li>
                <li>
                    <button id="getValue" type="button">Get value</button>
                </li>
            </ul>
        </div>
    </div>

    <div class="demo-section k-content">
        <div id="dialog"></div>
        <div>
            <label for="checkBoxGroup" class="label">Select country:</label>
            <ul id="checkBoxGroup"></ul>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var checkBoxGroup = $("#checkBoxGroup").kendoCheckBoxGroup({
                items: [
                    {
                        enabled: true,
                        encoded: false,
                        label: "Spain",
                        value: "1"
                    },
                    {
                        enabled: true,
                        encoded: false,
                        label: "<i> Italy </i>",
                        value: "2"
                    },
                    {
                        enabled: true,
                        encoded: true,
                        label: "Russia",
                        value: "3"
                    },
                    {
                        enabled: false,
                        encoded: false,
                        label: "Japan",
                        value: "4"
                    },
                    {
                        enabled: true,
                        encoded: false,
                        cssClass: "custom-class",
                        label: "Portugal",
                        value: "5"
                    },
                ],
                layout: "vertical",
                value: ["3"]
            }).data("kendoCheckBoxGroup");

            $("#buttonIndexEnable").kendoNumericTextBox({
                min: 0,
                decimal: 0,
                format: "n0",
                value: 0
            });

            $("#buttonIndexDisable").kendoNumericTextBox({
                min: 0,
                decimal: 0,
                format: "n0",
                value: 0
            });

            $("#inputGetItem").kendoNumericTextBox({
                min: 0,
                decimal: 0,
                format: "n0",
                value: 0
            });

            var dialog = $("#dialog").kendoDialog({
                visible: false,
                modal: false,
                width: "400px",
                content: ""
            }).data("kendoDialog");

            $("#enablecheckBoxGroup").click(function () {
                checkBoxGroup.enable(true);
            });

            $("#disablecheckBoxGroup").click(function () {
                checkBoxGroup.enable(false);
            });

            $("#enableItem").click(function () {
                checkBoxGroup.enableItem(true, $("#buttonIndexEnable").val());
            });

            $("#disableItem").click(function () {
                checkBoxGroup.enableItem(false, $("#buttonIndexDisable").val());
            });

            $("#buttonGetItem").click(function () {
                var index = $("#inputGetItem").val()
                var item = checkBoxGroup.item(index);
                dialog.content("<strong>Item at index: </strong>" + index + " <strong> Value: </strong>" + $(item[0]).val());
                dialog.open();
            });

            $("#getValue").click(function () {
                dialog.content("<strong>checkBoxGroup value:</strong>" + checkBoxGroup.value());
                dialog.open();
            });

            $("#buttonSetValue").click(function () {
                checkBoxGroup.value($("#inputSetValue").val());
            });

            $("#getAllItems").click(function () {
                var items = checkBoxGroup.items();
                var texts = []
                for (var i = 0; i < items.length; i++) {
                    texts.push($(items[i]).val())
                }
                dialog.content("<strong>CheckBoxGroup values:</strong>" + texts);
                dialog.open();
            });
        });


    </script>
    <style>
        .label {
            font: normal 14px/16px Metric, Arial, Helvetica, sans-serif;
            color: #656565;
            display: inline-block;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .custom-class {
            font-weight: bold;
        }
    </style>
</div>



    
</body>
</html>