Custom editor binding sometimes not fire dataSource change

[Claudio]

Hi, i'm using a kendo grid with a column and custom editor who show a combobox with some values.
my kendo ui version is v2014.2.1008

Grid initialization:

private initKeyPropertiesGrid(): void
    {
        var isDictionaryLoaded = this.translateService.isPartAvailable(this.dictionaryNamespace);
        var colPropertyTitle = ' ';
        var colValueTitle = ' ';
        if (isDictionaryLoaded)
        {
            colPropertyTitle = this.translateService.translate(this.dictionaryNamespace, 'KeyPropertyColumn');
            colValueTitle = this.translateService.translate(this.dictionaryNamespace, 'KeyPropertyValueColumn');
        }

        var thisObject = this;
        var columns = [];
        columns[columns.length] = { field: 'Name', hidden: true };
        columns[columns.length] = { field: 'Description', title: colPropertyTitle };
        columns[columns.length] = { field: 'Value', title: colValueTitle, template: $('#grdKeyPropertyValueTemplate').html(), editor: function (container, options) { thisObject.getKeyPropertyValueColumnEditor(container, options); } };

        var dataSource = new kendo.data.DataSource({
            data: null,
            schema: {
                model: {
                    id: 'Name',
                    fields: {
                        Name: { type: 'string', editable: false },
                        Description: { type: 'string', editable: false },
                        Value: { type: 'string', editable: true }
                    }
                }
            },
            change: function (e: kendo.data.DataSourceChangeEvent)
            {
                var propertyRow = thisObject.$scope.grdKeyProperties.select();
                var propertyItem: any = thisObject.$scope.grdKeyProperties.dataItem(propertyRow);
                if (propertyItem === null)
                    return;

                var propertyName = propertyItem.Name;
                if (e.action === undefined || e.action !== 'itemchange' && propertyName !== 'RegistryFields')
                    return;

                var newValue = null;
                if (propertyName !== 'RegistryFields')
                {
                    var item: any = e.items[0];
                    //newValue = item[e.field];
                    newValue = item["txtValueEditor_input"];
                }
                else
                    newValue = propertyItem.Value;

                //Aggiornamento chiave con la proprietà impostata
                thisObject.updateKeyProperty(propertyName, newValue);
            },
            error: function (e)
            {
                debugger;
            }
        });

        this.grdKeyPropertiesOptions = {
            columns: columns,
            editable: true,
            navigatable: true,
            resizable: false,
            selectable: true,
            autoBind: false,
            dataSource: dataSource,
            dataBound: function (e)
            {
                var grid: kendo.ui.Grid = e.sender;
                var dataItem: kendo.data.Model;
                var row: JQuery;
                
                //Se si sta modificando una proprietà non si effettua nessuna selezione
                if (thisObject.isUpdatingKeyProperties)
                    return;

                //Si seleziona la prima riga
                var items = grid.dataSource.data();
                if (items.length > 0)
                {
                    dataItem = items[0];
                    row = Utils.getKendoGridRowFromDataItem(grid, dataItem);
                    grid.select(row);
                }
            }
        };

        //Aggiornamento griglia
        this.grdKeyPropertiesRefreshId = Utils.generateGUID();
    }

the editor is declared as follow:

private getKeyNamePropertyValueColumnEditor(container: any, field: string): void
    {
        var thisObject = this;
        //dataSource della comboBox
        var pageSize = 20;
        var dataSource = new kendo.data.DataSource({
            page: 1,
            pageSize: pageSize,
            serverPaging: true,
            serverFiltering: true,
            type: "aspnetmvc-ajax",
            dataType: "json",
            transport: {
                read: {
                    url: "/Home/GetModelKeysFromName",
                    type: "POST",
                    dataType: "json",
                    data: function ()
                    {
                        var grdKeys = thisObject.$scope.grdKeys;
                        var items = grdKeys.dataSource.data();
                        var item = grdKeys.dataItem(grdKeys.select());

                        var namesToExclude = [];
                        for (var i = 0; i < items.length; i++)
                        {
                            if (items[i] === item)
                                continue;

                            namesToExclude[namesToExclude.length] = items[i].Name;
                        }

                        return { namesToExclude: namesToExclude }
                    }
                }
            },
            schema: {
                data: function (data)
                {
                    return data.Data;
                },
                total: function (data)
                {
                    return data.Total;
                },
            },
        });

        //Messaggio di paginazione sull'header per numero di elementi della dimensione della pagina
        var headerTemplate = '';
        //Creazione comboBox
        var name = 'txt' + field + 'Editor';
        var obj = $('<input id="' + name + '" name="' + name + '" data-bind="value:' + field + '" />');
        obj.appendTo(container).kendoComboBox({
            dataTextField: "Name",
            dataValueField: "Name",
            dataSource: dataSource,
            filter: "contains",
            headerTemplate: headerTemplate
        });
    }

- if i select a value from combobox list the binding work well and the grid dataSource.change event is fired as shown in attachment 1.png
- if i write a value in the combobox who is not included in the combobox items list, sometimes the grid dataSource.change event is not fired (why?) and the binding fail, sometimes the grid dataSource.change event is fired with the field property set to 'txtValueEditor_input' (txtValueEditor is the id and name of the comboBox) as shown in attachment 2.png, instead of the datamodel item property Value (as aspected and done in attachment 1.png).

how to solve the problem? why the grid dataSource.change event sometimes is not fired?

Thanks

[Claudio]

also, i cannot find online documentation about the 'field' property of dataSource change event, where i can lookup?
thanks

[Alexander Popov]

Hello Claudio,

I managed to replicate the issue partially and it seem that this is related to the latest changes in the ComboBox. I could not make the DataSource's change event to show the ComboBox's input as the change field though, so if you can provide a runnable sample or a Dojo where this happens it would be easier for us to investigate. I have logged this in our issue tracker, so you can check on the progress here.

The e.field argument should refer to the model's field whose change has triggered the event.

As a token of gratitude for your involvement your Telerik points have been updated.

Regards,
Alexander Popov
Telerik

 

 

[Claudio]

Hi, i have found on github that the bug has been solved.

There is an official version i can use?

version 2015.1 408 include the fix?

Thanks

[Alexander Popov]

Hello Claudio,

Yes, the fix should be part of the 2015 Q1 SP1 (2015.1 408) release, however I would recommend upgrading to 2015 Q1 SP2 instead.

Regards,
Alexander Popov
Telerik