kendo 网格客户端模板输入隐藏字段一旦点击就可以编辑

Question

我正在尝试制作这样的 kendo 网格列模板，基于条件显示文本输入和其他方式

为此编写了以下代码

        columns.Bound(p => p.MyColumn).Template(@<text></text>).ClientTemplate(
            "# if (myFirstCondion == true) { #" +
                "<input type='text' style='width:100%' class='k-textbox' value=#=MyColumn#></input>" +
            "# } else { #" +
                 "<input type='hidden'></input>" +
            "# } #"
        );

但问题是当我点击隐藏列时，它变成了输入文本字段，单击隐藏字段后如何使此不可编辑

Answer 1

让我猜猜：您的网格 可编辑 对吗？如果是这样，您的网格将在编辑时控制单元格的内容。您需要对其进行自定义，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <script src="../content/shared/js/products.js"></script>

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

    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            fields: {
                                ProductName: { type: "string" },
                                UnitPrice: { type: "number" },
                                UnitsInStock: { type: "number" },
                                Discontinued: { type: "boolean" },
                                Test: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20
                },
                height: 550,
                scrollable: true,
                sortable: true,
                filterable: true,
                editable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                    { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                    { field: "Discontinued", width: "130px" },
                    { field: "Test", editor: ($td, data) => {
                                                if (data.model.Discontinued) {
                          let myColumn = 1;
                          $td.append(`<input type='text' style='width:100%' class='k-textbox' value='${myColumn}'></input>`);
                        } else {
                          $td.append("<input type='hidden'></input>");
                        }
                        }
                    }
                ]
            });
        });
    </script>
</div>


    

</body>
</html>

Dojo

因此在 editor 回调中，您可以根据需要的任何条件创建（或不创建）自己的输入。你也有模型。

Answer 2

您可以使用 column.Editable 处理程序。

例如

        columns.Bound(p => p.MyColumn).Editable("conditionalEditable").Template(@<text></text>).ClientTemplate(
            "# if (myFirstCondion == true) { #" +
                "<input type='text' style='width:100%' class='k-textbox' value=#=MyColumn#></input>" +
            "# } else { #" +
                 "<input type='hidden'></input>" +
            "# } #"
        );

...

<script>
    function conditionalEditable(dataItem){
         return dataItem.myFirstCondion; // add the same per item condition as in the client template
    } 
</script>

kendo 网格客户端模板输入隐藏字段一旦点击就可以编辑

kendo grid client template input hidden field become editable once click

c#

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc