如何在MVC Kendo TreeList编辑器的CODE列实现Kendo自动完成下拉框

嘿，这个需求我熟！要在Kendo TreeList的CODE列里集成自动完成下拉框，核心就是给该列指定自定义编辑器模板，把Kendo AutoComplete控件嵌进去就行。下面一步步给你讲清楚操作方法：

1. 配置TreeList的CODE列 #

首先在TreeList的列定义里，开启CODE列的编辑权限，并指定自定义编辑器模板的名称。这里以**行内编辑(InLine)**为例，弹窗编辑(Popup)的配置逻辑是完全一致的。

@(Html.Kendo().TreeList<YourModel>()
    .Name("treelist")
    .Columns(columns => {
        columns.Add().Field(e => e.ID).Hidden();
        // 重点配置CODE列
        columns.Add().Field(e => e.CODE)
            .Title("CODE")
            .Editable(true) // 开启该列的编辑权限
            .EditorTemplateName("CodeAutoComplete"); // 关联自定义编辑器模板
        // 其他列配置...
    })
    .Editable(editable => editable.Mode(TreeListEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("ReadTreeData", "YourController"))
        .Create(create => create.Action("CreateNode", "YourController"))
        .Update(update => update.Action("UpdateNode", "YourController"))
        .Destroy(destroy => destroy.Action("DeleteNode", "YourController"))
        .Model(model => {
            model.Id(f => f.ID);
            model.ParentId(f => f.ParentID);
            model.Field(f => f.CODE);
            // 其他模型字段配置...
        })
    )
)

2. 创建自动完成编辑器模板 #

在Views/Shared/EditorTemplates文件夹下新建一个名为CodeAutoComplete.cshtml的模板文件，这里就是渲染Kendo AutoComplete控件的地方。

@model string

@(Html.Kendo().AutoCompleteFor(m => m)
    .Name("CODE") // 必须和列的Field名称一致，保证值能正确绑定到模型
    .DataTextField("DisplayCode") // 下拉框中显示的文本内容字段
    .DataValueField("ValueCode") // 实际绑定到模型的字段值
    .Filter("contains") // 设置过滤规则，比如输入包含关键词就匹配结果
    .MinLength(1) // 输入至少1个字符触发自动完成查询
    .DataSource(source => {
        source.Read(read => {
            read.Action("FetchCodeOptions", "YourController") // 后端获取选项列表的接口
                .Data("getFilterParams"); // 可选：传递前端输入的过滤参数到后端
        })
        .ServerFiltering(true); // 如果需要后端处理过滤逻辑，设为true；前端过滤则设为false
    })
)

<script>
// 可选：传递过滤参数到后端的辅助函数
function getFilterParams() {
    return {
        filterText: $("#CODE").val()
    };
}
</script>

3. 实现后端数据源接口 #

在你的控制器里，编写一个Action来提供AutoComplete需要的选项数据，支持过滤的话就处理传入的参数。

public ActionResult FetchCodeOptions(string filterText)
{
    // 从数据库/业务逻辑层获取CODE列表，根据过滤参数筛选结果
    var codeOptions = _yourCodeService.GetAllCodes()
        .Where(c => string.IsNullOrEmpty(filterText) || c.DisplayCode.Contains(filterText))
        .Select(c => new {
            DisplayCode = c.CodeName, // 对应AutoComplete的DataTextField
            ValueCode = c.CodeValue // 对应AutoComplete的DataValueField
        })
        .ToList();

    return Json(codeOptions, JsonRequestBehavior.AllowGet);
}

4. 关键注意事项 #

• 确保模型的CODE字段类型和AutoComplete的DataValueField类型完全匹配，比如都是字符串或整数，避免出现值绑定失败的问题。
• 如果使用弹窗编辑模式，编辑器模板无需修改，TreeList会自动在弹窗中加载这个模板。
• 测试编辑流程：点击编辑按钮后，检查AutoComplete是否正常加载选项，选择选项后的值是否能正确提交到后端完成保存。

内容的提问来源于stack exchange，提问作者Faisal Maqbool