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

ComboxBox in Grid with Validation

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

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

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?

 

 

 

 

1 Answer, 1 is accepted

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