Grid Data paging problem after filter for Kendo Angular

Question

I have a 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 the grid cannot do paging. The first grid collects 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;
}
}