Hi, 

Telerik Grid documentation has section "Exporting Multiple Grids to the Same PDF", but following the proposed solution each grid is exported to its own page.

If I try to set multipage option for the root group, all grids are exported to the first page, but all the data is exported at the same place, so I can see only the last grid.

Is there a way not to break pages while exporting grids? Or maybe a way to transform drawing group so I can move each grid lower?

Regards,

Sergey.

Hi Team,

I am using the kendo grid in angular. but I am facing one problem in cell clickable. Let's suppose we have column in which image / icon/ or button is clickable. But now we have to do the whole cell click instead of the icon/image/button clickable. we have to perform same action which have the button or icon or image. In simple words any outside click in cell rather than the spacific image , button or anything else should be same behave as we click on the button or image or icon.

can suggest what is the best approach to implement this behaviour.

Thanks,

Ankur Gupta

Hi,

I'm trying to apply a cell template to the expandable column but the expand icon NOT remains aligned with the cell content (see attachment).

I need to create a complex decoration templates and i need to nest a div or something i can decorate with border color and background color and perform some ngIf.

I could reproduce the problem here:

https://stackblitz.com/edit/angular-ysa33j

How can i do?

Thanks again,

B

Does anyone have an example case for pulling isDetailExpanded into a component property?

In my current scenario I'd like to be able to modulate the open and close event with the row select and I'd like to feed that information into the method to then choose collapse or expand based on the boolean value - unless there's a more compact way to achieve the same result.

-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