I have some issue regarding the kendo UI Grid Pagination Customization part

[Sanjay]

what is actual behavior
Default kendo UI behavior is like we need to render all the grid data once to activate pagination functionality if pageSize <= actual records then and then the only pagination will active but if we got pageSize > actual records the pagination won't work.

what is expected behavior
I need to set pageSize = 50 and API return me 50 records with total records field so, for now, we can assume that API return total 50 records and it has fields to indicate total records which let's say 200 so pagination will set accordingly [ 200 (total) / 50 (pageSize) = 4 page ] and pagination will active also with the pageSize <= actual logic and we can call separate API call for next 50 records after we click on next button which is been created on total records.

 

constructor( private router:Router,private httpclient:HttpClient,private EncrDecr:EncrDecrServiceService) {

    this.GetUserList();

   }

    modeldata:any={

    UserName:'',

    UserEmail:'',

    IsActive:'',

    sortable:true,

    PageSize:this.pageSize,

    PageNumber:this.pageNumber,

    SortParam:this.sortColumn,

    sortType: this.sortType

   };

   GetUserList(){

     

    this.httpclient.post(this.baseUrl+'UserDetail/GetAllGridData',this.modeldata).subscribe(res=>{

      this.gridList = res;

      this.gridData=this.gridList['Result'];

      this.items= this.gridData;

    },(error)=>{

      const err= error.error;

    })

   }

  breadCumb(){

    this.router.navigate(['/Home']);

  }

  newUser(){

    this.router.navigate(['/ManageUser']);

  }

 

  pageChange(event: PageChangeEvent): void {

    this.skip = event.skip;

    this.loadItems();

  }

  loadItems(): void {

    this.gridData = {

      data: this.items.slice(this.skip, this.skip + this.pageSize),

      total: this.items.length,

    };

  }

  public sort: SortDescriptor[] = [

    {

      field: "UserName",

      dir: "asc",

    },

  ];

  public sortChange(sort: SortDescriptor[]): void {

    this.sort = sort;

    this.modeldata.sortType= sort[0].dir;

    this.modeldata.SortParam=sort[0].field;

    this.GetUserList();

    this.loadProducts();

  }

 

 

   loadProducts(): void {

    this.gridData = {

      data: orderBy(this.gridData, this.sort),

      total: this.gridData.length,

    };

  }

 

  ngOnInit(): void {

    this.gridData = this.loadItems();;

   

   

  }

[Georgi]

Hi Sanjay,

To load the grid data asynchronously, you could refer to the following demo. Make sure to look at the "Asynchronous source" option:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/#toc-getting-started

 

Another example which also includes a pager, can be found in this article from our Knowledge Base:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/implement-loading-indicator-manually/#toc-solution

 

I hope this helps. If you have any further questions, I would be happy to help.

Looking forward to hearing from you.

Regards,
Georgi
Progress Telerik

[Sanjay]

HI Georgi Thanks for reply, 

I have followed same as you give suggestion but data is not bind in grid .  I am getting data "data: response['Result']'

so please help me . I will be thankful for you.

Component :

 <kendo-grid [data]="(view | async)!" [pageSize]="state.pageSize" [skip]="state.skip" [sort]="state.sort" [sortable]="true" [pageable]="true" [filterable]="true" [scrollable]="'none'" (dataStateChange)="dataStateChange($event)">

            <kendo-grid-column field="UserName"></kendo-grid-column>

            <kendo-grid-column field="UserEmail"></kendo-grid-column>

            <kendo-grid-column field="Department" [sortable]="false">

            </kendo-grid-column>

        </kendo-grid>

 

Service :

 

import { HttpClient } from "@angular/common/http";

import { Injectable } from "@angular/core";

import { GridDataResult } from "@progress/kendo-angular-grid";

import { BehaviorSubject, Observable, pipe } from "rxjs";

import { environment} from'../../environments/environment'

//import 'rxjs/add/operator/map'

import { catchError, delay, map, tap } from "rxjs/operators";

import { toODataString } from "@progress/kendo-data-query";

@Injectable({

    providedIn:"root"

})

export abstract class GetUserList extends BehaviorSubject<GridDataResult> {

    public loading: boolean | undefined;

 

    private BaseURL= environment.baseApi;

 

    constructor(private http: HttpClient) {

      super({

        data: [],

        total: 0

      });

    }

 

    public query(state: any): void {

      this.fetch(state).subscribe((x) => super.next(x));

    }

   

 

    protected fetch(state: any): Observable<GridDataResult> {

      this.loading = true;

      return this.http.post(this.BaseURL+'UserDetail/GetAllGridData',state).pipe(

        //delay(1000),

        map(

          (response:any) =>

            <GridDataResult>{

              data: response['Result'],

              total:parseInt(response['Result'][0].TotalCount,10),

            }

        ),

        tap(() => (this.loading = false))

      );

    }

  }

 

  @Injectable()

  export class ProductsService extends GetUserList {

    constructor(http: HttpClient) {

      super(http);

    }

 

    public queryForCategory(

      { UserName }: { UserName: string },

      state?: any

    ): void {

      this.query(

        Object.assign({}, state, {

          filter: {

            filters: [

              {

                field: 'UserName',

                operator: 'eq',

                value: UserName,

              },

            ],

            logic: 'and',

          },

        })

      );

    }

 

    public queryForProductName(UserEmail: any, state?: any): void {

      this.query(

        Object.assign({}, state, {

          filter: {

            filters: [

              {

                field: 'UserEmail',

                operator: 'contains',

                value: UserEmail,

              },

            ],

            logic: 'and',

          },

        })

      );

    }

  }

 

  @Injectable()

  export class CategoriesService extends GetUserList {

    constructor(http: HttpClient) {

      super(http);

    }

 

    queryAll(st?: any): Observable<GridDataResult> {

      const state = Object.assign({}, st);

      delete state.skip;

      delete state.take;

 

      return this.fetch(state);

    }

  }

 

 

TS File

export class UserListComponent

{

  public view !: Observable<GridDataResult>;

    public state: State = {

        skip: 0,

        take: 5

    };

    constructor(private service: GetUserList ) {

        this.view = service;

        this.service.query(this.state);

    }

    public dataStateChange(state: DataStateChangeEvent): void {

        this.state = state;

        this.service.query(state);

    }

}

 

 

 

 

 

 

 

 

 

 

[Georgi]

Hi Sanjay,

Thank you for providing more code snippets.

I have several questions regarding the shared code:

1. It looks a little odd that the total amount of records is accessed by looking up the record at index 0 from the response data. I would expect the total to usually be found at the root level of the response, not in any individual record in the data. That makes me wonder if the data is arriving in the correct shape. (See the rectangle in the screenshot above)
2. Are you sure any data actually arrives? Have you logged it in the console to ensure it arrives as expected? (underlined line in the screenshot above)
3. What is the purpose of the exclamation mark behind the data binding in the template:  I did test the working example with one, and it seemed to still work, but I wonder what the purpose is, nonetheless.

 

If none of the suggestions above solves the problem, we're going to have to set up a project and perform hands-on debugging on some live code.

To enable us to do this, you could either fork this demo and modify it to the point where the issue can be reproduced. Or you could send us a zip folder with a stripped-down version of your project so that we can reproduce the issue locally.

Looking forward to hearing from you.

 

Regards,
Georgi

[Sanjay]

Hello Georgi, Thank you so much grid is bind but I have a issue  like filter can  I replace  [filterable='true' to [filterable='menu'. if  please help.

 

[Yanmario]

Hi Sanjay,

An answer to the question was provided in the private ticket with id: 1567037. To avoid confusion let's continue the conversation in the mentioned ticket.

Regards,
Yanmario
Progress Telerik