ComboxBox in Grid with Validation

[Jack]

Hello,

The objective is to make a CSS style editor. Code is available at https://jsfiddle.net/9b1umpmj/2/.

The issue I am facing is focused on the cssDropDownEditor function on line 190. The version of the code without validation works as desired (simply remove the name attribute when creating the combobox line 191):

// This function is taken from http://demos.kendoui.com/web/grid/editing-custom.html
// See also http://www.telerik.com/forums/kendo-ui-grid-s-combobox-editor-template-validation
function cssDropDownEditor(container, options) {
    $('<input data-bind="value: ' + options.field + '" required data-required-msg="' + that.options.messages.validation.name + '">')
        .appendTo(container)
        .kendoComboBox({
            autoBind: false,
            change: function(e) {
                // The change event handler assigns a default value depending on the style name
                if (e /*instanceof $.Event*/ && e.sender instanceof kendo.ui.ComboBox) {
                    var dataItem = e.sender.dataItem(),
                        // grid = container.closest('.k-grid').data('kendoGrid'),
                        grid = that.element.data('kendoGrid'),
                        uid = container.parent().attr(kendo.attr('uid'));
                    if (grid instanceof kendo.ui.Grid && $.type(uid) === 'string' && $.type(dataItem) !== 'undefined') {
                        var style = grid.dataSource.getByUid(uid);
                        style.set('value', dataItem.get('value'));
                    }
                }
            },
            //dataSource: viewModel.css,
            dataTextField: 'name',
            dataValueField: 'name'
        })
        .data('kendoComboBox');
    $('<span class="k-invalid-msg" data-for="style_name"></span>').appendTo(container);
}

The version with validation does not work as desired. Actually the viewModel is not updated. To test it modify line 191 ​to add a name attribute as follows: 

$('<input name="style_name" data-bind="value: ' + options.field + '" required data-required-msg="' + that.options.messages.validation.name + '">')

The reason is the following:

1. The combobox creates an input named style_name_input;
2. The grid uses this name to bind this input as follows data-bind="value: style_name_input", which obviously does not exist in the viewModel,
3. therefore data-binding with the viewModel does not work when specifying a name as required for validation.

Any workwaround/fix?

 

 

 

 

[Jack]

Found a solution: simply set the input name after initializing the widget.