how to add pagination to dynamically created kendo grid in knckout ?

1 Answer 61 Views
Grid
youssef
Top achievements
Rank 1
youssef asked on 09 Oct 2023, 04:55 PM

i have this kendo grid with knckout JS :

this is my html : 


<div id="account-details-histoCash" class="gridload" data-bind="kendoGrid: accountDetailsHistoCashGridOptions">
        </div>

this is my JS:


self.compositionComplete = function () {
                    $('#account-details-histoCash').data('kendoGrid').dataSource.read();
}
self.accountDetailsHistoCashGriddDataSource = new kendo.data.DataSource({
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    filterable: true,
                    pageSize: 5,
                    selectable: true,
                    //page: 1,
                    data: {
                        "values": [],
                        "total": 0
                    },
                    transport: {
                        read: function (options) {
                            self.isLoading(true);
                            if (self.isDownloading()) {
                                self.isLoading(false);
                                self.isDownloading(false);
                                options.success(self.valuesCash());
                            }
                            else {
                                var accounts = [];
                                if (self.isConsolidation()) {
                                    accounts = self.accounts();
                                } else {
                                    accounts.push(self.NumAccount())
                                }

                                service.FindAccountsPositions(options, accounts, 3, self.DateHisto(), self.smsCode()).then(function (result) {
                                    if (result?.exception?.Message == "SMS_VALIDATION") {
                                        swal.fire({
                                            title: labels.SmsValidation(),
                                            input: 'text',
                                            type: "warning",
                                            confirmButtonText: labels.Confim(),
                                            cancelButtonText: labels.Cancel(),

                                            showCancelButton: true,
                                            buttonsStyling: false,
                                            confirmButtonClass: "btn btn-primary btn-rounded px-45",
                                            cancelButtonClass: "btn btn-secondary btn-rounded m-r-10 px-45",
                                            closeOnConfirm: true,
                                            closeOnCancel: true,
                                            reverseButtons: true

                                        }).then((result) => {
                                            if (result.value) {
                                                self.smsCode(result.value);
                                                setTimeout(function () { $('#account-details-histoCash').data('kendoGrid').dataSource.read(); }, 1000);
                                                console.log("Result: " + result.value);

                                            } else {
                                                self.isLoading(false);
                                            }
                                        });
                                        options.error([])
                                    } else {


                                        var totalValo = 0;
                                        result.valuesCash.forEach(function (item) {
                                            totalValo += item.valuationMinute ? item.valuationMinute : 0;
                                            item.valuationDeposi = item.valuationMinute
                                            item.quantityDeposi = item.quantityMinute
                                            item.weightDeposi = item.weightMinute
                                            item.codPolitiqueInvestissement = item.codPolitiqueInvestissement
                                            item.valuationMinuteExel = item.valuationMinute != undefined ? item.valuationMinute : 0;
                                            item.pmvlExel = item.pmvl != undefined ? item.pmvl : 0;
                                            item.weightMinute = item.weightMinute != undefined ? item.weightMinute : 0;
                                            item.valuationMinute = item.valuationMinute ? item.valuationMinute : 0;
                                            item.crsendeviseEx = item.coddevise == 'EUR' ? parseFloat(item.crsendevise.toFixed(2)) + " € " : parseFloat(item.crsendevise.toFixed(2)) + " " + item.coddevise;
                                            item.pamText = item.pam ? item.coddevise == 'EUR' ? kendo.toString(parseFloat(item.pam), 'n2') + " € " : kendo.toString(parseFloat(item.pam), 'n2') + " " + item.coddevise : "";
                                            item.AveragePurchasePriceInListingCurrency = item.averagePurchasePriceInListingCurrency ? item.coddevise == 'EUR' ? kendo.toString(parseFloat(item.averagePurchasePriceInListingCurrency), 'n2') + " € " : kendo.toString(parseFloat(item.averagePurchasePriceInListingCurrency), 'n2') + " " + item.coddevise : "";
                                            if (item.placeCotation == undefined) item.placeCotation = ""
                                            if (item.quantityMinute) {
                                                item.qte = self.FormatQuantity(item.quantityMinute)
                                                item.qteExcel = item.quantityMinute
                                            } else {
                                                item.qte = ""
                                                item.qteExcel = 0

                                            }
                                            //item.pam = item.codTypeExpressionCours == "03" ? item.crsEuros : item.pam;
                                            item.PAM = item.codTypeExpressionCours == "03" ? kendo.toString(parseFloat(item.crsendevise), 'n2') + " %" : kendo.toString(parseFloat(item.pam), 'n2') + " €";
                                            item.isInt = self.isInt(item.quantityMinute)

                                        })
                                        options.success(result);
                                        setTimeout(function () {
                                            if ($('#account-details-histoCash') && $('#account-details-histoCash').data('kendoGrid'))
                                                $('#account-details-histoCash').data('kendoGrid').refresh();
                                        }, 100);
                                        self.isLoading(false);
                                        self.valuesCash(result.valuesCash);
                                        app.trigger("setValorisation", totalValo);

                                    }



                                }, function (e) {
                                    self.pushError(e);
                                });
                            }
                        }
                    },
                    schema: {
                        data: function (response) {
                            return response.valuesCash;
                        },
                        total: function (response) {
                            return response.countItemsCash;
                        },
                        model: {
                            fields: {
                                numCompteDedie: { type: "string", nullable: true },
                                libInstrument: { type: "string", nullable: true },
                                valeurMarcheDeviseSecurite: { type: "number", nullable: true },
                                crsEuros: { type: "number", nullable: true },
                                valuationMinute: { type: "number", nullable: true },
                                weightMinute: { type: "number", nullable: true }
                            }
                        },
                    }
                });
                self.accountDetailsHistoCashGridOptions = {
                    dataSource: self.accountDetailsHistoCashGriddDataSource,
                    data: undefined,
                    autoBind: false,
                    sortable: true,
                    scrollable: true,
                    resizable: true,
                    reorderable: false,
                    columns: [
                        {
                            field: "numCompteDedie",
                            width: 250,
                            cellAlignSide: "right",
                            media: "(min-width: 768px)",
                            title: labels.Account(),
                            filterable: false
                        },
                        {
                            media: "(min-width: 768px)",
                            field: "libInstrument",
                            width: 200,
                            cellAlignSide: "right",
                            template: "#= libInstrument #",
                            title: labels.Currency(),
                            filterable: false
                        },
                        {
                            media: "(min-width: 768px)",
                            field: "valeurMarcheDeviseSecurite",
                            width: 200,
                            cellAlignSide: "right",
                            template: "#= valeurMarcheDeviseSecurite # <span class='text-size-11'> #= coddevise # </span>",
                            title: labels.Valuation(),
                            filterable: false
                        },
                        {
                            media: "(min-width: 768px)",
                            field: "crsEuros",
                            width: 200,
                            cellAlignSide: "right",
                            template: "#= crsEuros #",
                            title: labels.Exchange(),
                            filterable: false
                        },
                        {
                            media: "(min-width: 768px)",
                            field: "valuationMinute ",
                            width: 200,
                            cellAlignSide: "right",
                            template: "#= valuationMinute  # €",
                            title: labels.ValuationEuro(),
                            filterable: false
                        },
                        {
                            media: "(min-width: 768px)",
                            field: "weightMinute ",
                            width: 200,
                            cellAlignSide: "right",
                            template: "#= weightMinute  # %",
                            title: labels.Portfolio(),
                            filterable: false
                        }
                    ],
                    columnReorder: function (e) {
                        var grid = e.sender;
                        if (e.newIndex == 0 || e.newIndex == 1) {
                            setTimeout(function () {
                                grid.reorderColumn(e.oldIndex, e.column);
                            }, 1)
                            return;
                        }
                        if (e.column.field == "rto") {
                            setTimeout(function () {
                                grid.reorderColumn(0, e.column);
                            }, 1)
                        } else if (e.column.field == "reco") {
                            setTimeout(function () {
                                grid.reorderColumn(1, e.column);
                            }, 1)
                        }
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                eq: labels.eq(),
                                contains: labels.contains(),
                                startswith: labels.startswith()
                            },
                            date: {
                                gte: labels.gte(),
                                lte: labels.lte()
                            },
                            number: {
                                eq: labels.eq(),
                                gte: labels.Ngte(),
                                lte: labels.Nlte()
                            }
                        }
                    },
                    pageable: {
                        pageSize: 5,
                        pageSizes: true,
                        buttonCount: 5,
                        refresh: true,
                        messages: {
                            itemsPerPage: " "
                        },
                        responsive: true
                    },
                    excel: {
                        fileName: i18n.t('app:global.labels.Positions.Posexcelfilename'),
                        allPages: true
                    },

                    dataBound: function (e) {

                        /* add class to first/last column */

                        var grid = this;
                        if (root.AppCode == 'IFA_CGP') {

                            self.FixGridBindingAndHeaderScroll.apply(this, [true]);

                        } else {
                            self.FixGridBindingAndHeaderScroll.apply(this, [true]);

                        }
                        // #region ----------------------ASV----------------
                        if (self.isASV()) { //TODO CHECK LRM WEBSITES
                            $("#account-details-histoCash th[data-field=Titres]").html(labels.Poche());
                            $("#account-details-histoCash th[data-field=crsendevise]").html(labels.ValeurLiq());
                            $("#account-details-histoCash th[data-field=weightMinute]").html(labels.Repartition());
                            grid.hideColumn("PAM");//Supprimer la colonne Prix de revien
                            if (root.AppCode == 'PWM_OBP') {
                                grid.hideColumn("placeCotation");
                                grid.hideColumn("coursEnDevise");
                                grid.hideColumn("pmvl");
                                grid.hideColumn("perf");
                            }
                        } else {
                            $("#account-details-histoCash th[data-field=Titres]").html(labels.Titres());
                        }
                        // #endregion--------------
                        if (self.isConsolidation()) {
                            grid.hideColumn("pam");
                        }
                    }
                };

ths problem is the kendo grid pagination is not working and displayed properly :

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 12 Oct 2023, 10:36 AM

Hi Youssef,

It is hard to suggest a possible reason for the observed issue as the provided code is not runnable. Could you please check and confirm if there is any error in the browser console?

You can also try to prepare and send us a Fiddler Jam log that could potentially help us get a better idea of what might be the cause of the issue.

https://docs.telerik.com/kendo-ui/fiddler-jam-integration

Please make sure that the capturing is started from a blank page and that you load the problematic page afterward.

In general, Knockout.js is an MVVM-based framework. Kendo UI on the other hand has its own MVVM built-in Framework. I would encourage you to take a look at the following resources:

https://docs.telerik.com/kendo-ui/framework/mvvm/observableobject

- https://docs.telerik.com/kendo-ui/framework/mvvm/overview

- https://demos.telerik.com/kendo-ui/mvvm/index

In addition, please note that officially we do not provide support for Knockout.js and Kendo UI for jQuery integration.

Regards,
Neli
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Grid
Asked by
youssef
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or