In a Grid with virtual row and column scrolling enabled, if there are large number of hidden columns, the horizontal scrolling is very slow.
Horizontal scrolling is slow
Horizontal scrolling should be smooth
The documentation for the Kendo UI MultiSelect widget states that the user can highlight the next/previous item using RIGHT/LEFT when the selection popup is closed. This works as expected. However, if the user then presses TAB and moves the focus somewhere else, the item remains highlighted.
Since the highlight only indicates that certain actions can be executed on the item, it should be removed in such a case as the actions are no longer executable. This can easily be reproduced with the keyboard navigation sample:
The different Date/Time Pickers contain of an input field and a button that opens a calendar view in a popup. Usually, the background color of the button changes when it is clicked. In Firefox, nothing happens, because it seems to block the :active pseudo class. This DOJO demonstrates the behavior.
In other, similar input widgets like the NumericTextBox, this problem does not occur, because the .k-selected class is set on the button instead. Still, Firefox blocks the :active pseudo class.
The Typescript definitions for Kendo UI define the kendo.ui.ToolBarOpenEvent as follows:
interface ToolBarEvent {
sender: ToolBar;
preventDefault: Function;
isDefaultPrevented(): boolean;
}
interface ToolBarOpenEvent extends ToolBarEvent {
SplitButton?: JQuery | undefined;
}
The event is also documented that way in https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/events/open. However, the corrersponding method in kendo-toolbar.js:446-453 does the following:
open: function (e) {
var isDefaultPrevented = that.toolbar.trigger(OPEN, { target: element });
if (isDefaultPrevented) {
e.preventDefault();
return;
}
that.adjustPopupWidth(e.sender);
},
The Kendo-UI Grid supports the concept of locked columns that are always on the left side of the screen (in a non-RTL-world) and do not scroll. This makes it necessary to split the underlying HTML-table into two parts (one is locked and one is not). Kendo-UI takes care of syncing the height of the rows between those two tables.
However, if there are empty cells in the locked part, this logic produces results that make the row grow larger (higher) than if there was content. This DOJO demonstrates the behaviour. Using the Browser's DEV-Tools, you can see that rows without content in column A are 37px high, while those with content are only 36px high.
In the TreeList, the row colors are not consistent with other technology divisions, e.g. Angular. With the Classic Silver theme, the rows are not consistent regarding the alternating background colour approach. Additionally, in the Default theme, the rows are not as differentiated as they should be by design.
Note: the issue appears to be related to the k-treelist-group class on the elements in the TreeList.
Workaround: https://dojo.telerik.com/ORIjOcAB/3
The rows' background color are not consistent in regard to alternative background colors.
The rows' background colors should be consistent with the design.
The dropDownList supports several keyboard shortcuts as documented in https://demos.telerik.com/kendo-ui/dropdownlist/keyboard-navigation. However, when e.g. a KeyDown event is triggered (and handled) by the widget, its propagation is not stopped. This behavior can be witnessed in this DOJO.
In our case, we e.g. use dropDownLists inside dialog windows that can be closed via ESC. When pressing ESC while a dropDownList is focused, this not only closes the dropDownList (as expected), but also closes the dialog.
The dropDownList should stop the propagation of events that it handled.
In case you are using a chart with the following configuration:
$("#chart").kendoChart({
series: [{
type: "radarLine",
missingValues: "gap",
data: [1, null, null, null, 5]
}]
});
There is no line between the last and the first data point of the series.
But when the 2nd and 4th data points are set as well, this connection is added:
$("#chart").kendoChart({
series: [{
type: "radarLine",
missingValues: "gap",
data: [1, 3, null, 3, 5]
}]
});
Expected behaviour: As the chart displays a "circle", all data points next to each other should be connected in case they are having a value.
The same issue can be seen in this DOJO, where the fifth data point is not connected to the rest of the points. This only happens if "missingValues" is set to "gap".
The "Classic" SASS theme for Kendo UI (v. 5.4.0) provides the $enable-transitions variable. I expected it to behave consistent with other similar variables like $enable-rounded which means that when it is set to false, no transistion properties would be set.
However, the following elements always have a transition property set, no matter what the value of $enable-transitions is:
Is this a bug or did I understand the meaning of $enable-transitions wrong?
In the latest version of Kendo UI, various input controls like the NumericTextBox or the ColorPicker now consist of an input field and a button control (used for increasing/decreasing the value or opening the dropdown).
The border-radius for those widgets can be controlled by setting the "rounded" option. At the same time, when using SASS themes, a button's default border-radius might be set using the $kendo-button-border-radius variable. The buttons inside e.g. a NumericTextBox do not override the theme's border-radius which leads to an outcome like this:
Widgets that use Buttons internally (and therefore offer no way of overriding the button's border-radius by setting its "rounded" option manually) should override the default styles.
Unfortunately, I could not reproduce the behavior in a DOJO, because I cannot transpile SASS themes there.
Bug report
SpreadSheet does not apply borderBottom correctly for last row
Reproduction of the problem
Dojo - https://dojo.telerik.com/UGABAnoR
Current behavior
Border is applied at the first row for the next column
Expected/desired behavior
The border shall be applied at the bottom at A2000
Environment
Kendo UI version: [all]
Browser: [all ]
When values are pasted in the Spreadsheet if the cell is not empty the previous format is taken into account
The number column is formatted as date - screencast(https://somup.com/cZeoodChyH)
The current format should be applied to the pasted data.
When a recurring event is created in a Scheduler and the id is not set to the event, then if the event is deleted an error is thrown in the console.
3.1. 'kendo.all.js:311085 Uncaught TypeError: Cannot read properties of undefined (reading 'startTimezone')' is thrown
3.2. 'Uncaught TypeError: Cannot read properties of undefined (reading recurrence exception)' is thrown in the console
There should be no errors in the console although the deleted event is without id being set. There could be some more descriptive message.
npx gulp custom -c validator
The validator is not working, error is shown
jQuery.Deferred exception: $(...).kendoNumericTextBox is not a function
The components should work as expected when custom script is created
Hiding the first column in Grid will show a 2 pixels left border instead one.
Dojo Sample to replicate the issue: https://dojo.telerik.com/ubaLiYEN
Steps:
1. Hide the first column (OrderID) from the Column Menu.
2. Notice the doubled left-border on the left hand side of the Grid.
Bug report
Row filter Clear icon does not clear the autocomplete in Grid since 2022.1.119
Reproduction of the problem
Open the demo: https://demos.telerik.com/kendo-ui/grid/filter-row
Expected/desired behavior
AutoComplete shall be cleared
The issue is introduced with 2022 R1 (2022.1.119)
Environment
Kendo UI version: 2022.1.119 or above
Browser: [all]
If the snap
option is set at runtime the drag hint of the events starts having wrong height.
After changing the snap option at runtime as a result the drag hint height is correct when the snap is set to false, but it has wrong height when the snap is enabled.
The drag hint should have the same height as the dragged event.
move: function(e){
var dragHintEl = $('.k-event-drag-hint')
var dataUid = $('.k-event-drag-hint').attr('data-uid')
var event = $('.k-event[data-uid="'+ dataUid +'"]:not(.k-event-drag-hint)')
var height = $(event).height()
$(dragHintEl).height(height)
},
Dojo - https://dojo.telerik.com/@NeliK/aZArEdof
The toLocaleDateString for the ko-KR culture returns a date in format "yyyy. MM. dd", while the kendo.culture.ko-KR.js contains short date pattern 'd' as yyyy-mm-dd
The format for the ko-KR culture should meet the local format. The kendo.culture.ko-KR.js should be updated accordingly.