Kendo UI Grid Error Message to Fadeout

Question

I am using Kendo UI Grid inline editing feature. For different conditions like duplicate etc. I'm displaying error message. How can I make the Error Message to Fadeout? The jQuery fadeOut() method is not working.

<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

From your code it seems that the issue is with the replaceWith() method. Let me break it down for you.

1. At page load you add the following division to your DOM <div id="GridError"></div>
2. When an error occurs, function error(args) {} is called.
3. In this function you have a for loop that further calls function showMessage() with 3 arguments.
4. In this function you use jQuery's method replaceWith() on DOM element with id GridError . What happens here is that you send the params to template and receive html markup in return.
5. The replaceWith() will now replace <div id="GridError"></div> in DOM with the new markup returned from template (division with id="GridError" is no longer there).

Your markup:

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

Is replaced by:

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

So when you call jQuery's method:

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

It does not work because GridError is not there.

Fixes

There are many ways to fix this, and depends on your implementation. I am mentioning here the most basic and simple fix.

Replace:

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

With:

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