or
0 answers
192 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
208 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
138 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
101 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
233 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
93 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
1 answer
670 views
Hi,
I am currently attempting to upgrade the Kendo UI from 2022.2.510 to 2023.2.829 and need some assistance figuring out which .css files and .js files are the closest match to what I have for 2022.2.510. Wow it's different....seems like most of the css and javascript libraries have been reorganized.
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.common.min.css" />
<link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.mobile.min.css" />
<link rel="stylesheet" href="FontAwesome/font-awesome-4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="styles/jquery_1.12.0-rc2/jquery-ui.min.css" />
<!-- JAVASCRIPT -->
<script type="text/javascript" src="Kendo/2023.2.829/js/jquery.min.js"></script>
<script type="text/javascript" src="Kendo/2023.2.829/js/jszip.min.js"></script>
<script type="text/javascript" src="Kendo/2023.2.829/js/kendo.all.min.js"></script>
<script type="text/javascript" src="Kendo/2023.2.829/js/kendo.timezones.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/populateTable.js"></script>
<script type="text/javascript" src="scripts/interimDataRecs.js"></script>
<script type="text/javascript" src="scripts/payrollDataRecs.js"></script>I am fairly new at working with the Kendo UI -- I may just need to be pointed to documentation or a README that maps the old files to the new(?). I am not using anything fancy...these are pretty much the default controls.
So far I have not attempted to swap out ANYTHING.... I don't even know where to begin.. I am however, starting to do this shortly. Yikes!
FYI: I am using the following controls:
- kendoDropDownList
- kendoButton
- kendoGrid (detailInit -- using the hiarchical stuff).
- kendoSwitch
- kendoNotification
- kendoToolTip
Be curious if you all have a recommend approach or stratedgy to upgrading Kendo UI for jQuery libraries?
I'd also like to know the best approach to minifying the Kendo folders?
The Kendo stuff is stashed in the wwwroot (I did not design this structurer ... but I am stuck with it.):
Thanks for your help and patience ^__^
George
George
Top achievements
Rank 3
Bronze
Bronze
Iron
Rank 3
Bronze
Bronze
Iron
updated answer
on
11 Oct 2023
1 answer
208 views
Hello,
I got a custom button on my toolbar , which opens a modal, but , when i tried to open in mobile mode , it stops working
see the code below
$('#pdfViewer').css('width', '100%');
var request = new XMLHttpRequest();
request.responseType = 'blob';
request.onload = function () {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function (e) {
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: {
data: e.target.result.split(",")[1]
}
},
toolbar: {
items: [
"zoomInOut",
{
type: "button",
name: 'Description',
template: '<button type="button" onclick="openModal()" title="Description" class="k-button k-button-md k-button-flat" id="btn-Description"><span class="k-icon k-i-toc-section-level"></span></button>',
}
]
},
width: "100%",
height: 760
}).getKendoPDFViewer();
};
};
on browser desktop modal it works normally
Martin
Telerik team
answered
on
10 Oct 2023
1 answer
208 views
I have a Kendo Grid where one of the columns contains an array of strings. I would like to use filtering on this column, but it would need to pull the distinct values of the array for each row.
I'm looking for the best approach to achieve my desired result.
i have created the following example where i would want to be able to filter on the classes column
https://dojo.telerik.com/@slberry75/utiXaXaW/10
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-ocean-blue.css">
</head>
<div id="studentList"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{id: 1, name: 'Harry Potter', classes: ['Arithmancy', 'Potions', 'Divination'], house: 'Gryffindor'}
, {id: 2, name: 'Blaise Zabini', classes: ['Herbology', 'History of Magic', 'Transfiguration'], house: 'Slytherin'}
, {id: 3, name: 'Dennis Creevy', classes: ['Charms', 'Potions', 'History of Magic'], house: 'Hufflepuff'}
, {id: 4, name: 'Luna Lovegood', classes: ['Divination', 'Charms'], house: 'Ravenclaw'}
]
});
$('#studentList').kendoGrid({
columns: [
{ field: 'name', title: 'Student Name' },
{ field: 'classes', title: 'Enrolled Classes', template: function(row) {
return row.classes.join('<br />')
}},
{ field: 'house', title: 'House Affiliation' }
],
dataSource: dataSource,
filterable: { mode: "row"}
});
})
</script>
</html>
Neli
Telerik team
answered
on
10 Oct 2023
1 answer
103 views
Is there a spreadsheet for Angular, if not, what to use with Angular?
I had feedbacks that Spreadsheet for JQuery in Angular does not behave wery well, poor performances. Is there a way to use the Spreadsheet properly with Angular?
Georgi Denchev
Telerik team
answered
on
10 Oct 2023
