The Kendo UI Toolbar supports keyboard navigation between its items either via TAB/SHIFT+TAB or the RIGHT and LEFT arrow keys (documented here). However, there are some issues:

• While the arrow keys cycle endlessly, the user needs to be able the "escape" this cycle when using TAB, otherwise parts of the page would be inaccessible by keyboard. This "breakout" does not work when navigating backwards (SHIFT+TAB) in some scenarios as this DOJO demonstrates. Also, when focusing "After" and pressing SHIFT+TAB, the focus jumps to the splitButton instead of the overflow anchor which is inconsistent with the way TAB alone works.
• When the last visible (not-overflown) item is a separator after a splitButton, the overflow anchor is not focusable via TAB at all. This can be witnessed in this DOJO. However, when combining the items differently, everything seems to work fine.

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.

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:

• Select a few items
• press LEFT
• press TAB

The Kendo UI Toolbar widget supports adding SplitButtons that can contain several options. By default, the dropDown with the options can be opened using ALT+DOWN when the SplitButton is focused. This works as expected. According to the documentation, pressing UP or DOWN should now move the focus to the next or previous item. This happens internally, but there is no visual clue for the user. It is impossible to know which item is currently selected.

This DOJO demonstrates the bug.

Hi

I found bug into the Items of Tab component.

When you create Tab and write 3 TabItems for it, all of the component are correct but when you want create other tab into the first or second part of TabItem with 2 tabitems, you will expect to see one main Tab with 3 TabItems and other Tab with 2 Tabitems into the first tabItem of first Tab. But you will see one Tab with 5 Tabitems So main Tab merge all of TabItems with together.

<Tab id="mainTab">
    <TabItem id="item1">
          <Tab id="childTab">
               <TabItem id="childItem1">
                    Content 1
                </TabItem>
                  <TabItem id="childItem2">
                    Content 2
                </TabItem>
           </Tab>
     </TabItem>
     <TabItem id="item2">
             Content 2
     </TabItem>
     <TabItem id="item3">
             Content 3
      </TabItem>
</Tab>

Thanks for solving this problem or for guiding me.

When a toolbar with several items is resized so that not all items can be displayed at once anymore, some items should be "moved" to the overflow container. I am, of course, assuming that these items have "overflow" set to "auto", which is the default value. As soon as at least one item is overflown, the overflow button should be displayed. This DOJO creates such an environment.

Now, when you resize the page so that the overflow is activated, you can see that not enough space is reserved for the overflow button. It is (first partially, then fully) hidden behind the rightmost item before this item is finally "moved" to the overflow container.

If you look closely, you can still see parts of the three dots behind the "Toggle" item.

The "Classic" SASS theme for Kendo UI (v. 5.4.0) provides the $kendo-chip-spacing variable that defines the space between the text and the icon of the chip. This styling is e.g. used in the MultiSelect widget.

However, one cannot override its default value using the approach described in the documentation for SASS themes since the variable definition is missing the "!default" part (see the source file at line 8).

Hi Kendo Team,

I am getting this error when trying to open a pdf from Azure Blob using kendoPDFViewer. (Error: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.)

I use token-based authentication by SSL token included to the image/pdf URLs and It works fine for image viewing using kendoImageEditor.

My code is simple as follows:

                            this.viewer = $("#pdfViewer").kendoPDFViewer({

                                pdfjsProcessing: {

                                    file: pdfUrl,

                                },

                                width: "100%",

                            }).data("kendoPDFViewer");

Could you please let me know how to fix this issue?

Or do I need to use dplProcessing with an Authorization token

We are using the latest version (5.4.0) of the "Classic" SASS theme for Kendo UI and override several scss variables to adapt the grid's look&feel to our requirements. One thing we did was setting $grid-header-padding-x and $grid-header-padding-y to 2px each.

If the content of the grid header is long enough to be truncated, sorting indicators etc. are partially moved out of the cell.

Since I cannot modify scss variables in DOJOs, I have tried to apply CSS styles to simulate the behavior: https://dojo.telerik.com/EMOYUREh.

As you can see, the th element applies some padding that .k-cell-inner removes again. On the right side, however, the negative margin is bigger than the padding added by the th element which causes the content to move out of the cell.

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.

### Bug report

When the Kendo UI ScrollView widget is bound to local data and the property "navigatable" is set to "true", it cannot be navigated once the last item is reached. 

### Reproduction of the problem

1. Create a navigatable ScrollView widget;

2. Create a DataSource with local data and bind it to the ScrollView widget;

3. Use the keyboard or mouse navigation to reach the last item;

4. Continue navigating after the last item and observe the paging behavior. The last page is repeated.

A Dojo sample for reproduction: https://dojo.telerik.com/OnItEhiN

