kendo ui grid options data source transport : read : function not firing

0 Answers 6 Views
ScrollView
Tanvir
Top achievements
Rank 1
Tanvir asked on 29 May 2024, 07:42 PM | edited on 29 May 2024, 08:13 PM

Here is my defaultGridSettings code. I wanted to auto scroll paging for the grid with back end api call. But the onDataLoad() function is not invoking when I scroll down. It is only fired once at the initial page load. So I am unable to load subsequent data (next) with scrolling the grid.

protected setDefaultGridSettings() {
        this.gridOptions = {
            height: "100%",
            allowCopy: false,
            sortable: {
                mode: "multiple",
                allowUnsort: true
            },
            resizable: true,
            columnMenu: true,
            filterable: true,
            scrollable: {
                virtual: true
            },
            noRecords: {
                template: require("../../common/templates/GridEmptyState.html")
            },
            edit: !this.readonlyAccess ? this.editOnchange.bind(this) : null,
            cancel: this.cancelChange.bind(this),
            columns: [
                { field: `id`, hidden: true, filterable: false, sortable: false, menu: false },
                {
                    field: `sellerName`, title: `Seller Name`,
                    filterable: {
                        multi: true,
                        search: true
                    }
                },
                {
                    field: `marketPlace`,
                    title: `Marketplace`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    editor: this.marketPlaceEditor.bind(this),
                    template: `# if(marketPlace){ # #=marketPlace# #} else {# #=marketPlace||""# #} #`,
                },
                { field: `phoneNumber`, title: `Phone Number`, filterable: false },
                { field: `emailAddress`, title: `Email Address`, filterable: false },
                { field: `physicalAddress`, title: `Physical Address`, filterable: false },
                {
                    field: `partnerType`,
                    title: `Partner Type`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    hidden: false,
                    editor: this.partnerTypeEditor.bind(this),
                    width: "200px",
                    template: `# if(partnerType){ # #=partnerType# #} else {# #=partnerType||""# #} #`,
                },
                {
                    field: `sellerType`,
                    title: `Authorization`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    hidden: false,
                    editor: this.authorizationTypeEditor.bind(this),
                    template: `# if(sellerType){ # #=sellerType# #} else {# #=sellerType||""# #} #`
                },
                {
                    field: `sellerCategory`,
                    title: `Category`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    hidden: false,
                    editor: this.categoryTypeEditor.bind(this),
                    template: `# if(sellerCategory){ # #=sellerCategory# #} else {# #=sellerCategory||""# #} #`
                },
                {
                    field: `tag`,
                    title: `Auto-Tag`,
                    filterable: {
                        multi: true,
                        search: true
                    },
                    hidden: false,
                    editor: this.tagEditor.bind(this),
                    template: `# if(tag){ if(tag == 'Benign') {# #=tag# #} else {# #=tag# #} } else {# #=tag||""# #} #`
                },
                //  {command: ["edit", "destroy"], title: "Actions", width: "270px", menu:false},
                {
                    command: [{
                        name: "edit",
                        template: "<a class='k-grid-edit command-edit glyphicon glyphicon-pencil'></a>"
                    }, {
                        name: "destroy",
                        template: "<a class=' k-grid-delete command-delete glyphicon glyphicon-trash danger'></a>"
                    }], title: "Actions", menu: false, width: "120px"
                }

            ] as kendo.ui.GridColumn[],
            editable: "inline",
            dataSource: {
                serverSorting: true,
                serverFiltering: true,
                serverPaging: true,
                pageSize: 500,
                transport: {
                    read: this.onDataLoad.bind(this),
                    update: (options => {
                        let tag = "";
                        if (options.data.tag instanceof Object) {
                            tag = options.data.tag.id;
                        } else if (tag !== "") {
                            tag = (this.tagOptions.filter(x => options.data.tag === x.text))[0].id;
                        }
                        this.addButton = false;
                        const sellerList: ISeller[] = [{
                            id: options.data.id,
                            sellerName: options.data.sellerName ? (options.data.sellerName).trim() : options.data.sellerName,
                            marketPlace: options.data.marketPlace,
                            phoneNumber: options.data.phoneNumber ? (options.data.phoneNumber).trim() : options.data.phoneNumber,
                            emailAddress: options.data.emailAddress ? (options.data.emailAddress).trim() : options.data.emailAddress,
                            physicalAddress: options.data.physicalAddress ? (options.data.physicalAddress).trim() : options.data.physicalAddress,
                            sellerType: options.data.sellerType,
                            sellerCategory: options.data.sellerCategory,
                            partnerType: options.data.partnerType,
                            tag: tag ? tag : options.data.tag

                        }];
                        this.sellerViewDataService.updateSeller(sellerList).subscribe(response => {
                            if (response.success) {
                                options.success(sellerList);
                                this.grid.kendoGrid.dataSource.read();
                            } else {
                                options.error(null);
                                this.alertDialog.show(response.messages);
                            }
                        },
                            error => {
                                options.error(null);
                                this.alertDialog.show(error.messages);
                            });
                    }).bind(this),
                    destroy: (options => {
                        this.addButton = false;
                        const sellerList: ISeller[] = [{
                            id: options.data.id,
                            sellerName: options.data.sellerName,
                            marketPlace: options.data.marketPlace
                        }];
                        this.sellerViewDataService.deleteSeller(sellerList).subscribe(response => {
                            if (response.success) {
                                options.success(null);
                            } else {
                                options.error(options.data);
                                this.alertDialog.show(response.messages);
                                this.grid.kendoGrid.dataSource.read();
                            }
                        },
                            error => {
                                options.error(options.data);
                                this.alertDialog.show(error.messages);
                                this.grid.kendoGrid.dataSource.read();
                                ;
                            });
                    }).bind(this),
                    create: (options => {
                        this.addButton = false;
                        const sellerList: ISeller[] = [{
                            sellerName: options.data.sellerName ? (options.data.sellerName).trim() : options.data.sellerName,
                            marketPlace: options.data.marketPlace,
                            phoneNumber: options.data.phoneNumber ? (options.data.phoneNumber).trim() : options.data.phoneNumber,
                            emailAddress: options.data.emailAddress ? (options.data.emailAddress).trim() : options.data.emailAddress,
                            physicalAddress: options.data.physicalAddress ? (options.data.physicalAddress).trim() : options.data.physicalAddress,
                            sellerType: options.data.sellerType,
                            sellerCategory: options.data.sellerCategory,
                            partnerType: options.data.partnerType,
                            tag: options.data.tag
                        }];
                        this.sellerViewDataService.addSeller(sellerList).subscribe(response => {
                            if (response.success) {
                                options.success(sellerList);
                                this.grid.kendoGrid.dataSource.read();
                            } else {
                                options.error(null);
                                this.alertDialog.show(response.messages);
                            }
                        },
                            error => {
                                options.error(null);
                                this.alertDialog.show(error.messages);
                            });
                    }).bind(this),
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options) {
                            return JSON.stringify({ data: options });
                        }
                    }

                },
                schema: SellerTrackingViewSourceSchema,
                // change: this.countSeller.bind(this)
            },
            change: this.onGridChange.bind(this),
            dataBound: this.onGridDataBound.bind(this),
            reorderable: true,
            selectable: "multiple row",
            navigatable: false,
            columnMenuOpen: (field) => {
                this.selectColumnReorderController.bind(field, this.grid);
            }
        };
    }

