插入操作前检查 Kendo 树列表答案

【问题标题】：Kendo treelist checks before insert operation插入操作前检查 Kendo 树列表
【发布时间】：2019-05-03 14:28:58
【问题描述】：

我正在尝试使用模板编辑弹出窗口的 Kendo MVC 树列表。

在插入记录之前，我会在服务器端进行一些业务规则检查。我使用“ModelState.ToDataSourceResult()”从控制器返回这些错误。
如果记录不符合要求，我想阻止插入操作。

但我无法找到处理这种情况的事件或属性。

Grid 有 onReqestEnd 事件来捕获控制器的结果，但 TreeList 没有。-

【问题讨论】：

标签： asp.net-mvc kendo-ui kendo-grid kendo-treelist

【解决方案1】：

我找到了解决这个要求的方法，

这里是示例控制器代码：

    public ActionResult _Create([DataSourceRequest] DataSourceRequest request, Product product)
    {
        //Manually add an model error in order to simulate validation error
        ModelState.AddModelError("Name", "My server error");

        //TODO: implement create functionality

        return Json(ModelState.ToDataSourceResult());
    }

Telerik TreeListDataSource 不公开 onRequestEnd 事件，但它可以在 document.ready 处绑定：

 $(document).ready(function () {

        ds = $('#myTreeList').data('kendoTreeList').dataSource;
        ds.bind("requestEnd", onTreeListRequestEnd);

    });

我检查ajax请求结束的操作类型并调用错误处理函数：

function onTreeListRequestEnd(e) {

    if (e.type == "create" || e.type == "destroy") {
        onTreeListError(e.response);
    }

}

定义的错误信息模板：

<script type="text/kendo-template" id="message">
<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
    <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div>
</div>
</script>

显示的错误信息：

<script type="text/javascript">
var validationMessageTmpl = kendo.template($("#message").html());

function onTreeListError(args) {
    if (args.Errors) {
        var treeList = $("#myTreeList").data("kendoTreeList");
        treeList.one("dataBinding", function (e) {
            e.preventDefault();   // cancel treeList rebind if error occurs

            for (var error in args.Errors) {
                showMessage(treeList.editor.editable.element, error, args.Errors[error].errors);
            }
        });
    }
}

function showMessage(container, name, errors) {
    //add the validation message to the form
    //if multiple messages exists at ModelState concat them
    errMessage = "";
    for (var i = 0; i < errors.length; i++){
        errMessage = errMessage.concat("\r");
        errMessage = errMessage.concat(errors[i]);
    }
    container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")
                    .replaceWith(validationMessageTmpl({ field: name, message: errMessage }))
}
</script>

我从 Telerik MVC Grid 问题中得到了帮助： http://www.telerik.com/forums/kendo-grid-edit-mode-popup---error-handling

还有这个示例项目： Handling server-side validation errors during pop-up editing

希望这对某人有所帮助..

【讨论】：

【解决方案2】：

感谢 T10 分享您的解决方案，
使用您的解决方案，我可以在创建 Kendo TreeList 时在 Kendo TreeList MVC 中使用它。

@(Html.Kendo().TreeList<YourModel>()
    .Name("TreeList")
    .DataSource(d=> d.Events(e => e.RequestEnd("onTreeListRequestEnd"))
)

希望这可以帮助某人。

【讨论】：