Kendo Grid 從單元格內的按鈕編輯單元格

Question

我的問題如下：

我已經添加到網格行編輯按鈕作為模板。 現在我想要做的是當我單擊該單元格內的“編輯按鈕”時允許編輯單元格文本。

有誰知道我怎么能激活這個？ 如何啟用按鈕所在單元格的編輯？

添加模板：

template:
     "#if(" + columnWeekField + "!=null && IsEditable){#\<strong >#: " + columnWeekField + "# </strong> <span>(#:" + columnWeekFieldSum + "#) </span>  <button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button > \
                                             #}\

這是我試過的

$(grid.tbody).on("click", "[name='EditCell']", function (e) {

                                    var cellElement = this;
                                    var cell = $(cellElement);
                                    var grid = $("#grid").getKendoGrid();

      grid.editCell(cell);

                                    console.log("button clicked");
                                });

如果有人有任何想法那就太好了。 如果帖子已經存在，我很抱歉，但我找不到任何答案。 如果有請指出他們。

Answer 1

差不多了 要使用editCell()您需要將td元素傳遞給它。 您正在通過button 。

只是改變這個...

var cell = $(cellElement);

為此...

var cell = $(cellElement).closest("td");

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script> <script> $(function() { let grid = $("#grid").kendoGrid({ dataSource: { data: [{ A: 1, B: 2, C: 2}] }, columns: [{ field: "A", template: "#= data.A #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >" },{ field: "B", template: "#= data.B #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >" },{ field: "C", template: "#= data.C #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >" }], editable: true }).data("kendoGrid"); $(grid.tbody).on("click", "[name='EditCell']", function (e) { var cellElement = this; var cell = $(cellElement).closest("td"); var grid = $("#grid").getKendoGrid(); grid.editCell(cell); }); }); </script> </head> <body> <div id="grid"></div> </body> </html>

演示版

Answer 2

對於 jquery 的劍道網格，這樣的東西對我有用 $("#grid").kendoGrid({

                    editable: "incell",
                    scrollable: true,
                    resizable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        previousNext: true,
                        responsive: false

                    },

                    noRecords: {
                        template: "<div class='container'>" + "<div class='row mb-3 '>" + "<div class='col-5 mx-auto'>" + "<div class='d-flex flex-column'>" +
                            "<img  class='w-50 mt-3 align-self-center' src='/Content/EbizAssets/No-Invocies-Found.svg'>" +
                            "<span><strong>No invoices found.</strong></span>" +
                            "</div>" + "</div>" + "</div>" + "</div>"
                    },
                    columns: [
                        {
                            selectable: true
                        },
                        {
                            field: "CustomerName",
                            title: "Customer Name",
                            editable: true
                        },
                                                
                        {
                            field: "AmountDue",
                            title: "Amount Due",
                            template:
                                "<span>$#= parseFloat(data.AmountDue).toFixed(2) #<span>" +
                                "<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-so' />",
                            width: 200,
                            format: "{0:c2}",
                            /*editable: true*/
                            
                        },
                        {
                            field: "EmailAddress",
                            title: "Email Address",
                            width: 260,
                            editable: false,
                            template: "#= EmailAddress #<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-ea' />"
                        },
                        
                    ],
                    selectable: "multiple, row",
                }).data("kendoGrid");
                
            }
        });
    });
} },

Kendo Grid 從單元格內的按鈕編輯單元格

問題描述

2 個解決方案

解決方案1
0 已采納 2018-11-06 13:04:46

解決方案2
0 2022-04-14 23:39:37

Kendo Grid 從單元格內的按鈕編輯單元格

問題描述

2 個解決方案

解決方案1 0 已采納 2018-11-06 13:04:46

解決方案2 0 2022-04-14 23:39:37

解決方案1
0 已采納 2018-11-06 13:04:46

解決方案2
0 2022-04-14 23:39:37