This is a migrated thread and some comments may be shown as answers.

Custom validation stops working on Date field

5 Answers 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 13 Mar 2018, 06:56 PM
I have a grid containing a Start Date, an End Date, and a notes column.  For testing purposes, I added custom validation to check that the notes begins with an upper case letter, and it works just fine in all cases.  I added validation to the start date to make sure that the start date doesn't start after the end date, and vice versa for the end date.

The validation for these fields will show properly if I immediately select an invalid value.  However, if I select a valid value, and then select an invalid value, the validation message does not show.  The editor will not let me move away from the field until it is valid, so that piece is working - it just does not show the message.

I am using Kendo for MVC, with InCell editing.
 
//register custom validation rules
(function ($, kendo) {
    $.extend(true, kendo.ui.validator, {
        rules: { // custom rules
            notesvalidation: function (input, params) {
                if (input.is("[name='Notes']") && input.val() != "") {
                    input.attr("data-notesvalidation-msg", "Notes error");
                    return /^[A-Z]/.test(input.val());
                }
 
                return true;
            },
            startdatevalidation: function (input, params) {
                if (input.is("[name='StartDate']") && input.val() != "") {
                    input.attr("data-startdatevalidation-msg", "Start Date needs to be before End Date");
                    var row = input.closest("tr");
                    var grid = $('#Grid1').data().kendoGrid;
                    var dataItem = grid.dataItem(row);
                    if (dataItem.EndDate == "")
                        return true;
                    var result = (new Date(Date.parse(input.val())) <= dataItem.EndDate)
                    return result;
                }
 
                return true;
            },
            enddatevalidation: function (input, params) {
                if (input.is("[name='EndDate']") && input.val() != "") {
                    input.attr("data-enddatevalidation-msg", "End Date needs to be after Start Date");
                    var row = input.closest("tr");
                    var grid = $('#Grid1').data().kendoGrid;
                    var dataItem = grid.dataItem(row);
                    if (dataItem.StartDate == "")
                        return true;
                    var result = (new Date(Date.parse(input.val())) >= dataItem.StartDate)
                    return result;
                }
 
                return true;
            }
        },
        messages: { //custom rules messages
            productnamevalidation: function (input) {
                // return the message text
                return input.attr("data-val-notesvalidation");
            },
            startdatevalidation: function (input) {
                // return the message text
                return input.attr("data-val-startdatevalidation");
            },
            enddatevalidation: function (input) {
                return input.attr("data-val-enddatevalidation");
            }
        }
    });
})(jQuery, kendo);

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 15 Mar 2018, 09:02 AM
Hello, Matt,

I was able to replicate the issue on my end with date validation.

The validation message is shown but it is actually hidden under the cell.

I forwarded it to the developers' team to check if this is an issue with the Grid or a missing configuration which has to be added.

I will get back to you as soon as I have more details on this.

Thank you in advance for the patience.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Stefan
Telerik team
answered on 20 Mar 2018, 08:10 AM
Hello, Matt,

I'm writing to let you know and the team is still investigating this. It was working up until R3 2017 and we assume that it may be caused by a change in the styles.

Once we have more details I will let you know.

Additionally, I updated your Telerik point for bringing this to our attention.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Matt
Top achievements
Rank 1
answered on 20 Mar 2018, 01:50 PM
Sounds good.  Thanks for the update.
0
Stefan
Telerik team
answered on 22 Mar 2018, 07:17 AM
Hello, Matt,

The issue has been confirmed and the developers' team is already working on it.

You can track its progress at:

https://github.com/telerik/kendo-ui-core/issues/4103

Thank you again for the .

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chayanika
Top achievements
Rank 1
answered on 05 Mar 2021, 06:47 PM
var row = input.closest("tr")[0].rowIndex;
var dataItem = $("#Grid1").data("kendoGrid").dataSource.data()[row];
var endDate = dataItem.EndDate;
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Matt
Top achievements
Rank 1
Chayanika
Top achievements
Rank 1
Share this question
or