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

Custom editor binding sometimes not fire dataSource change

4 Answers 123 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Claudio
Top achievements
Rank 2
Bronze
Iron
Iron
Claudio asked on 19 Mar 2015, 04:19 PM
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








4 Answers, 1 is accepted

Sort by
0
Claudio
Top achievements
Rank 2
Bronze
Iron
Iron
answered on 19 Mar 2015, 04:27 PM
also, i cannot find online documentation about the 'field' property of dataSource change event, where i can lookup?
thanks
0
Alexander Popov
Telerik team
answered on 23 Mar 2015, 04:47 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Claudio
Top achievements
Rank 2
Bronze
Iron
Iron
answered on 28 Apr 2015, 04:18 PM

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

0
Alexander Popov
Telerik team
answered on 30 Apr 2015, 02:46 PM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Grid
Asked by
Claudio
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Claudio
Top achievements
Rank 2
Bronze
Iron
Iron
Alexander Popov
Telerik team
Share this question
or