Hello,
I am using Kendo version Kendo UI v2020.2.617 in our project, I have implemented custom fonts in the fonts family tool. When I select any text to change its font for some instances, the selection gets held until the time I select the font and after the font selection is completed. Still, when I select the text and try to open the font dropdown, the selection is getting deselected, which means the selection is not getting hold in the editor.
Even I faced the same issue for the default fontName tool when I implemented it before trying the custom.
Will you please help me with what might be the possible reasons for it?
Code which I implemented -
{
name: "fontName",
items: [{
text: "Andale Mono",
value: "Andale Mono"
}, {
text: "Arial",
value: "Arial"
}, {
text: "Arial Black",
value: "Arial Black"
}, {
text: "Book Antiqua",
value: "Book Antiqua"
}, {
text: "Comic Sans MS",
value: "Comic Sans MS"
}, {
text: "Courier New",
value: "Courier New"
}, {
text: "Georgia",
value: "Georgia"
}, {
text: "Helvetica",
value: "Helvetica"
}, {
text: "Impact",
value: "Impact"
}, {
text: "Symbol",
value: "Symbol"
}, {
text: "Tahoma",
value: "Tahoma"
}, {
text: "Terminal",
value: "Terminal"
}, {
text: "Times New Roman",
value: "Times New Roman"
}, {
text: "Trebuchet MS",
value: "Trebuchet MS"
}, {
text: "Verdana",
value: "Verdana"
}, {
text: "Webdings",
value: "Webdings"
}, {
text: "Wingdings",
value: "Wingdings"
}]
}
Thank you
i have two html (main.html and submission.html), but when i tried to open a kendo window to window.parent (main.html) and create a kendo dropdownlist from the kendo window and pass datasource to the dropdownlist, but it will have error
main.html
<div><iframe id="iframeContent" src="submission.html"></iframe></div>
submission.html
<script type="text/template">
window.parent.$("<div>").kendoWindow().content("<div id="dropdownlist"></div>").center().open();
window.parent.$("#dropdownlist").kendoDropDownList({
dataSource: [ { id: "1", name: "123" } ],
dataTextField: "name",
dataValueField: "id",
optionLabel: "-- Please Select --"
})
</script>
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:
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
Hello, the following code works like a charm:
var arr = [ {text:"Option 11",value:"Value 11"}, {text:"Option 22",value:"Value 22"} ]; arr.push({text:"Option 33",value:"Value 33"}); var datasource = new kendo.data.DataSource({ data: arr }); datasource.read(); jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);
However if I try this:
var arr = [ {text:"Option 11",value:"Value 11"}, {text:"Option 22",value:"Value 22"} ]; for(i=0;i<operators.length;i++) { var singleElement = { text:operators[i], value:operators[i] }; arr.push(singleElement); } var datasource = new kendo.data.DataSource({ data: arr }); datasource.read(); jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);
I get [object Object] where I should have the elements
of operators as values and text on the dropdownlist.
If I try this:
var arr = [ {text:"Option 11",value:"Value 11"}, {text:"Option 22",value:"Value 22"} ]; for(i=0;i<operators.length;i++) { var singleElement = "{text:\""+operators[i]+",value:\""+operators[i]+"\"}"; arr.push(singleElement); } var datasource = new kendo.data.DataSource({ data: arr }); datasource.read(); jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);
I get "undefined" where I should have the elements
of operators as values and text on the dropdownlist.
Any idea on how can get the values from "operators" into the datasource and show up on the dropdownlist ?
Thanks,
Rafael
I have a kendo dropdownlist with virtualization and a local array of objects used as the data source. I need to replace the datasource based on selections the user makes elsewhere on the page. The problem I'm having is that since it uses virtualization, I don't know when the datasource has finished being updated with setDataSource(newDataSource) and as such, sometimes when I try to set the new value, the new value isn't there. I don't want to use setTimeout because that is bad practice as it assumes it will take a certain amount of time to complete. The cascade event seems to only work after changing the value, not the dataSource. Is there a way to do something like this reliably:
var newDataSourcce = getDataSource();
myDropdownList.setDataSource(newDataSource);
myDropdownList.value(100);
After Implmenting the Content Security Policy (CSP) in our application, various Kendo controls have stopped working. The CSP, blocks execution of inline scripts and since the Kendo controls are creating scripts while they render, CSP finds it as a threat and hence blocks its execution.
Below is a snapshot of the browser console error. All of the 5 errors are being thrown by kendo Controls.
When the Kendo Control, such as a grid, is rendered, a script tag is generated. Please check the below screenshot for reference.
Here, we have a grid, divIFAResults, when it is rendered on the screen, a script tag with Kendo.syncReady() is generated. The Kendo Grid relies on this script for its smooth execution, but our CSP blocks this script, inturn making the control unusable.
We have added 'unsafe-eval' as per the telerik docs for CSP. We are using the Kendo files hosted in our own project, not from CDN.
Hello community, how are you?
I need to replicate a filter like the one in this image. This is inside a kendoGrid filter, but I can't replicate something similar with MultiSelect and CheckboxGroup.
Supposedly this function is what makes this filter look like that:
function categoryDropdownEditor(container, options) {
$('<input required data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: fk_categoriesDatasource,
dataTextField: "category",
dataValueField: "id",
filter: "contains",
minLength: 1
});
}
My kendoGrid is configured like this:
$("#grid").kendoGrid({
dataSource: dataSourceGrid,
autoBind: true,
scrollable: true,
sortable: true,
filterable: true,
groupable: true,
resizable: false,
loaderType: "skeleton",
pageable: {
refresh: true,
numeric: false,
input: true,
previousNext: true,
alwaysVisible: true
},
noRecords: {
template: function (e) {
return "No hay datos disponibles.";
}
},
columns: [
{
title: "CategorÃa",
field: "category_id",
dataTextField: "category",
dataValueField: "id",
editor: categoryDropdownEditor,
filterable: {multi: true},
dataSource: {
transport: {
read: {
url: apibaseurl + endpoint + "/categories",
type: "GET",
dataType: "json",
beforeSend: addToken,
},
},
schema: {
data: "data",
total: "total",
model: {
id: "id",
fields: {
category: {type: 'string'},
}
}
},
},
},
{
command: [
"edit",
{
name: " ",
iconClass: "k-icon k-i-more-vertical",
}
],
title: " ",
width: 210
}],
editable: "popup",
});
I apologize if it is not understood or if I forgot to put something, it is my first post here.
Thank you very much for your attention.
Jonathan.
I want to create a global onOpen function that will apply to all dropdownlists without the need to manually attach it to each one's open option on the site. For example, I want to hide the optionLabel if it has a class of disabled in it but I don't want to have to manually attach it to each dropdownlist created.
open: function () {
let optionLabel = this.element.getKendoDropDownList().list.find(".k-list-optionlabel");
let isDisabled = $(optionLabel).find(".disabled").length > 0;
if (isDisabled) {
$(optionLabel).hide();
}
},