Dojo example.
1. Resize the browser window so that its height is smaller than the DropDownTree's popup height.
2. Click the DropDownTree to open its popup.
3. The popup opens and then auto-closes
Hello!
Prior to 2024.2.514 (2024 Q2), the DateRangePicker would "force users first to select start and then end range regardless of the date input selected" [1,2]. However, with the latest 2024 Q2 release, clicking the End input on the DateRangePicker selects the range end.
I did not see this specifically mentioned in the release notes, https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-for-jquery-2024-2-514-(2024-q2), so I am reporting this as a bug.
Here is a basic Dojo to demonstrate: https://dojo.telerik.com/IWAbUpuV. You can see the previous behavior by changing the library to the previous version (2024.1.319).
References
The Kendo UI ListView widget supports setting the selected items via the select method. Up to version 2022.2.802, calling select() triggered a change event. This is no longer the case.
You can see the different behaviors in these two DOJOS: 2022.2.802 vs 2023.1.117 (the item gets selected after a second to make sure the dataSource has finished loading).
See demo page: https://docs.telerik.com/kendo-ui/api/javascript/ui/colorpicker/configuration/clearbutton
The example uses "<input id="colorpicker" type="color" />". Opening the preview reveals a black color.
Change the input-tag to div and the 'clear'-style is presented in the preview.
Or remove the color type when using the input-tag: "<input id="colorpicker" />" also correctly represents clear.
I can also locally reproduce it with Kendo UI jQuery v2024.4.1112.
Example: https://runner.telerik.io/fullscreen/yypoqSea
This example is based on the example from the docs with `navigatable: true` and enough data that the user needs to scroll in order to see the bottom row.
On Chrome on macOS, the filter menu cannot be used when `navigatable: true` and "Tap to click" is enabled in the macOS Trackpad settings. When clicking on the filter icon, the menu disappears very quickly (see screen recording). As a workaround, setting `navigatable` to false seems to resolve the problem. The same issue does not seem to occur on Safari, however, there is still odd behavior with the scrolling.
For some reason, screen size, resolution, and window settings impact the ability to reproduce the issue. The most reliable way for me to reproduce the issue was with Chrome in full screen on a 16-inch MacBook (13-inch works too) with the bookmarks bar showing and no external displays connected. Hiding the bookmarks bar or not using full screen seems to make it more difficult to reproduce.
Hi,
We are facing issue on every popup and context menu open. aria-hidden property has been set to true by default while rendering the control.
Blocked aria-hidden on an element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor.
I have been investigating an issue with the ComboBox component under Chrome whereby a scrollbar is being show when using the autoWidth option and a limited number of list entries.
The scenario is as follows
- When the control initially loads and you hit the dropdown button the list does not have vertical scrollbar.
(See screen shot 1)
- Select an item and and then hit the clear button.
Now when you hit the dropdown the list has a vertical scrollbar.
(See screen shot 2)
The issue is very random and can occur with any number of list items, providing the initial dropdown doesn't require a scrollbar.
I have tried to create a dojo to illustrate the problem but have so far failed.
Looking at the element with Dev tools I see on the initial dropdown the wrapper div is as follows
<div class="k-list-content k-list-scroller" unselectable="on" style="overflow: hidden auto;">
but after select, clear & dropdown the div shows
<div class="k-list-content k-list-scroller" unselectable="on" style="overflow: hidden scroll;">
Tracing through the code the problem is within the following function of the kendo.list.js file
_refreshScroll: function() {
var listView = this.listView;
var enableYScroll = listView.element.height() > listView.content.height();
if (this.options.autoWidth) {
listView.content.css({
overflowX: "hidden",
overflowY: enableYScroll ? "scroll" : "auto"
});
}
},
It would appear that under certain conditions Chrome is setting the enableYScroll value to true and hence the 'scroll'.
Looking at this function I cannot see a reason why there is even a need to set overflowY to 'scroll' surely just leaving it set as 'auto' is good enough and let the browser decided if scrollbars are required.
Regards
Alan
When I incell edit multiple rows I only receive a sync callback through `change` on the datasource for the last row with only that last row in the "changedItems". This results in the grid not removing the dirty indicator for any of the other rows, only the last one is removed. The rows are updated properly and I if I were to manually call grid.refresh() it removes the indicators. If I update the rows individually it has no problems.
Here I've updated only the first row:
Here I've updated only the second row:
Here I've updated the first 2 rows at the same time and only the last one is detected as updated:
Here I've updated the PRS column for all 4 rows to "5" and it saved correctly, but only the last row is detected as updated in the grid:
As there's a lot of code involved I can't just paste it here, I can provide snippets or information about particular settings though.
Environment (OS, Application, Versions):
OS Version: 22H2 (OS Build 25352.1)
Edge Dev: Version 121.0.2277.112 (Official build) (64-bit)
Third Party Name: Kendo
Repro Steps:
1. Open https://codepen.io/oneID/pen/LYaGREP and turn on NVDA.
2. Navigate to 'Populate' grid and activate it using enter key.
3. Navigate to Expand button present under domain in Export to excel table.
4. Observe if the screen reader is announcing correct role and name for the expand button or not.
Actual Results:
Accessible name for the 'expand' button is not correct, Expand button is defined as link.
Expected Results:
Accessible name of 'expand' button should be sufficient for screen reader user. Accessible name should contain value available in domain as well.
Role should be defined as 'Button' as its behaving as button.
Bug Title: Columns are not programmatically associated with their table headers.
Severity: Sev2 (High)
Test Environment:
OS Version: 22H2 (OS Build 25352.1)
URL: https://ppe.oneidentity.core.azure-test.net/
Edge Dev: Version 114.0.1807.6 (Official build) dev (64-bit)
Screen Reader: Narrator
Repro steps:
1.Open kendoSample (codepen.io)
2.Navigate through tables.
Actual Result:
Table header and their data are in different tables. Columns are not associated programmatically with their headers.
Expected Result:
Columns should be associated programmatically with their headers.
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
I have a number of DataSource items in the event editor template. They are small JSON objects and it would be dumb to read them from the server each time. They do not change and are part of the page load. You can see here I am just serializing them into the page itself:
This works 9 out of 10 times. But sometimes the dataset is empty. Which is crazy because I am always filling it. I managed to find a work around on the event edit event that gets called but this seems strange to do. Not sure if there is a true bug here or not. Feels like it because this code should not have been needed:
Bug report
When the filtering mode of the grid is set to "row" and the filter is programmatically cleared, the "Clear filter" button does not hide.
Reproduction of the problem
Set filterable: {mode: "row"}.
Filter for instance "Is null" or "Is not null".
Clear the filter - $("#grid").getKendoGrid().dataSource.filter({});
The "Clear filter" button is not hidden
sample Dojo:
https://dojo.telerik.com/AVOqifeK
If there is text in the filter's input, the button is hidden.
Expected/desired behavior
Hide the "Clear filter" button, irrespectively whether the filter has been cleared programmatically or via the UI.
Environment
Kendo UI version: 2019.1.220
jQuery version: 1.12.4
Browser: [all]
I'm using drawing.drawDOM to create a PDF. I have to make a table of contents (TOC) in the beginning of the PDF. It would be great if I had the ability to link to the correct section directly from the TOC. So <a href="#conclusion">Conclusion</a> and then later <a name="conclusion"></a> would make a link in the PDF so the reader could click on the Conclusion-link in the TOC and jump directly to the conclusion-section.
When a chart is exported from an application, the source is not very clear. It can be written in the author property, but that is not visible. I would like to be able to create page header/footer. I can export a PDF page with custom layout using a DOM selector, but in that case the output does not includes paged data in for example a Gantt chart
It would be nice to have RTL support inside Tilelayout component and fixing bug issue about RTL resizing and reordering in jquery.
Thanks.
Other vendors offer visual representations and better access to what controls are available and how to quickly use them in different scenarios. I cannot find any visual such as http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=home&demo=all which nicely highlights what each control looks like from an index perspective. Furthermore, the code in a cookbook should be copy and paste and not have dependencies on hidden helper classes.
ToolBar items only have two states (besides visible and enabled): - displayed in the toolbar - displayed in the overflow dropdown (kind of responsive because not very practical on mobile devices where you are left with two visible buttons at the most, and a possibly large overflow dropdown) On mobile devices, we would buttons buttons that shrink to icon only (no text) before being sent to overflow dropdown. This would improve greatly the responsiveness.
Several of your controls (Scheduler, Grid) make use of the Validator control for validation on the edit forms. Once the validator is loaded there is no way to change the options. It is important if the validator is going to be embedded within other controls that we be able to enable/disable validateOnBlur and get/set the errorTemplate. Without the ability to change the validator options, support recommends use of private methods. An alternate choice would be to require those controls that are embedding the validation to provide these options as part of their configuration. Thanks
Kendo UI pivotgrid should have a way to customize the filters. Specifically have a date picker for date fields and a date range. But something so we can override what the default is.