Problem getting validation error to appear for a custom date control

6 posts, 1 answers
  1. Scott
    Scott avatar
    9 posts
    Member since:
    Jul 2012

    Posted 16 Jun Link to this post

    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!
  2. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 20 Jun Link to this post

    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 customize 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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Scott
    Scott avatar
    9 posts
    Member since:
    Jul 2012

    Posted 20 Jun Link to this post

    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

  5. Answer
    Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 22 Jun Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  6. Scott
    Scott avatar
    9 posts
    Member since:
    Jul 2012

    Posted 23 Jun in reply to Stefan Link to this post

    Stefan,

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

    Scott

  7. Scott
    Scott avatar
    9 posts
    Member since:
    Jul 2012

    Posted 23 Jun Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready