Grid Data paging problem after filter

0 Answers 56 Views
Grid
Adil
Top achievements
Rank 1
Iron
Veteran
Iron
Adil asked on 17 Jul 2022, 02:03 PM

Hi,

I have grid and from outside i have texbox when i write something in textbox i can filter my grid but when i remove text in texbox i try to bind all data and i can do it but grid cannot do paging. First grid collect all data in page one when i press page number data paging works normally as expected.

Here my grid and textbox and also mt ts file for onFilter function


<kendo-grid #gridDetailDocuments [kendoGridBinding]="lines" [resizable]="true" [reorderable]="true" [selectable]="true"
            [columnMenu]="true" filterable="menu"  sortable="true"
             [autoSize]="true" height="600" scrollable="true" [pageSize]="pageSize"
            [skip]="skip" [groupable]="true" 
            [pageable]="{
                          buttonCount: buttonCount,
                          info: info,
                          type: type,
                          pageSizes: pageSizes,
                          previousNext: previousNext,
                          position: position
                        }">
            <ng-template kendoGridToolbarTemplate>
              <label class="text-primary">{{ "STRINGS.SEARCH" | translate }} : </label>
              <div class="form-group">
                <div class="col-12">
                  <input placeholder="{{ 'STRINGS.STOCK_OR_BARCODE' | translate }}"
                  (input)="onFilter($event.target.value)" class="form-control form-control-sm"/> 
                </div>
              </div>
              <kendo-grid-spacer></kendo-grid-spacer>
            </ng-template>
            <kendo-grid-column field="lineNum" width="80" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.LINE" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockCode" media="sm" width="100">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.ITEM" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockBarcode" media="sm" width="200">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.BARCODE" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockDescription" media="sm" width="120">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.DESCRIPTION" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="lineQuantity" media="sm" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.QUANTITY" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.lineQuantity | number }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockUM" media="sm" width="100">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.UM" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockUnitPrice" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.UNIT_PRICE" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.stockUnitPrice | prxCurrency }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="lineAmount" media="sm" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.AMOUNT" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.lineAmount | prxCurrency }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="lineDiscount" media="sm" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.LINE_DISCOUNT" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.lineDiscount | number }}%
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="lineExpiryDate" media="sm" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.EXPIRY_DATE" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.lineExpiryDate | date:'yyyy-MM-dd' }}
              </ng-template>
            </kendo-grid-column>
          </kendo-grid>

public onFilter(inputValue: string): void {
    if(inputValue == ""){
      this.grid.data = process(this.lines.slice(this.skip, this.skip + this.pageSize), {group: this. groups}).data;
    }
    else{
      this.grid.data = process(this.lines.slice(this.skip, this.skip + this.pageSize), {
        filter: {
          logic: 'or',
          filters: [
            {
              field: 'stockCode',
              operator: 'contains',
              value: inputValue,
            },
            {
              field: 'stockBarcode',
              operator: 'contains',
              value: inputValue,
            },
            {
              field: 'stockDescription',
              operator: 'contains',
              value: inputValue,
            }
          ],
        }, group: this. groups
      }).data;
    }
  }


Adil
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 04 Sep 2022, 07:49 AM

why nobody not answered this question??

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Adil
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or