C# Telerik剑道网格编辑与剑道树视图编辑器模板内联

我有一个内联编辑的剑道格网。其中一个字段应该通过从列表中选择元素来编辑，但是列表必须具有层次结构（最好能够过滤该列表）。我在考虑使用剑道树视图作为该领域的编辑，但我还没有找到任何方法来实现这一点。我尝试创建一个自定义编辑器模板（使用

columns.Bound（s=>s.FieldId）.EditorTemplateName（“\u TreeEditorTemplate”）

）来呈现树状视图，但树状视图不是一个输入，不可选择。我还想做一个编辑器，使用剑道下拉列表，里面有树，但这是。有什么想法吗？

你看过剑道网站上的样本了吗：

$（文档）.ready（函数（）{
var crudServiceBaseUrl=“//demos.telerik.com/kendo ui/service”，
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
url:crudServiceBaseUrl+“/Products”，
数据类型：“jsonp”
},
更新：{
url:crudServiceBaseUrl+“/Products/Update”，
数据类型：“jsonp”
},
销毁：{
url:crudServiceBaseUrl+“/Products/Destroy”，
数据类型：“jsonp”
},
创建：{
url:crudServiceBaseUrl+“/Products/Create”，
数据类型：“jsonp”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{models:kendo.stringify（options.models）}；
}
}
},
批次：对，
页面大小：20，
模式：{
型号：{
id:“产品id”，
字段：{
ProductID:{可编辑：false，可空：true}，
产品名称：{验证：{必需：true}}，
单价：{type:“number”，验证：{required:true，min:1}，
中止：{type:“boolean”}，
UnitsInStock:{type:“number”，验证：{min:0，必需：true}
},
}
}
});
$（“#网格”）.kendoGrid({
数据源：数据源，
编辑：功能（e）{
//检查是否打开测试列中的单元格进行编辑
var dummyInput=e.container.find（“输入[name='test']”）；
如果（dummyInput.length>0）{
var treeView=$（e.container）.find（“.treeviewditor”）.data（“kendoTreeView”）；
var originalItem=treeView.findByText（dummyInput.val（））；
if（originalItem！=null）{
//根据字段值选择项目
treeView.select（originalItem）；
}
}
},
可导航：是的，
pageable:对，
身高：550，
工具栏：[“创建”、“保存”、“取消”]，
栏目：[
“产品名称”，
{
字段：“测试”，标题：“测试”，宽度：120，
编辑器：函数（容器、选项）{
变量输入=$（“”）；
input.attr（“name”，options.field）；
var-tvDiv=$（“”）；
$（tvDiv）.kendoTreeView({
动画：错，
数据源：[
{
正文：“foo1”
},
{
文本：“foo2”，
项目：[
{text:“bar”}，
{文本：“bar1”}，
{文本：“bar2”}
]
}
]
});
var treeView=$（tvDiv）.data（“kendoTreeView”）；
$（tvDiv）.find（“.k-in”）.mousedown（函数（e）{
var clickedNode=$（e.toElement）.closest（“[role=treeitem]”）；
var dataItem=treeView.dataItem（单击节点）；
var dummyInput=clickedNode.closest（“[role=gridcell]”）。查找（“input[name='test']”）；
dummyInput.val（dataItem.text）；
dummyInput.trigger（“更改”）；
});
tvDiv.附件（集装箱）；
输入。附加到（容器）；
}
},
{字段：“单价”，标题：“单价”，格式：{0:c}，宽度：120
 <div id="example">
        <div id="grid"></div>

        <script>
            $(document).ready(function () {
                var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: crudServiceBaseUrl + "/Products",
                                dataType: "jsonp"
                            },
                            update: {
                                url: crudServiceBaseUrl + "/Products/Update",
                                dataType: "jsonp"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/Products/Destroy",
                                dataType: "jsonp"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/Products/Create",
                                dataType: "jsonp"
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { models: kendo.stringify(options.models) };
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: true },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                },
                            }
                        }
                    });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    edit: function (e) {
                        //checking if a cell from the Test column is opened for editing
                        var dummyInput = e.container.find("input[name='test']");
                        if (dummyInput.length > 0) {
                            var treeView = $(e.container).find(".treeViewEditor").data("kendoTreeView");
                            var originalItem = treeView.findByText(dummyInput.val());
                            if (originalItem != null) {
                                // Select the item based on the field value
                                treeView.select(originalItem);
                            }
                        }
                    },
                    navigatable: true,
                    pageable: true,
                    height: 550,
                    toolbar: ["create", "save", "cancel"],
                    columns: [
                        "ProductName",
                        {
                            field: "test", title: "Test", width: 120,
                            editor: function (container, options) {
                                var input = $("<input class='tveInput'/>");
                                input.attr("name", options.field);
                                var tvDiv = $("<div class='treeViewEditor'></div>");
                                $(tvDiv).kendoTreeView({
                                    animation: false,
                                    dataSource: [
                                      {
                                        text: "foo1"
                                      },
                                      {
                                        text: "foo2",
                                        items: [
                                            { text: "bar" },
                                            { text: "bar1" },
                                            { text: "bar2" }
                                        ]
                                      }
                                    ]
                                });
                                var treeView = $(tvDiv).data("kendoTreeView");
                                $(tvDiv).find(".k-in").mousedown(function (e) {
                                    var clickedNode = $(e.toElement).closest("[role=treeitem]");
                                    var dataItem = treeView.dataItem(clickedNode);
                                    var dummyInput = clickedNode.closest("[role=gridcell]").find("input[name='test']");
                                    dummyInput.val(dataItem.text);
                                    dummyInput.trigger("change");
                                });

                                tvDiv.appendTo(container);
                                input.appendTo(container);
                            }
                        },
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                        { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                        { field: "Discontinued", width: 120 },
                        { command: "destroy", title: "&nbsp;", width: 150 }],
                    editable: true
                });
            });
        </script>
    </div>

    <style>
        .tveInput {
            display: none;
        }
  </style>