Validation message not disappearing from kendo mvc grid

4 posts, 0 answers
  1. Ujjwalkanti
    Ujjwalkanti avatar
    4 posts
    Member since:
    Jan 2017

    Posted 04 Apr Link to this post

    Hi,

    I have implemented a custom validation on the kendo mvc grid. Ex: The column name is "DemandUnit" and valid value is "kVA"/"kW" or blank. The problem is if I change the value "kVA" to "kVAd" the validation message is showing but if I remove the "d" i.e. from "kVAd" to "kVA" the validation message not go away. I know kendo grid uses "MVVM" model but how I can force to apply validation always.

    Here with code,

    (function ($, kendo) {
            $.extend(true, kendo.ui.validator, {
                rules: { // custom rules               
                    demandunitvalidation: function (input, params) {
                        if (input.is("[name='DemandUnit']") && input.val() != "") {
                            input.attr("data-demandunitvalidation-msg", "Demand unit must be kVA/kW or blank.");
                            return /^(kVA|kW)$/.test(input.val())
                        }
                        return true;
                    },
                },
                messages: { //custom rules messages               
                    demandunitvalidation: function (input) {
                        // return the message text
                        return input.attr("data-val-demandunitvalidation");
                    }
                }
            });
        })(jQuery, kendo);

     

    Any help will be appreicated.

    Regards,

    Ujjwal

  2. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 05 Apr Link to this post

    Hello Ujjwal,

    By default, the Kendo UI Validator runs its validation logic on each blur of a given input. So, if you changed the input value with a valid one and then blurred the input, the Validator ran again. It is possible that something in your custom validation prevents it from returning true (valid result). Try debugging the validation function line by line to see if this is so.

    Additionally, it is possible that validation is not triggered on blur if you explicitly set validateOnBlur to false in your code. The default value of this property is true.

    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Ujjwalkanti
    Ujjwalkanti avatar
    4 posts
    Member since:
    Jan 2017

    Posted 06 Apr in reply to Tsvetina Link to this post

    Thanks for the reply. However, I am sorry to say it's not working.I am observing the following scenario:

    Initial Value    ChangeValue    IsValidationEventFired onBlur 

    kVA                   kVAd               yes

    kVAd                 kVA                  no

    kVAd                kW                   yes

    kW                   kWd                 yes

    kWd                 kW                    no

    It seems like if revert backs the last restore value after giving the invalid input the validation message does not go away. The same issue .  Even in the sample demo application you can reproduce the issue,

    http://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation

    just try edit in the first record ; "Chai" to "chai" and revert back the "chai" to "Chai"

    Any solution/workaround will be really helpful.

    Regards,

    Ujjwal

  4. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 10 Apr Link to this post

    Hello Ujjwal,

    You are correct about this. There is an explanation of this behavior in this forum thread:
    Validation messages in Grid popup not being removed when valid

    There is a sample with a working solution, which I also tried in the local custom editor demo and it works as expected:
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(120);
            columns.Bound(p => p.UnitsInStock).Width(120);
            columns.Bound(p => p.Discontinued).Width(120);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        })
        .Events(events => events.Edit("onEdit"))
    //......

    function onEdit(e) {
            var grid = this;
            e.container.on("focusout", "input", function () {
                grid.editable.validatable.validateInput(this);
     
            });
    }



    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top