### Expected/desired behavior

The ScrollView widget should not allow going past the last item/page via the keyboard/mouse navigation.

### Environment

* **Kendo UI version:** 2021.1.330
* **jQuery version: 1.12.4
* **Browser:** [all]

Bug report

When the duration of a task is edited in the Task Duration column in Gantt in the save event handler e.task.taskDuration returns the new duration value. With versions, before 2020 R3, the old task duration value has been returned.

Reproduction of the problem

1. Open the Dojo
2. Edit the value in the 'Task Duration' column and observe the result in the browser`s console.

Current behavior

With the current version, the new task duration is returned.

Expected/desired behavior

The returned e.task.taskDuration should return the previous task duration in order to be consistent with the behavior before 2020 R3

Regression since 2020.3.915

Environment

• Kendo UI version: 2022.2.510
• Browser: [all]

Bug report

Files are missing when trying to generate a script file for CircularProgressBar only through the Custom Download Tool.

Reproduction of the problem

1. Open the custom download tool - https://www.telerik.com/download/custom-download
2. Select CircularProgressBar

Current behavior

There are missing files in the exported custom file.

Expected/desired behavior

All necessary files should be included in the custom script file.

Environment

• Kendo UI version: 2022.2.621
• Browser: [all]

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:

• It would make more sense to flip, despite there being not enough space, because more content could be displayed on the left side than on the right side.
• It would be even better if the popup detected that neither sides provides enough space and instead reduced its size - the size is not fixed but determined by the content.

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?

Hi,

I seem to have unearthed a bug in the Kendo spreadsheet control. When the spreadsheet has only 1 row and there is column validation somewhere on the sheet, if I then edit a cell (without validation), 8 rows are created.

See the following Dojo

Kendo UI Snippet | Kendo UI Dojo (telerik.com)

Steps to reproduce.

1. Run the Dojo

2. Edit the UnitPrice cell to, say 20

3. Save changes

4. Observe in the browser console (F12) 8 rows created.

Expected results are 0 rows created and 1 updated

Thanks

Ian

TL;DR: The DropDownList widget cannot be closed by clicking the arrow-icon.

The long story:

After the DropDownList has been opened once, it closes and reopens every time the user clicks the arrow-icon. Closing the DropDownList still works when clicking anywhere on the dropDown except the arrow-icon (or rather the button around it) or anywhere else but the dropDown. This DOJO demonstrates the problem. Animations have been disabled to allow easier reproduction (with animations on, the problem appears only occasionally, probably because of timing issues).

If you look closely, you will notice that the dropDown closes when the mouse button is pressed and reopens when the mouse button is released (this is when the click event is fired). Therefore, the problem can be (temporarily) mitigated by suppressing the mousedown event on the dropDown's wrapper element.

The problem described happens for multiple controls. For the sake of simplicity, I'll stick with the DropDownList.

As documented here, the DropDownList's "fillMode" option supports "null" as value. However, the corresponding TS typings file does not allow null. The same is true for the "rounded" and "size" options as you can see in the snippet below that was copied from "index.d.ts".

interface DropDownListOptions {
        fillMode?: string | undefined;
        rounded?: string | undefined;
        size?: string | undefined;
    }

Note: parts of the code were omitted for brevity's sake.

A (temporary) workaround is to trick the typing system by casting manually:

fillMode: null as unknown as string | undefined

Bug report

When using a ForeignKeyColumn that is bound to a dataSource, the Grid options will not be available initially such as during the document.ready event.

Reproduction of the problem

Please visit this Progress Kendo UI Dojo which demonstrates the Grid unable to retrieve the options, and receiving a JavaScript error.

Expected/desired behavior

The Grid options should be available upon the document.ready event with a databound ForeignKeyColumn.

Environment

• Kendo UI version: 2022.2.510
• jQuery version: 3.6.0
• Browser: All

After updating the version of Kendo we are using to 2022.1.412 we noticed a weird behavior in the DropDownLists. Clicking the drop down arrow once opens the list, then clicking the arrow again closes and re-opens the list instead of just closing it. Note that this does not happen while clicking on any other part of the drop down to close it, selecting an item from the drop down, or clicking outside the drop down list. It only happens while clicking on the arrow button.

Behavior can be seen in the demos on these pages:

https://demos.telerik.com/kendo-ui/dropdownlist/template

https://demos.telerik.com/kendo-ui/dropdownlist/grouping

https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist

However the behavior does not appear on these pages:

https://demos.telerik.com/kendo-ui/dropdownlist/virtualization

https://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering

Steps to Reproduce:

• Click the drop down arrow to open the drop down list
• Click on the arrow again and observe the list close and re-open (Note it sometimes doesn't happen right away but takes a few tries)