This is a migrated thread and some comments may be shown as answers.
The useful validationMessage parameter is totally undocumented for Model.define()
2 Answers 35 Views
This is a migrated thread and some comments may be shown as answers.
Paolo
Top achievements
Rank 1
Paolo asked on 16 Mar 2018, 03:44 PM

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 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 20 Mar 2018, 10:45 AM
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.
0
Paolo
Top achievements
Rank 1
answered on 20 Mar 2018, 10:51 AM

Thanks !

I hope we can help making better kendo UI !

 

 

Asked by
Paolo
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Paolo
Top achievements
Rank 1
Share this question
or