Aurelia-Kendo grid - multiple unnecessary request for datasource - kendo-ui

Question

I have the following html-page: (part of page)
<ak-multiselect k-data-text-field="text"
k-data-value-field="value" k-value.two-way="selectPaymentType" k-data-source.bind="dataPaymentType"
</ak-multiselect>
<br/>
<ak-multiselect k-data-text-field="text"
k-data-value-field="value" k-value.two-way="selectPaymentResult" k-data-source.bind="dataPaymentResult"
</ak-multiselect>
<br/>
<button ak-button="k-icon: ungroup; k-widget.bind: button" k-on-click.delegate="GetTransaction()">Get Transactions</button>
<br/>
<div ref="gridTransaction"></div>
This is my viewmodel:
export class Transaction {
selectPaymentType;
selectPaymentResult;
gridTransaction;
dataPaymentType = [
{ text: 'Mobile Payment', value: '0' },
{ text: 'Card Present Payment', value: '1' },
{ text: 'Cash Payment', value: '2' }
]
dataPaymentResult = [
{ text: 'Pending', value: '0' },
{ text: 'Approved', value: '1' },
{ text: 'Declined', value: '2' }
]
buildTransactionFilters() {
var filtersTotal = [];
var filtersPaymentType = [];
var selectPaymentType = this.selectPaymentType;
if (selectPaymentType != null && selectPaymentType.length > 0) {
selectPaymentType.forEach(function (item, i, dataItems) {
filtersPaymentType.push({
field: "paymentType",
operator: "eq",
value: item
});
});
}
var filterPaymentType = {
logic: "or",
filters: filtersPaymentType
};
var filtersPaymentResult = [];
var selectPaymentResult = this.selectPaymentResult;
if (selectPaymentResult != null && selectResult.length > 0) {
selectPaymentResult.forEach(function (item, i, dataItems) {
filtersPaymentResult.push({
field: "result",
operator: "eq",
value: item
});
});
}
var filterPaymentResult = {
logic: "or",
filters: filtersPaymentesult
};
if (filtersPaymentType.length > 0)
filtersTotal.push(filterPaymentType);
if (filtersPaymentResult.length > 0)
filtersTotal.push(filterPaymentResult);
return {
logic: "and",
filters: filtersTotal
};
}
GetTransaction() {
var filters = this.buildTransactionFilters();
var datasourceTransaction = new kendo.data.DataSource({
type: "json",
transport: {
read: {
type: "POST",
contentType: "application/json; charset=utf-8",
url: "api/getTransaction",
cache: false
},
parameterMap(data, operation) {
if (data.models) {
return JSON.stringify({ products: data.models });
} else if (operation === "read") {
return JSON.stringify(data);
}
}
},
filter: filters,
schema: { data: "data", total: "total", aggregates: "aggregates"},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10
})
var $grid = $(this.gridVM).kendoGrid({
dataSource: datasourceTransaction,
pageable: { refresh: true, pageSizes: true, buttonCount: 5 },
scrollable: true,
sortable: true,
columns: [{ field: "publicId", title: "Public Id", filterable: false},
{ field: "initiated", title: "Initiated", filterable: false, type: "datetime"},
{field: "total", title: "Total", filterable: false}
]
}).data("kendoGrid");
}
}
I choose the necessary filtering, press on the button and see the correct data. Then I change filter and press on the button - the data is correct again. But if I change page number or record number on the count, I can see in Network all my previous requests. As result - I see in grid the faster response from my previous requests (with different filters). Quantity of previous requests - how many times I have clicked on the button.
How I can fixed it and get data only from last request?

Answer 1

Use ak-grid for your grid and don't initialize it the jquery way. Take a look at the documentation: https://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid-basic-use
Define the dataSource in your viewmodel once instead of creating a new one after each click on the button. Just change the filter of te dataSource in your getTransactions method (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter)