This is a migrated thread and some comments may be shown as answers.

Grid Editor Validation on AutoComplete

3 Answers 162 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Danny asked on 28 Jan 2013, 10:26 PM
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

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 29 Jan 2013, 05:11 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Danny
Top achievements
Rank 1
answered on 29 Jan 2013, 06:27 PM
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
                })
            });
        }
0
Alexander Valchev
Telerik team
answered on 31 Jan 2013, 09:33 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Danny
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Danny
Top achievements
Rank 1
Share this question
or