Grid Editor Validation on AutoComplete

[Danny]

Telerik Team,

Is there a way to validate an autocomplete in the popup editor grid?  In the grid definition of my field, I have added an editor parameter to render out the kendo autocomplete which will retrieve remote data.

columns: [
                  { field: "EmployeeName", title: "Employee Name", editor: employeeAutoCompleteEditor }
]

The autocomplete and everything works.  But the validation defined in the datasource of the autocomplete doesn't work.

schema: {
                        model: {
                            fields: {
                                Employee: {
                                    type: "string",
                                    validation: { required: true}
                                }
                            }
                        }

If I took out the editor: employeeAutoCompleteEditor from the grid column definition, the validation works on that datasource.  Is it possible to have the autocomplete with validation by defining it in the schema?

Thanks,
Danny

[Alexander Valchev]

Hello Danny,

Validation is triggered on the basis of HTML validation attributes attached to the editor input. In case you use a custom editor, the framework cannot automatically attach a required attribute although the field is marked as required in the schema.
To get this working you should attach the attribute manually. For example:

function customEditor(container, options) {
    $('<input required="required" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({ .... });
}

In this way the validator will show warning message if the widget's value is empty.

Kind regards,
Alexander Valchev
the Telerik team

[Danny]

That didn't work, here's my code for the Custom Editor Auto Complete.  After making your suggested changes, popup editor did not submit, and I did not see the warning messages.  Also, I found that it only works when the placeholder on the control is not set.  If I set it, it will think there is a value and allow to submit.
function deptCodeAutoCompleteEditor(container, options) {
            $('<input required="required" data-text-field="CostCenterCode" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoAutoComplete({
                autoBind: false,
                minLength: 3,
                delay: 500,
               // placeholder: "Enter Dept Code...",
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "LookupData/GetCostCenterCodesList",
                            type: "POST",
                            dataType: "json",
                            contentType: 'application/json; charset=utf-8'
                        },
                        parameterMap: function (data, operation) {
                            return kendo.stringify(data);
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                CostCenterCode: { type: "string", validation: { required: true} }
                            }
                        },
                        data: "data",
                        total: "TotalCount"
                    },
                    serverFiltering: true,
                    serverPaging: true,
                    pageSize: 500
                })
            });
        }

[Alexander Valchev]

Hi Danny,

Thank you for sharing your code. I tested a similar case locally - it seems that the warning message is hidden. By default Kendo Validation appends the warning message element right after the respective input. In case you need to validate widgets it is recommended to customize the position of the warning tooltip.

Please try the following:

function deptCodeAutoCompleteEditor(container, options) {
            $('<input required="required" name="code" data-text-field="CostCenterCode" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoAutoComplete({
                //....
            });

            $('<span class="k-invalid-msg" data-for="code"></span>').appendTo(container);
        }

Note: the name of the input should match data-for attribute of the warning message.

Also, I found that it only works when the placeholder on the control is not set.  If I set it, it will think there is a value and allow to submit.

I assume that this behaviour occurs only in IE. The problem comes from the fact that IE does not support input placeholder attribute. To provide a coherent user experience we set the text of the placeholder as a value of the input (the value gets deleted on focus). As a result the required validation will not trigger - the input actually has a value.
I am afraid that this behaviour cannot be prevented. The good news are that new Internet Explorer 10 supports placeholders as well as all other major browsers.

Regards,
Alexander Valchev
the Telerik team