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

ComboxBox in Grid with Validation

1 Answer 35 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Jack asked on 13 Aug 2015, 02:19 PM


The objective is to make a CSS style editor. Code is available at

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):

function cssDropDownEditor(container, options) {
    $('<input data-bind="value: ' + options.field + '" required data-required-msg="' + + '">')
            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 ='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'
    $('<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="' + + '">')

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?





1 Answer, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 13 Aug 2015, 02:52 PM
Found a solution: simply set the input name after initializing the widget.
Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Share this question