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

`

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}" } ],



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source