or
1 answer
711 views
Hi....
Issue is the icons don't change when clicking the expand/ contract button in the kendo-grid:
In the context of a hierarchical kendo grid, it used to, in prior versions (2020.1.1118) swapped icons:
- from + to - if the user desired to expand and show the child rows in a hierarchical table:
from - to + if the user wanted collapse the child rows and show only the parent rows.
Now as of version 2023.3.1010:
,,,something is interfering with my code, guessing that some CSS references have changed.
Here is a DOJO link:
Untitled | Kendo UI Dojo (telerik.com)
If the link doesn't work (I am new to Kendo as of July and I still haven't gotten the hang of saving stuff on the DOJO) , I have attached a text file (with HTML) that the exact code to test in the DOJO. You might need to stretch the right side that shows the active code to see the button in the header.
Also, the version prior to 2023.3.1010 showed an evil twin :) ... a little plus sign in addition to the default + plus icon... so you might want to go back a version to look at that too.
Can you give me some ideas on how to fix the issue of the icons NOT swapping on the 2023.3.1010 version when it was working fine previously?
Regards,
George
Neli
Telerik team
answered
on
19 Oct 2023
1 answer
168 views
Hi all,
Is there a way to export a grid to png instead of pdf or convert the pdf output to a png in javascript?
Thanks,
Joseph Scott
Zornitsa
Telerik team
answered
on
19 Oct 2023
0 answers
215 views
I am json_encoding a php array for javascript variable that is used for the local binding to the kendo tree list. There can be 50000+ records for the kendo tree list and loading time of the page is around 15-20 seconds. The higher the amount do records the higher the loading times.
The kendo tree list was previously remote binding, but found the performance of the tree list was poor when expanding parenet nodes. Therefore, resorted to local binding. Perfromance once loaded is good, but now number of records inserted are increasing.
How long should the kedno tree list take to load when locally binding 50,000+ records?
Thanks,
Fraser
1 answer
142 views
Hi,
I'm dynamically creating doughnuts and when clicking the legend it sets all the other doughnuts to the value of the last dynamically created value. Please see Dojo: https://dojo.telerik.com/AQucizad
i.e Click on Complete on "Demo-1 - chart-1" legend and in the Console it will output the values for chart two instead (if i didn't have the preventDefaults, it would also update Demo-1 as Demo-2 value)
How do i get it to reference the correct data? :(
Neli
Telerik team
answered
on
17 Oct 2023
0 answers
279 views
Hi,
I've got an application where the user can choose the kendo ui theme.
Within this application I use the Kendo editor component.
Is there a possibility to change the textcolor of the editor.
Or to add a CSS class.
I won't define style="color: #FFF" is must be something like class="<k-negative-color-to-this-theme>"
Here is a Dojo Example with a dark theme
https://dojo.telerik.com/oCeTOPir
In the example the background is dark and the color also?
regards
Maik
2 answers
279 views
Based on this link we want to use the resize Command to downscale an uploaded picture
Something like
imageEditor.executeCommand({ command: "ResizeImageEditorCommand", options: {height: 1080, aspectRatio: true } });
How could this be realised
best regards
Maik
Maik
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
16 Oct 2023
2 answers
189 views
Hello,
I've got a detail template and if you click on it, it adds the key to the selectedKeys arrray, so it gets highlighted (selected).
But after that I press shift and click on another row (2 rows down for example. Not the detail) and it selects all the records from the first one until the clicked row. Not from the row I selected via the detail row.
It's like the grid doesn't know I've already selected a row.
Do you have an example when clicking the detail template, selects the parent row and also keeps the shift from working?
This is my detail template:
<ng-template kendoGridDetailTemplate let-dataItem>
<ng-container>
<div
*ngIf="dataItem['COMMENTS']"
(click)="childRowOnClicked($event, dataItem["ORDERID"])"
>
<div>
{{ dataItem['COMMENTS'] }}
</div>
</div>
</ng-container>
Regards,
1 answer
162 views
Hi,
For some reason when I try to add a new record to my dataSource ….then refresh the grid for my hierarchical table that uses detailInit,
…. the formatting is bypassed for my new record added to the dataSource.
After I add the new data to the JavaScript array... and refresh the grid, it does repopulate the child or detail grid:
But it doesn't appear to catch the format: "{0:c}"
I don't know why the new value (monetary) is getting bypassed with the format option? Here is my code for the detailInit(e):
functiondetailInitMainGrid(e) {
console.log("IN: detailInitMainGrid()");
var payCodeList = [];
var data = _view.get("interimDS.interimPayrollRecords");
//DEBUG:var data2 = e.data;
$.each(data, function (index, value) {
if (value.payCode != 'Total') { // add NON-TOTAL records to data array//DEBUG://console.log(" LAST NAME:" + value.fullName + " : RECORD ID: " +value.interimPayrollRecordId);
payCodeList.push({
interimPayrollRecordId: value.interimPayrollRecordId,
payCode: value.payCode,
amount: value.amount,
amountHrsMins: value.amountHrsMins,
monetary: value.monetary,
});
}
});
console.log("event data source: ID:" + e.data.interimPayrollRecordId + ", NAME: " + e.data.fullName);
//var detailCell = e.detailCell;//detailCell.css("padding-left", "350px");
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource:
{
data: payCodeList,
serverPaging: false,
serverSorting: false,
serverFiltering: false,
filter: { field: "interimPayrollRecordId", operator: "eq", value: e.data.interimPayrollRecordId }
},
scrollable: true,
sortable: true,
pageable: false,
columns: [
{ field: "payCode", title: "Pay Code", width: "110px", attributes: { class: "child-table-details" } },
{ field: "amount", title: "Amount<br/>(HRS)", width: "50px", format: "{0:n}", attributes: { class: "child-table-details" } },
{ field: "amountHrsMins", title: "Amount<br/> (HRS:MIN)", width: "50px", attributes: { class: "child-table-details" } },
{ field: "monetary", title: "Monetary<br/>Amount", width: "50px", format: "{0:c}", attributes: { class: "child-table-details" } }
]
});
}
I did manage to debug through the creation of the child table (in the detailInit(e) function) when I click the little triangle on the left of the parent record, but it seems to bypass the new value I pushed to the JavaScript array structure and prints it out with our the $ or the trailing .00. I don't want to create a custom formatter in javascript, I think the format option for the monetary column should be working... but maybe there is something I am doing that causes it to malfunction or convert it to the monetary or currency format?
Thanks again for your help and patience,
George
George
Top achievements
Rank 3
Bronze
Bronze
Iron
Rank 3
Bronze
Bronze
Iron
updated answer
on
13 Oct 2023
1 answer
288 views
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 :
Neli
Telerik team
answered
on
12 Oct 2023
1 answer
136 views
Use case: I have a button that triggers a long-running process. I would like to add a spinning icon to the button itself to show that the process is already in progress (it has no reason to affect the rest of the page).
I can add an imageUrl on the fly, however when the process completes, I would like to be able to remove the image, and it does not seem to work. If I set imageUrl to null or empty string, nothing happens.
This is not a huge problem as I can write jQuery code to hide the image, I just wondered if there was a simpler way.
Martin
Telerik team
answered
on
12 Oct 2023
