selectedKeys is not working after update kendo packages

[Robert]

I've prepared kendo grid with multiselection and everything was fine until I updated kendo packages:

Old versions:

"@progress/kendo-angular-buttons": "^5.5.2",
"@progress/kendo-angular-common": "^1.0.0",
"@progress/kendo-angular-dateinputs": "^4.3.2",
"@progress/kendo-angular-dialog": "^4.2.3",
"@progress/kendo-angular-dropdowns": "^5.5.0",
"@progress/kendo-angular-editor": "^1.2.4",
"@progress/kendo-angular-excel-export": "^3.1.5",
"@progress/kendo-angular-grid": "^4.8.4",
"@progress/kendo-angular-inputs": "^6.4.0",
"@progress/kendo-angular-intl": "^2.0.4",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-label": "^2.3.3",
"@progress/kendo-angular-layout": "^4.2.0",
"@progress/kendo-angular-listview": "^0.2.0",
"@progress/kendo-angular-menu": "^2.0.4",
"@progress/kendo-angular-notification": "^2.1.3",
"@progress/kendo-angular-pager": "^1.0.0",
"@progress/kendo-angular-pdf-export": "^2.0.4",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-angular-progressbar": "^1.0.0",
"@progress/kendo-angular-toolbar": "^3.2.1",
"@progress/kendo-angular-tooltip": "^3.0.0",
"@progress/kendo-angular-treelist": "^2.0.0",
"@progress/kendo-angular-treeview": "^5.4.2",
"@progress/kendo-angular-upload": "^6.1.0",
"@progress/kendo-data-query": "^1.5.4",
"@progress/kendo-drawing": "^1.5.12",
"@progress/kendo-theme-default": "^4.23.0",
"@progress/kendo-licensing": "^1.2.1",

After update operation:

"@progress/kendo-angular-buttons": "^8.0.0",
"@progress/kendo-angular-common": "^3.1.0",
"@progress/kendo-angular-dateinputs": "^7.0.1",
"@progress/kendo-angular-dialog": "^7.1.2",
"@progress/kendo-angular-dropdowns": "^7.0.2",
"@progress/kendo-angular-editor": "^4.1.3",
"@progress/kendo-angular-excel-export": "^5.0.1",
"@progress/kendo-angular-grid": "^7.2.3",
"@progress/kendo-angular-inputs": "^9.0.3",
"@progress/kendo-angular-intl": "^4.1.0",
"@progress/kendo-angular-l10n": "^4.0.0",
"@progress/kendo-angular-label": "^4.0.0",
"@progress/kendo-angular-layout": "^7.1.0",
"@progress/kendo-angular-listview": "^4.0.0",
"@progress/kendo-angular-menu": "^4.0.0",
"@progress/kendo-angular-notification": "^4.0.0",
"@progress/kendo-angular-pager": "^4.0.1",
"@progress/kendo-angular-pdf-export": "^4.0.0",
"@progress/kendo-angular-popup": "^5.0.0",
"@progress/kendo-angular-progressbar": "^3.0.0",
"@progress/kendo-angular-toolbar": "^6.0.2",
"@progress/kendo-angular-tooltip": "^4.0.1",
"@progress/kendo-angular-treelist": "^5.0.3",
"@progress/kendo-angular-treeview": "^7.1.0",
"@progress/kendo-angular-upload": "^9.0.2",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.16.3",
"@progress/kendo-theme-default": "^5.5.0",
"@progress/kendo-licensing": "^1.2.2",

My Kendo Grid properties:

  <kendo-grid  
  [selectable]="selectableSettings"
  (selectedKeysChange)="keyChange($event)"
  kendoGridSelectBy="id"
  [selectedKeys]="mySelection"
  >

Before update everything was fine I mean, I had correct objects (ids) into mySelection array number property.

Defined property into component:

    mySelection: number[] = [];

Selectable settings:

        this.selectableSettings = {
          checkboxOnly: true,
          mode: "multiple"
        };

KeyChange method:

    keyChange(e){
        this.closeEditor();
        if(e.length > 0) {
            this.isSelectionDisabled = false;
        } else {
            this.isSelectionDisabled = true;
        }
        this.extractDataItems = [];
        this.extract();
    }

Extract method:

    extract() {
        this.mySelection.forEach(idx => {
            this._subs.add(
                this.timeBookings$.pipe(
                    map(items => items.find(item => item.id === idx)
                )).subscribe(r => {
                    if(this.mySelection.length > 0 && r) {
                        this.extractDataItems.push(r);
                    }
                })
            );
        });
    }

Important!

When I'm selecting some rows - mySelection is always empty.

I know that in keyChange(e) method I can do something like:

this.mySelection = e;

and everything will work as should but why it was working correctly before update and after not?

Parameter of:

keyChange(e) - parameter e has correct value all the time

[Naveen]

I face the exact issue .Is this resolved already?

[Zornitsa]

Hi,

What I can notice is that the selectedKeys property is not two-way bound to the corresponding collection, which in turn will not update the array and provide the needed selection information. On that note, it should be two-way bound in the following way:

<kendo-grid [(selectedKeys)]="mySelection">
...
</kendo-grid>

For reference, please check out the following StackBlitz example that demonstrates the results of a similar scenario, and the selectedKeys collection is updated as expected:

• https://stackblitz.com/edit/angular-363rit 

I hope this helps. 

Regards,
Zornitsa
Progress Telerik