在网格列中添加新项目的下拉菜单

Question

我已经根据这个演示在网格列中实现了下拉菜单：https://demos.telerik.com/kendo-ui/grid/editing-custom

我已经用这个自定义下拉列表进行了测试：https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem

我想知道如果在下拉列表中找不到该类别，是否可以在网格的列中添加此自定义下拉列表以添加新类别。

该列未显示在 Comment 列中。

我尝试了以下代码但没有成功，请问如何解决这个问题？

编辑 1：我尝试了 abinesh 解决方案，我认为它非常接近于解决这个问题 (http://dojo.telerik.com/OZIXOlUM)。不过，addNew 函数需要 widgetID。在添加新按钮的 onclick 中，widgetID 没有传递任何内容（请参见打印屏幕）。我是怎么得到这个ID的？脚本“noDataTemplate”正试图以这种方式获取 id '#:instance.element[0].id#'，但正如我所说，什么都没有 returns.

<script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
        </div>
        <br/>
        <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
    </script>
    
 <script>
        $(document).ready(function(){
            var dataSource = new kendo.data.DataSource({
                data: categories
            });

            var gridDataSource = new kendo.data.DataSource({
                data : [ {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "Some Comment",
                    "Confirmed": 1,
                    "Stat": 1
                }]
            });

            $("#grid").kendoGrid({
                dataSource: gridDataSource,
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                        field: "Stat",
                        title: "Status"
                    }, {
                        field: "Confirmed",
                        title: "Confirmed",
                        template: " <input name='Confirmed' class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/>"
                    }, {
                        field: "Commen",
                        title: "Comment",
                        editor: commentCategoryEditor,
                        template:  "#=Commen#",                      
                        //template: "<input id='Commen'>",
                        width: 450,
                        nullable : true
                    }]
            }); 

        });

        var categories = [{
            "CategoryName": "-"
        },{
            "CategoryName": "Category 1"
        }, {
            "CategoryName": "Category 2"
        }];

        function commentCategoryEditor(container, options){
        $('<input name="Commen">')
                .kendoDropDownList({
                    filter: "startswith",
                    dataTextField: "CategoryName",
                    dataValueField: "CategoryID",
                    dataSource: dataSource,
                    noDataTemplate: $("#noDataTemplate").html()
            });
        }

        function addNew(widgetId, value) {
            var widget = $("#" + widgetId).getKendoDropDownList();
            var dataSource = widget.dataSource;

            if (confirm("Are you sure?")) {
                dataSource.add({
                    CategoryID: 0,
                    CategoryName: value
                });
                dataSource.one("sync", function() {
                    widget.select(dataSource.view().length - 1);
                });
                dataSource.sync();
            }
        };     

    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vat Grid</title>
    <link rel="stylesheet" href="styles/kendo.common.min.css">
    <link rel="stylesheet" href="styles/kendo.default.min.css">
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    
        <div id="grid"></div>
</div>


    

</body>
</html>

提前致谢

Answer 1

我创建了一个示例演示项目，可以帮助您添加类别下拉列表： Dojo Telerik Link

添加新类别的下拉列表示例输出：

希望对您有所帮助！

在网格列中添加新项目的下拉菜单

dropdown with add new item in a grid column

javascript

html

jquery

kendo-grid

kendo-dropdown