如何冻结 kendo 传播 sheet 中的第一行

Question

如何冻结 kendo 传播 sheet 中的第一行。我有一个 kendo 传播 sheet，它使用 Ajax json 绑定。我正在尝试冻结第一行以冻结 header 行。我已经用谷歌搜索了很多，但没有得到任何解决方案。请帮助我。

这是我下面的 Kendo Spread sheet.

代码

<script>
        $(function () {
            debugger
            var customVal = $('#subtab-agent-home-unpaid').find('span.badge ').text();
            var CellCount = $('#sessionDivCount').attr('data-id');
            var headercount = '1';
            var displayCount = Number(CellCount) + Number(headercount);


            var shouldPopulateHeader = '';
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: onRead,
                    submit: onSubmit
                },
                requestEnd: function (e) {
                    setTimeout(function (e) {
                        debugger
                        if (shouldPopulateHeader) {
                            shouldPopulateHeader = false;

                            var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
                            var sheet = spreadsheet.activeSheet();
                            // Change the default headers for the first and the second column
                            sheet.batch(function () {
                                sheet.range("A1").value("Order ID");
                                sheet.range("A1").addClass("customHeaderRowStyles");
                                sheet.range("B1").value("PO Number");
                                sheet.range("C1").value("Method");
                                sheet.range("D1").value("Check/Receipt/Reference/Confirmation Number");
                                sheet.range("E1").value("Date Check Was Made Made Payment Was Made");
                                sheet.range("F1").value("Agent Payment Confirmation");
                                sheet.range("G1").value("Estimated Payment Arrival Date");

                                sheet.range("A1:A16384 ").enable(false);

                                sheet.range("B1:B16384 ").enable(false);
                                sheet.range("A2:A16384 ").textAlign = "center";

                                var range = sheet.range("A2:A16384"); // 2x2 cell range
                                range.bold = true;
                                range.textAlign = "center";
                                range.color("green");

                                var range1 = sheet.range("B2:B16384"); // 2x2 cell range
                                range1.bold = true;
                                range1
                                range1.textAlign = "center";
                                range1.color("black");
                                range1.defaultValue = null;
                                sheet.range("c2").textAlign = "center";
                            }, { recalc: true });
                        }
                    }, 0);
                },
                batch: true,
                change: function () {
                    $("#cancel, #save").toggleClass("k-state-disabled", !this.hasChanges());
                },
                schema: {
                    model: {
                        //id: "ProductID",
                        fields: {
                            OrderID: {
                                type: "number",
                                defaultValue: null
                            },
                            PO: {
                                type: "string",
                                defaultValue: null
                            },
                            Method: {
                                type: "string",

                            },
                            Check_Receipt_Refernce_confirmation_Number: {
                                type: "string"

                            },
                            DateCheck_Was_Mailed_Payment_Was_Made: {
                                type: "date"
                            },
                            Agent_Payment_Confirmation: {
                                type: "string"
                            },
                            Estimated_Payment_Arrival_Date: {
                                type: "date"
                            },

                        }
                    }
                }
            });

            $("#spreadsheet").kendoSpreadsheet({
                columns: 8,
                rows: displayCount,
                toolbar: true,
                sheetsbar: false,
                sheets: [{
                    name: "Products",
                    dataSource: dataSource,
                    filter: {
                        ref: "A1:G"+Number(CellCount)+"",
                        columns:[]
                    },
                    rows: [{
                        height: 20,
                        cells: [
                            {
                                value: "Order ID",
                                bold: "true",
                                background: "#9c27b0",
                                textAlign: "center",
                                color: "white",
                                hidden: true,
                                enable: false
                            }, {
                                bold: "true",
                                background: "#9c27b0",
                                textAlign: "center",
                                color: "white",
                                enable: false
                            }, {
                                bold: "true",
                                background: "#9c27b0",
                                textAlign: "center",
                                color: "white",

                            }, {
                                bold: "true",
                                background: "#9c27b0",
                                textAlign: "center",
                                color: "white",

                            },
                            {
                                bold: "true",
                                background: "#9c27b0",
                                color: "white",
                                textAlign: "center",

                            },
                            {
                                bold: "true",
                                background: "#9c27b0",
                                textAlign: "center",
                                color: "white"
                            }, {
                                bold: "true",
                                background: "#9c27b0",
                                textAlign: "center",
                                color: "white"
                            }
                        ]
                    }],
                    columns: [
                        { width: 145 },
                        { width: 145 },
                        { width: 145 },
                        { width: 300 },
                        { width: 300 },
                        { width: 300 },
                        { width: 300 }
                    ]
                }]
            });



            function onSubmit(e) {
                debugger
                var arrofId = new Array();
                var models = {};
                var obj = "";
                for (i = 0; i < JSON.stringify(e.data.created.length); i++) {
                    obj = e.data.created[i];
                    arrofId.push(obj);
                }
                arrofId.push(obj);
                $.ajax({
                    type: "POST",
                    url: "../Agent/GetDataSpreadSheetSubmit",
                    data: '{models: ' + JSON.stringify(arrofId) + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        alert('Record Saved Succesfully');
                        $('#grid').data('kendoGrid').dataSource.read();
                        $('#grid').data('kendoGrid').refresh();
                    },
                    error: function (xhr, httpStatusMessage, customErrorMessage) {
                        alert(xhr.responseText);
                    }
                });
            }

            function onRead(options) {
                $.ajax({
                    url: "../Agent/GetDataSpreadSheet",
                    dataType: "json",
                    success: function (result) {
                        debugger
                        options.success(result.data);
                        $("#spreadsheet").data("kendoSpreadsheet").refresh();
                        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
                        var sheet = spreadsheet.activeSheet();


                        sheet.range("A1").value("Order ID");

                        sheet.range("B1").value("PO Number");
                        sheet.range("C1").value("Method");
                        sheet.range("D1").value("Check/Receipt/Reference/Confirmation Number");
                        sheet.range("E1").value("Date Check Was Mailed Payment Was Made");
                        sheet.range("F1").value("Agent Payment Confirmation");
                        sheet.range("G1").value("Estimated Payment Arrival Date");
                        sheet.range("A1:A16384 ").enable(false);
                        sheet.range("A1:A16384 ").textAlign("center");
                        sheet.range("B1:B16384 ").enable(false);
                        sheet.range("B1:B16384 ").textAlign("center");
                        sheet.range("C1:C16384 ").textAlign("center");
                        sheet.range("D1:D16384 ").textAlign("center");
                        sheet.range("E1:E16384 ").textAlign("center");
                        sheet.range("F1:F16384 ").textAlign("center");
                        sheet.range("G1:G16384 ").textAlign("center");
                        sheet.range("A2:A16384 ").textAlign = "center";

                        var range = sheet.range("A2:A16384"); // 2x2 cell range
                        range.bold = true;
                        range.textAlign = "center";
                        range.color("black");

                        var range1 = sheet.range("B2:B16384"); // 2x2 cell range
                        range1.bold = true;

                        range1.textAlign = "center";
                        range1.color("black");
                        range1.defaultValue = null;
                        sheet.range("c2").textAlign = "center";



                    },
                    error: function (result) {
                        options.error(result);
                    }
                });
            }

            $("#save").click(function () {
                if (!$(this).hasClass("k-state-disabled")) {
                    dataSource.sync();
                }
            });

            $("#cancel").click(function () {
                if (!$(this).hasClass("k-state-disabled")) {
                    dataSource.cancelChanges();
                }
            });
            $("#btncloseSpreadheet").click(function () {
               $('#ExportExcelModel').toggle();

            });






        });

</script>

请建议我如何冻结第一个 header。我没有得到任何解决方案。请帮助我。

Answer 1

在工作表属性中，您可以使用 frozenRows:

sheets: [{
                frozenRows: 1,
                name: "Products",
                   . . .

https://docs.telerik.com/kendo-ui/api/javascript/ooxml/workbook/configuration/sheets.frozenrows#sheets.frozenRows

Answer 2

我从 kendo 传播 sheet 文档中获得了解决方案。

sheet.frozenRows(1);冻结 kendo 传播中的第一行 sheet。

如何冻结 kendo 传播 sheet 中的第一行

How to freeze the first row in kendo spread sheet

ajax

json

kendospreadsheet