淡出的Kendo UI网格错误消息

Question

我正在使用Kendo UI Grid内联编辑功能。对于不同的情况，比如重复等，我会显示错误信息。如何将错误消息设置为淡出？jQuery fadeOut()方法不起作用。

<pre><code>
<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>
</script>
<script type="text/javascript">
    var validationMessageTmpl = kendo.template($("#message").html());
    function error(args) {
        if (args.errors) {
            var grid = $("#DocumentGrid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind if error occurs                             
                for (var error in args.errors) {
                    showMessage(grid.editable.element, error, args.errors[error].errors);
                    $("#GridError").fadeOut(1000);
                }
            });
        }
    }
    function showMessage(container, name, errors) {
        //add the validation message to the form
        $("#GridError").replaceWith($(validationMessageTmpl({ field: name, message: errors[0] })));        
    }
</script>
<div id="GridError"></div>
<div style="width:600px; float:left; margin-top:0px; margin-top:35px;">
<%: Html.Kendo().Grid<DocumentModel>().HtmlAttributes(new { @class = "grid" })
    .Name("DocumentGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.DocumentId).Hidden(true);
        columns.Bound(p => p.DocumentName).Title("Document Name");
        columns.Command(command =>
        {
            command.Edit();
        })
        .Width(50)
        .HtmlAttributes(new { @Style = "white-space: nowrap; overflow: hidden;" });
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .ToolBar(toolbar => toolbar.Create().Text("Add Document"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Sort(sort =>
        {
            sort.Add(m => m.DocumentName);
        })
        .Events(events => events.Error("error"))
        .Model(model => model.Id(c => c.DocumentId))
        .Create(update => update.Action("DocumentGrid_Create", "Admin"))
        .Read(read => read.Action("DocumentGrid_Read", "Admin"))
        .Update(update => update.Action("DocumentGrid_Update", "Admin"))
        )
%>
</div>

</code></pre>    

Answer 1

从您的代码看，问题似乎出在replaceWith()方法上。让我来给你解释一下。

在页面加载时，你在你的DOM代码中添加了下面的部分，一个错误发生，function error(args) {}被调用。

• 在这个函数中，你有一个function showMessage()循环，它进一步调用带有3个参数的function showMessage()。

• 在这个函数中，你在id为<>d12>的DOM元素上使用jQuery的方法replaceWith()。这里发生的事情是，您将参数发送到模板并接收html标记作为返回。

1. replaceWith()现在将用从模板返回的新标记替换DOM中的<div id="GridError"></div> (与id="GridError“的划分不再存在)。

您的标记：

<div id="GridError"></div>

<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>

$("#GridError").fadeOut(1000);

它不能工作，因为GridError不在那里。

有很多方法可以解决这个问题，这取决于您的实现。我在这里提到了最基本和最简单的修复方法。

替换：

$("#GridError").replaceWith($(validationMessageTmpl({ field: name, message: errors[0] })));

通过以下方式：

$("#GridError").html($(validationMessageTmpl({ field: name, message: errors[0] })));