Как фильтровать, разбивать на страницы и сортировать на стороне сервера в сетке виджета JQX угловой 7

Question

Я занимаюсь разработкой углового 7-го проекта с помощью dotnet core web api. Я использую некоторые функции виджета JQX. В сетке виджетов JQX мне нужна помощь для фильтрации, разбивки на страницы и сортировки данных со стороны сервера. Я попробовал следующий код.

---grid.component.html--
<jqxGrid #myGrid
    [source]="dataAdapter"
    [columns]="columns"
    [auto-create]="false"
>
</jqxGrid>



---grid.component.ts----
import {Component, OnInit, ViewChild} from '@angular/core';
import {jqxGridComponent} from "jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid";
@Component({
    selector: 'app-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit {

    @ViewChild('myGrid') myGrid: jqxGridComponent;

    data = new Array();
    firstNames =
        [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];
    lastNames =
        [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
    productNames =
        [
            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
        ];
    priceValues =
        [
            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
        ];
    // generate sample data.
    generatedata = (startindex, endindex) => {
        var data = {};
        for (var i = startindex; i < endindex; i++) {
            var row = {};
            var productindex = Math.floor(Math.random() * this.productNames.length);
            var price = parseFloat(this.priceValues[productindex]);
            var quantity = 1 + Math.round(Math.random() * 10);
            row["id"] = i;
            row["firstname"] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
            row["lastname"] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
            row["productname"] = this.productNames[productindex];
            row["price"] = price;
            row["quantity"] = quantity;
            row["total"] = price * quantity;
            data[i] = row;
        }
        return data;
    }
    source = {
        datatype: 'array',
        localdata: {},
        totalrecords: 1000
    }
    rendergridrows = (params) => {
        console.log('rendergridrows -> event: ');
        var data = this.generatedata(params.startindex, params.endindex);
        return data;
    }
    dataAdapter: any = undefined;
    columns: any[] = [
        { text: 'Id', datafield: 'id', width: 50 },
        { text: 'First Name', datafield: 'firstname', width: 120 },
        { text: 'Last Name', datafield: 'lastname', width: 120 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', width: 'auto', cellsalign: 'right' }
    ]

    ngOnInit() {
        console.log('initDataAdapter');
        this.dataAdapter = new jqx.dataAdapter(this.source);
        this.myGrid.createComponent({
            "altrows": true,
            "autoheight": true,
            "enabletooltips": true,
            "editable": true,
            "editmode": "selectedrow",

            "pageable": true,
            "sortable": true,

            "autoshowfiltericon": true,
            "filterable": true,

            "virtualmode": true,
            "showeverpresentrow": true,
            "everpresentrowposition": "top",

            "selectionmode": "multiplecellsadvanced",

            "columnsresize" : true,
            "width": "100%",
            rendergridrows : this.rendergridrows
        });
    }

}

Он работает только для нумерации страниц, но мне также нужна фильтрация и сортировка. Как я могу реализовать сетку виджетов JQX, которые фильтруют и сортируют данные с сервера. Хотя здесь я не использовал URL для серверной стороны, я хочу только вызвать функцию rendergridrows, которая может фильтровать данные.