Currently, when a Kendo component is initialized in the TreeList template it should be initialized in databound, expand, collapse events.
- As the nodes are refreshed when they are expanded the components will not appear as expected in case they are not reitinitized in the collapse/expand event handlers.
- In addition, a setTimeout is needed to ensure that the needed elements are rendered when a node is expanded or collapsed. Adding the timeout leads to a flickering that is not a good user experience solution.
The dojo linked here demonstrates such an example - https://dojo.telerik.com/@NeliKondova/eFaFEveD
I would like the behavior to be enhanced in order to allow initializing the Kendo component in the TreeList template without the need to use the setTimeout function and if possible without reinitializing the components in the expand/collapse event handlers.
Event "Select" is triggered on dropdown list when user do a middle click on the part outside of the list, event the popup of list isn't opened.
I have a tab control, and a number of the related views contain grids.
If a grid is created in a tab view that is not visible, then the grid pager renders as if it was on a tiny mobile screen. The only way you can make it render the pager correcly is to manually resize the browser window after the grid has become visible.
I have a simple demonstration here: https://dojo.telerik.com/eCuQAqEm
The behavior is the same in both Chrome and Firefox.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/tabstrip/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-main.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section">
<div id="tabstrip">
<ul>
<li class="k-active">
Visible Grid
</li>
<li>
Hidden Grid
</li>
</ul>
<div>
<div id="visibleGrid"></div>
</div>
<div>
<div id="hiddenGrid"></div>
</div>
</div>
</div>
<script>
const data = [];
for (let i = 0; i < 100; ++i) {
data.push({
columnOne : `Item ${i} Column One`,
columnTwo : `Item ${i} Column Two`
});
}
const gridOptions = {
dataSource: data,
pageable: {
refresh: true,
pageSize: 10,
pageSizes: [10, 20, 30]
},
};
$(document).ready(function() {
$("#tabstrip").kendoTabStrip();
$("#visibleGrid").kendoGrid(gridOptions);
$("#hiddenGrid").kendoGrid(gridOptions);
});
</script>
</div>
</body>
</html>
Bug report
The localization with zh-TW culture throws a JavaScript error.
Reproduction of the problem
- Open the Dojo example - https://dojo.telerik.com/oKUPuLEH
- Inspect the page and see the error in the browser console.
Current behavior
The following error appears in the browser console:
Uncaught TypeError: Cannot read properties of undefined (reading 'options')
Expected/desired behavior
The localization should not produce any errors.
Environment
- Kendo UI version: 2023.2.718
- Browser: [all]
Good morning,
currently the compatible JQuery versions are only listed in this article: https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support.
Most of the time also with great delay (as of today: 3 versions behind)
Would it be possible to include the compatible versions directly into the Release Notes of new versions?
This way we can safely upgrade JQuery along with new Kendo UI Releases.
Currently the media player only supports YouTube and local media files. In think it would benefit from supporting other media providers such as Vimeo and Metacafe.
When an object is passed to an iframe method and kendo.observable is called on it, an error is thrown. This error is new in the latest kendo releases and appears to be from a change to how kendo decides if something is an object. Kendo now uses { Object.getPrototypeOf(value) === Object.getPrototypeOf({})) } which it did not do in prior releases. This test fails when the object tested is passed in from another frame.
You can repo this issue on the test site we setup: Kendo UI Snippet (sixdisciplines.com)
Click the 'Call IFrame' button and notice the following error thrown:
Uncaught TypeError: e.bind is not a function
at init.wrap (kendo.all.js:318535:21)
at kendo.all.js:318535:21
at Array.forEach (<anonymous>)
at new init (kendo.all.js:318535:21)
at n.observable (kendo.all.js:318535:21)
at iframeMethod (iframetest.html?5:14:25)
at callIFrame (test.html:17:55)
at HTMLButtonElement.onclick (test.html:21:34)
Following is the source used for this repo. I have also attached the html files.
Test.html:
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.2.0/default/default-ocean-blue.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js"></script>
</head>
<body>
<script>
function callIFrame(){
debugger;
var obj = new Object({ p1: 1, p2: 2, child: new Object({ c1: 1, c2: 2 }) });
document.getElementById('targetFrame').contentWindow.iframeMethod(obj);
}
</script>
<button onclick="callIFrame()">Call IFrame</button>
<iframe id='targetFrame' src='iframetest.html?5'></iframe>
</body>
</html>
iframetest.html
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.2.0/default/default-ocean-blue.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js"></script>
</head>
<body>
<script>
function iframeMethod(obj){
debugger;
var observable = kendo.observable(obj);
alert('called')
}
</script>
IFrame with kendo
</body>
</html>
If a column is hidden in a grid, editing and then closing the popup shows the column for that row.
When using Kendo's Upload component when you select a file/files to upload there is a 20% chance that it will upload the same file twice. We switched auto upload off to help, but when you delete one of the dupped files the upload button disappears causing you to delete both of them and then re-upload the file.
Upload Code -
var w = $("#winFiles").data("kendoWindow");
w.setOptions({
width: $(window).width() - 150,
height: $(window).height() - 150
});
w.center().open();
$("body").on("click", "#lnkShowUpload", function () { showWinUpload(associationId, typeId) });
function showWinUpload(associationId, typeId) {
var w = $("#winUpload").data("kendoWindow");
$("#fileUpload").kendoUpload({
async: {
saveUrl: `/api/File/?typeId=${typeId}&associationId=${associationId}`,
autoUpload: false
},
validation: {
allowedExtensions: ["pdf", "jpg", "img", "png", "gif", "doc", "docx", "xls", "xlsx", "csv", "txt"]
}
});
w.setOptions({
height: $(window).height() - 175
});
w.center().open();
}
We would love to see the ability to modify/add/remove Custom Advance Properties to Excel Spreadsheets.
Hello Team ,
we are using .net mvc + angular js
i am unable to upload the image from the my desktop, please find the code below
scope.createKendoEditor = function(element, value) {
//debugger;
var k = $(element).kendoEditor({
"execute": onExecute,
"imageBrowser": {
messages: {
dropFilesHere: "Drop files here",
uploadFile: "Upload a file"
},
transport: {
read: "imagebrowser/read",
destroy: "imagebrowser/destroy",
create: "imagebrowser/createDirectory",
uploadUrl: "imagebrowser/upload",
thumbnailUrl: "imagebrowser/thumbnail",
imageUrl: "@FPK12.LMS.Framework.Utility.FullyQualifiedApplicationPath" + "/Temp/" + "@Utility.UserSessionID" + "/images/{0}?v="+@DateTime.UtcNow.ToString("MMddyyyyHHmmss")
}
},
"fileBrowser": {
messages: {
dropFilesHere: "Drop files here",
uploadFile: "Upload a file"
},
transport: {
read: "imagebrowser/read",
destroy: "imagebrowser/destroy",
create: "imagebrowser/createDirectory",
uploadUrl: "imagebrowser/upload",
thumbnailUrl: "imagebrowser/thumbnail",
imageUrl: "@FPK12.LMS.Framework.Utility.FullyQualifiedApplicationPath" + "/Temp/" + "@Utility.UserSessionID" + "/images/{0}?v=" +@DateTime.UtcNow.ToString("MMddyyyyHHmmss")
}
},
"value": value != null ? WirisPlugin.Parser.initParse(value) : value,
"tools": [
{ "name": "bold" },
{ "name": "italic" },
{ "name": "underline" },
{ "name": "strikethrough" },
{ "name": "justifyLeft" },
{ "name": "justifyCenter" },
{ "name": "justifyRight" },
{ "name": "justifyFull" },
{ "name": "insertUnorderedList" },
{ "name": "insertOrderedList" },
{ "name": "outdent" },
{ "name": "indent" },
{ "name": "createLink" },
{ "name": "unlink" },
{ "name": "insertImage" },
{ "name": "insertFile" },
{ "name": "subscript" },
{ "name": "superscript" },
{ "name": "createTable" },
{ "name": "addColumnLeft" },
{ "name": "addColumnRight" },
{ "name": "addRowAbove" },
{ "name": "addRowBelow" },
{ "name": "deleteRow" },
{ "name": "deleteColumn" },
{ "name": "viewHtml" },
{ "name": "foreColor" },
{ "name": "backColor" },
//{ "name": "formatting" },
{ "name": "fontName" },
{ "name": "fontSize" },
{
name: "wiris",
template: "<div id='" + element.replace("#", "") + "_toolbar'></div>"
},
{
name: "Media",
template: "<div id='" + element.replace("#", "") + "_media' style='cursor:pointer'> <img id='imgMedia' style='padding: 12.2px' title='Media' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGqSURBVDhPzdTNK0RRHMbx6yUvUYgsLYmdpFDessUG5Q+QouzssGBvhxUWNuwIC0qJIgvlZcVKKXkpFkjewvc5c++499zLzMLCU585c6Y79/5+Z84Z57+kEnvuGEiaOyaTDBSgGisoxTFeUYsTOKl6STIzuMI65nAPpQLTKDYzX/pwjrsI+XiHKsmDCtHn/cjFC+rhpOiFVGEH47jQB1ZU3QM6odbOcI1hzEOVN2MXJrrwBt4DojIFVfmGWahlVdiDS6iLeLqgG3pRxa3QD+FFD8tBHdTFJ7RMZVB1gdg3nMAHtqEbeJXruiWUY9EdI2PfcBKqQLQteqHY14WSaNtozbawaWaxdTuNvY2OvxVV5e2lUXRgEBvQWrYgC3a0ZfRA7YJ47FZUub96rdsjdI1NN1pDIO3QRi00s3BuoWPWBK8rjQ04gPZkIDqjOiVaI/8JkUZ31GZWe6vQqdCv/AxtdFVq4j1NKUIbss3sO8tQdSM4whhqcIgh6Hv+9U8qankg9tZJR4k7Kt0ItZwoC9CR+4naN/G3/Fu0XfQ/mGlmwWjj7+PJzP42jvMFvddvjvC2MvQAAAAASUVORK5CYII='> </div>"
}
]
}).data("kendoEditor");
setTimeout(function () {
if (value == undefined) {
$(k).focus();
}
}, 100);
return k;
}
we are getting the web address URL we are expecting upload images/files from the My PC
CSP is a great security feature. It should be fully supported by Kendo! The best would be some way to precompile Kendo Templates. Second option could be that you can use Kendo + CSP when not using own Kendo Templates at all.
Would like some way to know when the file is finished saving. This is especially useful when saveAs uses a proxyURL and a user is waiting for the file to come back from the server. Currently, there is no way to inform user of this progress or when it completes.
Hi Team,
I would like to request samples are created for Kendo UI for jQuery using TypeScript as it would be nice to see the implementation in action. If possible, please could you include a section using ASP.NET Core as well.
Thank you!
Hi Team, we're using kendo heavily on our platform. But still there're many gaps in kendo accessibility. I'm working as a Accessibility advocate and i believe every individual can access the widgets irrespective of their barriers. One of the issue is:
Keyboard Support is missing in the input fields buttons like:
1. Clear Button
2. Dropdown "arrow" Button
3. Date and Time Button
Current Behavior:
Focus is going to input field and you can write inside the combobox or textbox or multiselect but you can't interact with other icon buttons like dropdown , date & time, clear "x" button using tab key.
Expected Behavior: As per accessibility , every interactive elements needs to be keyboard focusable using tab key irrespective of shortcut.
I've created a feature request long ago and suggested solution for this: please check in the feature, it's declined by the team:
Date time picker Keyboard Support is missing for date and time button because of (tabindex=-1)
Hi team, please find the accessibility issue:
Component: https://demos.telerik.com/kendo-ui/datetimepicker/keyboard-navigation
Issue Name:
Missing keyboard support for image buttons
Actual Result
Keyboard support is missing for "Open the time view" and "Open the date view" image buttons. This made it difficult for keyboard-only and screen reader users to access the functionality associated with the image buttons.
Steps to Reproduce
1. Navigate to the mentioned image buttons in the modal dialog.
2. Observe that the image buttons do not receive the keyboard focus.
Expected Results
The image buttons must be keyboard accessible.
Recommendation
Ensure that all the page functionality is available for all users irrespective of the device being used.
Apply the following changes:
• Remove the tabindex="-1" attribute from the source code of the image buttons.
• Initially set the aria-expanded attribute to "false" for the image button. Ensure that the value of the aria-expanded attribute changes on user interaction via scripting.
Existing:
<button unselectable="on" tabindex="-1" class="k-select k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button">
<span class="k-icon k-i-clock k-button-icon"></span>
</button>
Recommended
<button unselectable="on" class="k-select k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" aria-expanded="false">
<span class="k-icon k-i-clock k-button-icon"></span>
</button>
Also, the shortcut is there to open a date and time picker but relying on the shortcuts only to open it would not be feasible,
I would like the composite control "Change Theme:" that is used in the Kendo and ASP.NET Core Control demos to be delivered as part of the tool suites.
It is a control that I would like to leverage in several of my deliverables for my customers. And, although I can duplicate the basic feature, it does not look near as nice as the one found on the demo pages.
See attachment for screen shots of what I am talking about.
It is already built. Can it be packaged for delivery with the toolset(s)?
Thank you for the consideration!!!
My marketing department has requested a specific look for a chart. The Moc up image is http://i.imgur.com/Z2hKaei.jpg in order to achive what they are asking I need the Labels to work in the Bullet Charts. It would also be great if you could add a label to the Target as pictured in the image.
Hi,
If Kendo grid column has enumerated values, menu filter extra condition values is not populated.
Please, see example code in dojo at https://dojo.telerik.com/oXIwobEh
Thank you.