Validation Messages not showing on custom editors in grid

[Neil]

When using a custom editor on  a grid field, validation messages are being hidden by the grid. 
I have set up an example here: http://plnkr.co/edit/YpH6GfYJnllVntC1fx7r?p=preview 

1. Click on a row in the Category column to activate the editor
2. Delete the text in the combo box.
3. Click elsewhere in the grid.

The Category Column field remains active but there is no validation message.  The UI now appears broken as you can no longer edit other fields.

Note that the validation message is being activated but it is not visible as it is hidden by the grid.  This can be shown by adding the css rule below.

.k-grid td{
  padding-bottom:2em;!important
}

Is there a way to have Custom Editors with validation in a grid?

Thanks,

Neil

[Rosen]

Hi Neil,

As you may know when using widgets such as Kendo UI Combobox, AutoComplete, etc. you will need to set custom position for the validator's message via a custom placeholder. Also note that the element to be validated should have a name attribute set. Here is how the editor function from your sample should look like:

function categoryDropDownEditor(container, options) {
    $('<input name="CategoryName" required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoComboBox({
            autoBind: false,
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                }
            }
        });
        $('<span class="k-invalid-msg" data-for="CategoryName"></span>').appendTo(container);
}

Regards,
Rosen
Telerik