In a Grid with a hidden column, the aggregates in the footer shift to the right if you edit a cell.
Regression introduced with 2023.2.829
The footer cells shift to the right.
The footer cells shouldn't shift to the right after updating a cell.
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.
showColumn() and hideColumn() is great, but it would be nice if we could pass multiple columns to the methods (maybe as an array). It's extremely slow if I create a loop and call show/hideColumns(x) multiple times. This would ideally apply to any grid component (Kendo Grid and TreeList).
When performing a grid refresh, the grid re-renders the all the grid rows. I think it would be very efficient to have a choice to render specific, changed rows. This is valuable if the grid has many items (200 items for example).
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.
The Kendo UI Popup's "collision" option allows to specify how its positioning algorithm should handle situations where there is not enough space. When "collision" is set to "flip" and there is not enough space to display the popup where it was configured to be displayed (via origin and position), it flips to the other side of its anchor (documented here). If there is no space on the other side either, it flips back to the original position.
I've created an example situation where this happens in this DOJO. You might have to resize the browser window a bit to make the content on either side of the input smaller than the popup's width. As you can see, the position of the popup now is the least fortunate one:
One might think I could set the popup's width to "min-content" via CSS to force wrapping, but this always wraps the content and wherever possible. Is there any way to make the popup's content wrap, but only if necessary?
The popup widget provides a setOptions() method that allows to update the options after initialization (as documented here: https://docs.telerik.com/kendo-ui/api/javascript/ui/popup/methods/setoptions). However, setOptions does not update the collision settings. This can be witnessed in the following DOJO: https://dojo.telerik.com/UbiKumIg.
When reducing the window size until the popup is forced to change its position, it still uses the "fit"-behavior, although setOptions() has been called with "fit".
A quick check in the sources revealed that the widget caches the collision settings internally in a form that is easier to work with than the configuration string. However it is never updated on setOptions().
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?