Tanvir
Top achievements
Rank 1
commented on 29 May 2024, 08:11 PM

this is my onDataLoad method - 


 onDataLoad(options: kendo.data.DataSourceTransportReadOptions & { data: { page: number } }) {
        console.log(`ON DATA LOAD: SELLER TRACKING`);
        console.log(options);
        if (!this.grid) {
            // filtering workaround: ignore data load when grid is not initialized yet
            console.log(`GRID NOT INITIALIZED`);
            return;
        }
        let skip = (options.data.page - 1) * this.searchFieldsObj.limit;
        this.searchFieldsObj.skip = skip;

        if (options.data.sort) {
            this.searchFieldsObj.sortTypes = options.data.sort as ISort[];
        }

        this.searchFieldsObj.kendoFilter = options.data.filter;

        // add the customer to the filters and make sure its set
        if (this.accountID > 0 && this.gridOptions.columns) {
            const filterableColumns = this.gridOptions.columns.filter(col => col.filterable && col.filterable["multi"]);
            filterableColumns.forEach(col => {
                if (col) {
                    this.sellerViewDataService.getSellerDataForField(col.field).subscribe((response: any) => {
                            let items = [];
                            if (response) {
                                if (response.data.length > 0) {
                                    items = response.data;
                                }
                            }
                            (col.filterable["dataSource"] as kendo.data.DataSource).data(items);
                        },
                        error => {
                            (col.filterable["dataSource"] as kendo.data.DataSource).data([]);
                        });
                }
            });
            this.grid.refreshFilterMultiselects();
            // this.clearSelectedRows();

            const oSearch = options.data.page === 1
                ? this.sellerViewDataService.getSellerViewData(this.searchFieldsObj, filterableColumns.map(x => x.field))
                : this.sellerViewDataService.getSellerViewData(this.searchFieldsObj);
            oSearch
                .subscribe((data: any) => {
                        if (data) {
                            if (data.sellers != null) {
                                data.sellers.forEach((item: any) => {
                                    let tag = "";
                                    const found = this.tagOptions.some(function (e) {
                                        if (e.id === item.tag) {
                                            tag = e.text;
                                            return true;
                                        } else
                                            return false;
                                    });
                                    if (found) {
                                        item.tag = tag;
                                    }
                                });
                                let response = {results: [], total: 0};
                                response.results = data.sellers;
                                response.total = data.count;
                                options.success(response);
                                if (response.total) {
                                    this.zone.run(() => {
                                        this.sellerCount = response.total;
                                    });
                                }
                            }
                        }
                        this.setExportMenuTitle();
                    },
                    error => {
                        if (error.success) {
                            this.sellerCount = 0;
                            let response = {results: [], total: 0};
                            options.success(response);
                        }
                    });
        }
    }

No answers yet. Maybe you can help?

Tags
ScrollView
Asked by
Tanvir
Top achievements
Rank 1
Share this question
or