jube-fork/Jube.App/wwwroot/kendo/examples/grid/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>
    
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>

<div id="example">

    <div class="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Selection</h4>
            <ul class="options">
                <li>
                    <input type="text" value="0" id="selectRow" />
                    <button class="selectRow">Select row</button>
                </li>
                <li>
                    <button class="clearSelection">Clear selected rows</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Expand / Collapse</h4>
            <ul class="options">
                <li>
                    <input type="text" value="0" id="groupRow" />
                </li>
                <li>
                    <button class="toggleGroup">Toggle group</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Resize Column</h4>
            <ul class="options">
                <li>
                    <input type="text" placeholder="Column Index" id="colIndex" />
                    <input type="text" placeholder="Width value" id="colWidth" />
                </li>
                <li>
                    <button class="changeColWidth">Resize column</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Show/hide column</h4>
            <ul class="options">
                <li>
                    <input class="kd-checkbox" type="checkbox" id="0" checked="checked">
                    <label for="0" class="checkbox-label">Product Name</label>
                </li>
                <li>
                    <input class="kd-checkbox" type="checkbox" id="1" checked="checked">
                    <label for="1" class="checkbox-label">Unit Price</label>
                </li>
                <li>
                    <input class="kd-checkbox" type="checkbox" id="2" checked="checked">
                    <label for="2" class="checkbox-label">Units in Stock</label>
                </li>

            </ul>
        </div>
        <div class="box-col">
            <h4>Export To Excel</h4>
            <ul class="options">
                <li>
                    <input type="text" placeholder="FileName" id="fileName" />
                </li>
                <li>
                    <button class="exportBtn">Export to Excel</button>
                </li>
            </ul>
        </div>
    </div>

    <div id="grid"></div>

    <script>
        $(document).ready(function () {
            $("#configurator").kendoTabStrip();
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui/service/Products",
                            dataType: "jsonp"
                        }
                    },
                    pageSize: 5,
                    group: {
                        field: "UnitsInStock",
                        dir: "asc"
                    }
                },
                selectable: "multiple row",
                pageable: {
                    buttonCount: 5
                },
                scrollable: true,
                groupable: true,
                columns: [
                    {
                        field: "ProductName",
                        title: "Product Name"
                    },
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}"
                    },
                    {
                        field: "UnitsInStock",
                        title: "Units In Stock"
                    }
                ],
                excelExport: function (e) {
                    e.workbook.fileName = $("#fileName").val();
                }
            });

            $(".clearSelection").click(function () {
                $("#grid").data("kendoGrid").clearSelection();
            });

            var selectRow = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                    var grid = $("#grid").data("kendoGrid"),
                        rowIndex = $("#selectRow").val(),
                        row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(rowIndex);

                    grid.select(row);
                }
            },
                toggleGroup = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var grid = $("#grid").data("kendoGrid"),
                            rowIndex = $("#groupRow").val(),
                            row = grid.tbody.find(">tr.k-grouping-row").eq(rowIndex);

                        if (row.has(".k-i-collapse").length) {
                            grid.collapseGroup(row);
                        } else {
                            grid.expandGroup(row);
                        }
                    }
                },
                changeColWidth = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var grid = $("#grid").data("kendoGrid"),
                            colIndex = $("#colIndex").val(),
                            width = $("#colWidth").val(),
                            column = grid.columns[colIndex];
                        if (parseInt(colIndex) >= 0 && parseInt(width) >= 0) {
                            grid.resizeColumn(column, width);
                        }
                    }
                },
                exportFile = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var grid = $("#grid").data("kendoGrid");
                        grid.saveAsExcel();
                    }
                },
                checkBoxChange = function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    var columnIndex = parseInt(this.id);

                    if (this.checked) {
                        grid.showColumn(columnIndex);
                    } else {
                        grid.hideColumn(columnIndex);
                    }
                };


            $(".selectRow").click(selectRow);
            $("#selectRow").keypress(selectRow);

            $(".toggleGroup").click(toggleGroup);
            $("#groupRow").keypress(toggleGroup);

            $(".changeColWidth").click(changeColWidth);
            $("#colWidth").keypress(changeColWidth);
            $("#colIndex").keypress(changeColWidth);

            $(".exportBtn").click(exportFile);
            $("#fileName").keypress(exportFile);

            $(".kd-checkbox").click(checkBoxChange);
        });
    </script>
</div>


    
</body>
</html>