-I am using kendo grid, I want column wise search, sort, save state with virtual remote scrolling.

I tried sample with my API. kendo grid data binding works. in following code pageChange event is not getting trigger. I tried various changes in https://stackblitz.com/run/?file=app%2Fapp.component.ts here even on owheight changes, event get trigger/fired. Please suggest changes that require to virtual scroll work as expected. 

user_Kendo.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { tap, switchMap } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';
import { OrdersService } from './user_kendo.service';

@Component({
    selector: 'my-app',
    providers: [OrdersService],
    /*
     * Set a fixed row height of 36px (20px line height, 2 * 8px padding)
     *
     * [row height] = [line height] + [padding] + [border]
     *
     * Note: If using the Kendo UI Material theme, add 1px to the row height
     * to account for the bottom border width.
     */
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .k-grid tbody td {
            white-space: nowrap;
            line-height: 20px;
            padding: 8px 12px;
        }
    `],
    template: `
      <kendo-grid
          [data]="query | async"
          [loading]="loading"
          [skip]="state.skip"
          [pageSize]="state.take"
          scrollable="virtual"
          [rowHeight]="36"
          [height]="450"    
          (pageChange)="pageChange($event)">

        <kendo-grid-column field="userName" [width]="80" title="User Name"></kendo-grid-column>
        <kendo-grid-column field="name" title="Name" [width]="200"></kendo-grid-column>
        <kendo-grid-column field="emailAddress" title="EmailAddress" [width]="200"></kendo-grid-column>
      </kendo-grid>
    `
})
export class UserKendoComponent {
    public loading: boolean;
    public state: any = {
        skip: 0,
        take: 100
    };
    public query: any;
    private stateChange = new BehaviorSubject<any>(this.state);

    constructor(private service: OrdersService) {

        this.query = this.stateChange.pipe(
            tap(state => {
                this.state = state;
                this.loading = true;
            }),
            switchMap(state => service.fetch(state)),
            tap(() => {
                this.loading = false;
            })
        );
    }

    public pageChange(state: any): void {
        this.stateChange.next(state);
    }
}

user_kendo.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { toODataString } from '@progress/kendo-data-query';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { GridDataResult } from '@progress/kendo-angular-grid';

export abstract class NorthwindService {
   
    private BASE_URL = 'https://localhost:44301/api/services/app/User/GetUsersForKendo';

    constructor(
        private http: HttpClient,
        protected tableName: string
    ) {
    }
   
   
    public fetch(state: any): Observable<GridDataResult> {

        return this.http
            .get(`${this.BASE_URL}?` + 'skip=' + state.skip + '&top=' + state.take)
            .pipe(
                map((response:any) => (<GridDataResult>{
                    data: response.result.items,
                    total: parseInt(response.result.totalCount, 10)
                }))
            );
    }

}

@Injectable()
export class OrdersService extends NorthwindService {
    constructor(http: HttpClient) { super(http, 'Orders'); }
    
}

Hello,

I have a hard time understanding the compatibility between Kendo Angular component versions and Angular major version. Our newest projects are targeting Angular 10 and my package.json looks like the following (included relevant information only):

"@angular/core": "~10.0.6",

"@angular/forms": "~10.0.6",

 ...

"@progress/kendo-angular-buttons": "^5.5.0",
"@progress/kendo-angular-common": "^1.2.3",
"@progress/kendo-angular-dateinputs": "^4.3.1",
"@progress/kendo-angular-dialog": "^4.2.3",
"@progress/kendo-angular-dropdowns": "^4.3.0",
"@progress/kendo-angular-excel-export": "^3.1.4",
"@progress/kendo-angular-grid": "^4.7.3",
"@progress/kendo-angular-inputs": "^6.6.1",
"@progress/kendo-angular-intl": "^2.0.2",
"@progress/kendo-angular-l10n": "^2.0.2",
"@progress/kendo-angular-label": "^2.3.2",
"@progress/kendo-angular-notification": "^2.1.2",
"@progress/kendo-angular-pdf-export": "^2.0.4",
"@progress/kendo-angular-popup": "^3.0.6",
"@progress/kendo-angular-ripple": "^2.0.2",
"@progress/kendo-angular-tooltip": "^2.1.5",
"@progress/kendo-angular-treelist": "^1.0.5",
"@progress/kendo-angular-treeview": "^4.3.1",
"@progress/kendo-angular-menu": "^2.0.5",
"@progress/kendo-charts": "^1.14.2",
"@progress/kendo-data-query": "^1.5.4",
"@progress/kendo-drawing": "^1.9.0",
"@progress/kendo-theme-default": "^4.23.0",
"@progress/kendo-theme-material": "^3.21.0",

The application seems to run fine (even npm install returns no incompatibility), but there are major differences between the major versions of these components. If I understand correctly, Angular 10 should work fine with version 4 of various components, but I am not really sure even after looking at this article. 

Is there any resource that clearly explains Angular major version to Kendo Angular major version compatibility?

Thank you,

Alex D.

Hi 

Is there any examples to achieve this drag and drop row from one grid to another grid?

Thanks

Han

I am using kendo FormFields and I have a combobox using the ValueNormalizer in the html.  It also has a validator in the ts for maxlength.  I notice that the ValueNomalizer function still fires even when the maxlength is exceeded.  I can see a brief red line around the textbox area before it fires off and returns from my service.  In 

Here are a few code snippets:

........

......

.......

Here is a StackBlitz: https://stackblitz.com/edit/valuenormalizerandvalidation?file=app/app.component.ts

What do I need to do in order for the valueNormalizer to not be called if the if the form is not valid?  I'd like the error to be displayed.  I've tried breaking out the valueNormalizer function from using lambda notation, but then I don't have access to 'this.service' scope.

Best wishes,
Keith Nicholson

Sir/Madam,
                  I am sumant.ch working as a UI Developer Actually I am unable to add color picker in kendo angular grid So can you please provide the solution as soon as possible

Good day!  Here is another question on the ComboBox allowing custom additions.

When the valueNormalizer function returns, is  there a simple way to have the new accepted value be automatically added to the the data list without requesting essentially a refresh?

Hi,

I would like to use the FormField component but for now it is not possible due a missing feature.

I would like to display multiple error messages for a FormField, something like:

```

<kendo-formfield>

    <kendo-label [for]="firstName" text="First Name"></kendo-label>

    <input formControlName="firstName" kendoTextBox #firstName required/>

    <kendo-formhint>Your first name</kendo-formhint>

    <kendo-formerror error="required">Error: First name is required</kendo-formerror> <=== Only shown if this specific error occures

    <kendo-formerror error="min">Error: First name is to short</kendo-formerror> <=== Only shown if this specific error occures

</kendo-formfield>

```

Is there a possibility to show multiple error messages or

are there any plans to extend the FormField component to support this?

Maybe using a template for error messages would be also a good idea,

to pass some data to the message which then can be used in the message itself, something like:

```

<kendo-formfield>
    <kendo-label [for]="firstName" text="First Name"></kendo-label>
    <input formControlName="firstName" kendoTextBox #firstName required/>
    <kendo-formhint>Your first name</kendo-formhint>

    <ng-template kendoFormError error="required">Error: First name is required</ng-template>
    <ng-template kendoFormError error="min" let-errorData>

        Error: First name is to short, it should have a length of at least {{errorData.min}} characters

    </ng-template>
</kendo-formfield>

```

Hi, 

I'm trying to create some sort or state persistence without having to *ngFor the columns in markup and remap all columns attributes, because that way it's hard to use column templates etc...

To reach that I'm using the grid.reorderColumn() method to restore column order instead. 

The issue with that is, when setting hidden columns visible `grid.columns[i].hidden = true` and immidiately reorder that column, the grid internal method updateColumnIndices() throws an error, because it doesn't get the newly visible column from expandColumnsWithSpan() and expandedColumns.indexOf(source) is -1. 

TypeError: Cannot set property 'orderIndex' of undefined
    at GridComponent.push../node_modules/@progress/kendo-angular-grid/dist/fesm5/index.js.GridComponent.updateColumnIndices (https://localhost:4201/vendor.js:196833:43)

As a quick an dirty hack I'm now restoring visibilty first and then using setTimeout to restore sortOrder. Which works "for now" but doesn't seem to be reliable. 

Also, setting `grid.columns[i].hidden` doesn't fire columnVisibilityChange.

Am I missing something here? Any idea on how to solve that?

Why are there no methods like getOptions/setOptions as with the jQuery grid?