When I selected columns on filter the selected columns unchecked but the order of the rows changed -kendo grid - kendo-ui

Question

`
class TransactionsGrid {
constructor(productInfoWindowId) {
this._productInfoWindowId = productInfoWindowId;
this._gridTransactionsSelectorId = this._productInfoWindowId + " " + "#gridTransactions";
}
async setGrid(inventoryId, productId) {
this._inventoryId = inventoryId;
this._productId = productId;
let userStore = new UserStore();
$(this._gridTransactionsSelectorId).kendoGrid({
allowCopy: true,
resizable: true,
reorderable: true,
columnMenu: true,
scrollable: true,
selectable: "row",
persistSelection: true,
navigatable: true,
sortable: true,
filterable: {
mode: "menu"
},
pageable: {
pageSizes: [100, 200, 300, "all"],
numeric: false
},
height: window.innerHeight - 200,
columns: [
{
field: "OrderType",
title: userStore.translatedString("frmPurchaseOrder.OrderType"),
width: 120
},
{
field: "DocumentNo",
title: userStore.translatedString("frmCreatePurchaseOrders.DocumentNo"),
width: 130,
},
{
field: "ActorNo",
title: userStore.translatedString("Common.ActorNo"),
width: 120
},
{
field: "Actor",
title: userStore.translatedString("Common.Actor"),
width: 120,
},
{
field: "TransactionDate",
title: userStore.translatedString("uctrlInventoryTrans.TransactionDate"),
width: 125,
attributes: {
style: 'text-align: right;'
},
format: "{0:yyyy-MM-dd}"
},
{
field: "Quantity",
title: userStore.translatedString("Common.Quantity"),
width: 120,
attributes: {
style: 'text-align: right;'
},
format: "{0:n2}"
},
{
field: "QtyAfterTransactions",
title: userStore.translatedString("Common.QtyAfterTransactions"),
width: 120,
attributes: {
style: 'text-align: right;'
},
format: "{0:n2}"
}
],
dataBound: async function (e) {
var rows = e.sender.content.find('tr');
rows.each(function (index, row) {
var dataItem = e.sender.dataItem(row);
if (dataItem.QtyAfterTransactions < 0) {
$(row).children().addClass('lightRed');
}
});
},
dataSource: {
dataType: "json",
schema: {
model: {
fields: {
InventoryId: { type: "number", editable: false },
ProductID: { type: "number", editable: false },
OrderType: { type: "string", editable: false },
DocumentNo: { type: "number", editable: false },
ActorNo: { type: "number", editable: false },
Actor: { type: "string", editable: false },
TransactionDate: { type: "date", editable: false},
Quantity: { type: "decimal", editable: false },
QtyAfterTransactions: { type: "decimal", editable: false }
}
}
},
batch: false,
transport: {
read: function (options) {
$.ajax({
url: "/ProductRowInfoSite/GetTransactions",
data: {
"inventoryId": inventoryId,
"productId": productId
},
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
success: function (result) {
// notify the data source that the request succeeded
options.success(result);
misc.SelectFirstRowInGrid(self._gridTransactionsSelectorId);
},
error: function (jqXHR, textStatus, errorThrown) {
displayAjaxError(jqXHR, textStatus, errorThrown);
// notify the data source that the request failed
options.error(jqXHR);
},
type: 'POST'
});
}
},
pageSize: 100
}
});
}
}
` $(this._gridTransactionsSelectorId).kendoGrid({
allowCopy: true,
resizable: true,
reorderable: true,
columnMenu: true,
scrollable: true,
selectable: "row",
persistSelection: true,
navigatable: true,
sortable: true,
filterable: {
mode: "menu"
},
pageable: {
pageSizes: [100, 200, 300, "all"],
numeric: false
},
height: window.innerHeight - 200,
columns: [
{
field: "OrderType",
title: userStore.translatedString("frmPurchaseOrder.OrderType"),
width: 120
},
{
field: "DocumentNo",
title: userStore.translatedString("frmCreatePurchaseOrders.DocumentNo"),
width: 130,
},
{
field: "ActorNo",
title: userStore.translatedString("Common.ActorNo"),
width: 120
},
{
field: "Actor",
title: userStore.translatedString("Common.Actor"),
width: 120,
},
{
field: "TransactionDate",
title: userStore.translatedString("uctrlInventoryTrans.TransactionDate"),
width: 125,
attributes: {
style: 'text-align: right;'
},
format: "{0:yyyy-MM-dd}"
},
{
field: "Quantity",
title: userStore.translatedString("Common.Quantity"),
width: 120,
attributes: {
style: 'text-align: right;'
},
format: "{0:n2}"
},
{
field: "QtyAfterTransactions",
title: userStore.translatedString("Common.QtyAfterTransactions"),
width: 120,
attributes: {
style: 'text-align: right;'
},
format: "{0:n2}"
}
],