Kendo UI Grid's combobox editor template validation

[G.A.]

Hi,

I have a grid column with combobox editor template and I want to validate that column, i.e. if there's no item in combobox I want to get validation error. The column in grid's datasource has such structure.

ColumnID: { type: "number", validation: { required: true, min: 1 } },

and when the list of combobox editor template's values is empty the value of columnId is 0 and there's no validation errors.

Please help me to validate my grid column in above mentioned case in edit mode.

Regards,
G.A. 

[Alexander Valchev]

Hello,

Kendo Validator works with validation attributes. When a custom editor is used, the developer is responsible for attaching the respective HTML validation attributes to the editor input. As an example:

//make the combo box editor required
function barEditor(container, options) {
    $('<input name="name" data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '" required="required />')
    .appendTo(container)
    .kendoComboBox({
        autoBind: false,
        dataSource: {
            data: [
            {name: "Name1", id: 1},
            {name: "Name2", id: 2}
            ]
        }
    });
    $('$<span class="k-invalid-msg" data-for="name"></span>').appendTo(container);
}

In addition it is necessary to add a name attribute and a validation tooltip element.

For convenience I prepared a small example (add new record, delete the combox' value and hit update): http://jsbin.com/elakul/2/edit

Kind regards,
Alexander Valchev
the Telerik team

[G.A.]

Thank you very much. Your answer was very helpful for me and validation has worked properly.
But there's remain an issue related to editor values. I'm using dropdownlist instead of combobox and the editor template doesn't work during updating grid and adding new row if there is only 1 item in dropdown's datasource. If there are more than 1 item in dropdown's datasource everything works as necessary. And if there's no item validation works properly.

My datasource for dropdown is following

var datasource= new kendo.data.DataSource({
            transport: {
                read: {
                    url: "@Url.Action("GetValues", "Home")",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { editable: false },
                        Name: { editable: false }
                    }
                }
            }
        });

Grid is defined as in your example only "bar" uses display template as following.

{field: "bar", title: "Bar", editor: barEditor, template: "${Name}"} 

Please help to find out the reason of this issue as well.
Regards,
G.A.

[Alexander Valchev]

Hello,

I am not sure that I understand the exact scenario correctly. Could you please edit my previous example and send me back a link so I can examine your current configuration?

As a general information, if the editor value is bound to the Grid field which means that in the Grid row you can display only the value of the Combo/DropDown widget. If you want to display the name, you may consider using foreign key editor.

I hope this information will help.

Regards,
Alexander Valchev
the Telerik team