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;
}
}
why nobody not answered this question??