Problem getting validation error to appear for a custom date control

[Scott]

In a Kendo Grid, I have a column that contains a date.  I'm using this method for inserting my own control into the cell to edit the date:

function dateTimeEditor(container, options)
{
    console.log("options", options);
    $('<input data-text-field="' + options.field + '" '
      + 'data-value-field="' + options.field + '" '
      + 'data-bind="value:' + options.field + '" '
      + 'data-format="' + options.format + '" '
      + '/>')
        .appendTo(container)
        .kendoDateTimePicker(
        {
            format: "MM/dd/yyyy",
            parseFormats: [ "yyyy/MM/dd", "MM/dd/yyyy", ],
        });
}

In the column definition I have this:

{
    field: "probeDate",
    title: "Probe Date",
    width: 60,
    format: "{0:MM/dd/yyyy}",
    editor: dateTimeEditor,
    attributes: { class: "editable-cell" },
}

So far this works great.  Now I wanted to add custom validation to this control, so in the model I have a field defined like this:

type: "date",
editable: true,
validation:
{
    validateProbeDate: function (input)
    {
        if (console != undefined) { console.log(input); }

        // Validate the probeDate as well as all of the dynamic fields.
        if (input.val().trim() === "" || parseDate(input.val()) == null )
        {
            input.attr("data-validateProbeDate-msg",
                       "Probe Date must be a valid date value (mm/dd/yyyy or yyyy/mm/dd).");
            return false;
        }
        // TODO: Make sure the date falls within the bounds of the probe.
        // return new Date(input.val()) < probeStartDate...

        return true;
    }
}

This works as far as the validation as it doesn't allow me to leave the field unless my validation method returns true, but the error message won't show on the field and I've tried several methods to try to get it to show up.  I assume the problem is in dateTimeEditor() where I'm defining the date edit control.

You can see this in action in this fiddle: Probe Data Entry

Thanks in advance!

[Stefan]

Hello Scott,

The issue of the incorrect position of the tooltip can accrue if the input is later enhanced to a DateTimePicker or other Kendo UI widget. Please check the information on how to  the tooltip position:

http://docs.telerik.com/kendo-ui/controls/editors/validator/overview#customization-of-tooltip-position

Let me know if you need additional assistance.

Regards,
Stefan
Telerik

 

 

[Scott]

Stefan,

Thanks for the reply, but I had tried that before and found that it does not make the tooltip appear.  I updated the fiddle with code as you suggest and you can see that it makes no difference at all.  The code I added is at lines 48 and 49.  Or did I misunderstand what that page was advising me to do?

Scott

[Stefan]

Hello Scott,

I can see two issues with the provided example.

- The Kendo UI DateTimePicker is initialized from a jQuery object which contains two elements - input and span. This is creating two DateTimePicker widgets. I can suggest appending the two elements separately.

- The input element does not have a name attribute. The name attribute is required for the custom validation span to be used correctly, as mentioned in the provided documentation.

I modified the provided fiddle example:

http://jsfiddle.net/90gttsmj/4/

I hope this helps.

Regards,
Stefan
Telerik

[Scott]

Stefan,

That does exactly what I want.  Thank you for the help!

Scott

[Scott]

I cleaned the fiddle up a little and I'll leave it up for anyone else to look at in case they run into the same issue:

http://jsfiddle.net/90gttsmj/

Scott