Kendo UI网格错误消息到Fadeout

Question

我正在使用Kendo UI Grid内嵌编辑功能。对于不同的条件，如重复等，我显示错误消息。我该如何将错误消息发送到Fadeout？ 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（）方法。让我为你分解它。

1. 在页面加载添加以下师你的DOM <div id="GridError"></div>
2. 当发生错误时，function error(args) {}被调用。
3. 在这个函数中，你有一个for循环，它进一步调用function showMessage()和3个参数。
4. 在这个函数中，你可以在DOM元素上使用jQuery的方法replaceWith()，其ID为GridError。这里发生的是，您将参数发送到模板并返回html标记。
5. 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> 

所以，当你调用jQuery的方法：

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

它不起作用，因为GridError不存在。

修复

有很多方法来解决这个问题，并取决于具体的实现。我在这里提到最基本和最简单的解决方法。

替换：

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

有了：

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