Grid pop up editor with custom validator not working

3 posts, 1 answers
  1. Alan
    Alan avatar
    2 posts
    Member since:
    Sep 2014

    Posted 25 May 2015 Link to this post

    Hi there,

    I've got a razor page called: ManageNotification.cshtml, inside there's one kendo grid with pop up editor:

    @(Html.Kendo().Grid<Ozone.Domain.Notification>()
                .Name("gridNotification").Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("AddEditNotification")

     

    In the Script section of this same page, i've got this code to initiate kendoValidator:

    $(document).ready(function () {       
            $("form#NotificationForm").kendoValidator({
                rules: {
                    datecompare: function (input) {
                        if (input.is("[data-datecompare-msg]") && input.val() != "") {
                            var startDatetime = $("#dtStart").data("kendoDateTimePicker").value();
                            var endDatetime = $("#dtEnd").data("kendoDateTimePicker").value();
                            
                            var startDatetime = kendo.parseDate(startDatetime);

                            var result = endDatetime >= startDatetime;

                            return !result;
                        }
                    }
                }
            });      
        });

     

    The AddEditNotification.cshtml is located in EditorTemplates folder, and it's like this:

     <form method="post" action="" role="form" name="NotificationForm" id="NotificationForm">
            <div class="form1">
                <label>Name:</label>
                @Html.TextBoxFor(o => o.Name, new { @class = "control1", @title = "Name is not used" })
            </div>
            <br />
    .....

    </form>

     My problem is: this line in Script is never hit:
    if (input.is("[data-datecompare-msg]") && input.val() != "") {

     

    When I did kendoValidator in a normal form (that is, not in a pop up editor template), everything works fine and the above line will be triggered every time any control in the form is changed. But doesn't seem to work this way here, not even when I click the Update button.

    Everything else about the pop up editor is fine.

     

    Anyone has any luck making this work? I've been goolging around for more than 2 hrs now without luck. 
    I'm on a commercial license and hoping this can be resolved quickly.
    Any working example will be much appreciated.

  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 26 May 2015 Link to this post

    Hi Alan,

    Please check the example below of how to correctly add custom validation rules for the MVC wrapper of the Grid (the demo is self-explanatory):

    //the code should be placed before Grid initialization code
    (function ($, kendo) {
        //Extending the build in validator
        $.extend(true, kendo.ui.validator, {
            rules: {
                // custom rules
                custom: function (input, params) {
                    //check if current input is the needed one as the
                    //custom rules are executed against all editors in the edit form
                    if (input.is("#LastSupply")) {
                        var datePicker = $(input).data("kendoDatePicker");
                        var max = datePicker.max();
                        var min = datePicker.min();
                        var currentInputDate = new Date(input.val());
     
                        if (min > currentInputDate || max < currentInputDate) {
                            //return false to signify validation error
                            return false;
                        }
                    }
                    //return true to signify validation success
                    return true;
                }
            },
            messages: {
                //custom rules messages
                custom: function (input) {
                    // return the message text
                    return "Date out of range!";
                }
            }
        });
    })(jQuery, kendo);

    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Alan
    Alan avatar
    2 posts
    Member since:
    Sep 2014

    Posted 27 May 2015 in reply to Vladimir Iliev Link to this post

    Thanks Vladimir, it's all working now.

    When I think back again it makes sense: 
    The normal initializing code works when there's no validator.
    In the case of a pop up editor there's already an existing kendoValidator, hence we need to extend it.

Back to Top