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
0
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!