Custom editor binding sometimes not fire dataSource change

5 posts, 0 answers
  1. Claudio
    Claudio avatar
    21 posts
    Member since:
    Feb 2015

    Posted 19 Mar 2015 Link to this post

    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








  2. Claudio
    Claudio avatar
    21 posts
    Member since:
    Feb 2015

    Posted 19 Mar 2015 Link to this post

    also, i cannot find online documentation about the 'field' property of dataSource change event, where i can lookup?
    thanks
  3. Alexander Popov
    Admin
    Alexander Popov avatar
    1442 posts

    Posted 23 Mar 2015 Link to this post

    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.

     
  4. Claudio
    Claudio avatar
    21 posts
    Member since:
    Feb 2015

    Posted 28 Apr 2015 Link to this post

    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

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1442 posts

    Posted 30 Apr 2015 Link to this post

    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.

     
Back to Top