The useful validationMessage parameter is totally undocumented for Model.define()

3 posts, 0 answers
  1. Paolo
    Paolo avatar
    30 posts
    Member since:
    Mar 2017

    Posted 16 Mar 2018 Link to this post

    We found that following features are totally undocumented , where <text> is a custom string :

    1. options.fields.fieldName.validation.<attribute> = value; is generally passed-through like ad HTML attribute when kendo.ui.Editable is involved for editing corresponding model field <fieldName>
    2. And so on options.fields.fieldName.validation.validationMessage  = "My custom message"; is generally passed-through like ad HTML attribute onto the corresponding INPUT dom element and it is very usefull when you need a custom validation message avoiding to deal with direct DOM manipulation
    3. No document in your online KB mentions this behaviour associated to the Model.define() instead a KB page could be find related to the Validator https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#application-of-custom-message-attributes , I think could save time to developers know that it is possibile and should be documented

    Proofs in your code :

    The CreateAttributes assembles object which contains the name:value pair from model field validation :

    function createAttributes(options) {
        var field = (options.model.fields || options.model)[options.field], type = fieldType(field), validation = field ? field.validation : {}, ruleName, DATATYPE = kendo.attr('type'), BINDING = kendo.attr('bind'), rule, attr = {
            name: options.field,
            title: options.title
        };
        for (ruleName in validation) {
             // ruleName can contains a custom string that is not a validation rule
     
             // and rule will contain its value, for example validationMessage='MyMessage ....'
     
            rule = validation[ruleName];
            if (inArray(ruleName, specialRules) >= 0) {
                attr[DATATYPE] = ruleName;
            } else if (!isFunction(rule)) {
                attr[ruleName] = isPlainObject(rule) ? rule.value || ruleName : rule;
            }
            attr[kendo.attr(ruleName + '-msg')] = rule.message;
        }
        if (inArray(type, specialRules) >= 0) {
            attr[DATATYPE] = type;
        }
        attr[BINDING] = (type === 'boolean' ? 'checked:' : 'value:') + options.field;
        return attr;
    }

     

    The editor choosed by the kendo.ui.Editable sets DOM attributes via attr() and the previously assembled object

    var editors = {
        'number': function (container, options) {
            var attr = createAttributes(options);
            $('<input type="text"/>').attr(attr).appendTo(container).kendoNumericTextBox({ format: options.format });
            $('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);
        },
        'date': function (container, options) {
            var attr = createAttributes(options), format = options.format;
            if (format) {
                format = kendo._extractFormat(format);
            }
            attr[kendo.attr('format')] = format;
            $('<input type="text"/>').attr(attr).appendTo(container).kendoDatePicker({ format: options.format });
            $('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);
        },
        'string': function (container, options) {
            var attr = createAttributes(options);
            $('<input type="text" class="k-input k-textbox"/>').attr(attr).appendTo(container);
        },
        'boolean': function (container, options) {
            var attr = createAttributes(options);
            $('<input type="checkbox" />').attr(attr).appendTo(container);
        },
        'values': function (container, options) {
            var attr = createAttributes(options);
            var items = kendo.stringify(convertItems(options.values));
            $('<select ' + kendo.attr('text-field') + '="text"' + kendo.attr('value-field') + '="value"' + kendo.attr('source') + '=\'' + (items ? items.replace(/\'/g, ''') : items) + '\'' + kendo.attr('role') + '="dropdownlist"/>').attr(attr).appendTo(container);
            $('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);
        }
    };

     

    The validator  looks the ruleKey validationMessage directly on DOM element of a INPUT tag

    var Validator = Widget.extend({   
        // ...
        _extractMessage: function (input, ruleKey) {
            var that = this, customMessage = that.options.messages[ruleKey], fieldName = input.attr(NAME), nonDefaultMessage;
            if (!kendo.ui.Validator.prototype.options.messages[ruleKey]) {
                nonDefaultMessage = kendo.isFunction(customMessage) ? customMessage(input) : customMessage;
            }
            customMessage = kendo.isFunction(customMessage) ? customMessage(input) : customMessage;
            return kendo.format(input.attr(kendo.attr(ruleKey + '-msg')) || input.attr('validationMessage') || nonDefaultMessage || input.attr('title') || customMessage || '', fieldName, input.attr(ruleKey) || input.attr(kendo.attr(ruleKey)));
        }
        // ...
    })

     

    With this technique you can customize one validation message for a model field

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1229 posts

    Posted 20 Mar 2018 Link to this post

    Hi Paolo,

    Thank you for your input on the Kendo Model.define() API reference.

    You are right, that the described configuration is available, but not documented properly. Therefore, I have included the following task in our backlog.

    As a small token of gratitude for helping us improve our documentation, I have updated your Telerik points.

    In case you have any questions related to the Kendo widgets and their functionality, please do not hesitate to contact us.

    Regards,
    Veselin Tsvetanov
    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.
  3. Paolo
    Paolo avatar
    30 posts
    Member since:
    Mar 2017

    Posted 20 Mar 2018 Link to this post

    Thanks !

    I hope we can help making better kendo UI !

     

     

Back to Top