Bug report
Menu not closing on mobile devices with 2024.4.1112

Reproduction of the problem

https://demos.telerik.com/kendo-ui/menu/index

Expected/desired behavior
Menu shall close on tab

TicketID: 1674126

<div data-role="grid"
                 data-editable="true"
                 data-toolbar="['create', 'save']"
                 data-columns="columns"
                 data-bind="source: products}"></div>


 var viewModel = kendo.observable({
products:  ...
 columns:[
        {field:"id", width:50},
        {field: "name", width:200}
         ...etc
        ]
});

Bug report

The first unlocked column cannot be dropped into the next locked column.

Reproduction of the problem

1. Go to the following Progress Kendo UI Dojo.
2. Start drag from the ShipCountry (the first unlocked column) column header.
3. Drop to ShipName(locked column) column header.

Expected/desired behavior

ShipCountry should become a locked column and move to next to ShipName like how it worked in version 2021.3.914.

Environment

• Kendo UI version: 2022.2.802
• jQuery version: All Supported Versions
• Browser: All

Line Chart Crosshair doesn't display on Tablets.

Display's fine on Desktop & also on Mobile, but tested on iPad and Android tablets the Crosshair line does not display.

kendo.2020.1.114

Bug Report

The cascade event is triggered on initialization of the DropDownLists

Reproduction of the issue

1. Open this Dojo - https://dojo.telerik.com/nGNFvRwt
2. Open the browser console

Current behaviour

The cascade event is triggered on initialization

Expected behaviour

The event should be triggered when the value of the "parent" DropDownList is changed.

var chart = $("#chart").data("kendoChart");
var series = [];

$(theData.Serieses).each(function (index) {
	series.push({
		name: theData.Serieses[index].Name,
		field: theData.Serieses[index].Name,
		data: theData.Serieses[index].SeriesPoints,
		xField: "X",
		yField: "Y",
		color: theData.Serieses[index].Colour,
		markers: {
			type: theData.Serieses[index].Shape
		}
	});
});
chart.setOptions({ series: series, noData: series.length == 0 });
chart.redraw();
console.log(chart.options);

When updating a chart after instantiation, because noData defaults to true, the overlay is shown immediately

if you try and set noData via setOptions then redraw(), the overlay is still in place

Honestly, this should have been marked as a breaking change as every single chart has to be updated to force noData to false just to show initially

Bug report

When the user try to enter a value using the browser`s autofill, the value is not entered correctly and an error is thrown in the browser console.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/EqaleBaL
2. Enter some values and click 'Submit'
3. Run the example again and strat enetring the same Name
4. When the autofill popup select the name to autofill the rest of the fields.

Note: some browsers may not save the dates in the autofill list. The screencast linked here is when the Edge browser is used.

Current behavior

The value in the DateInput is not filled in correctly and the following error is thrown in the console: Cannot read properties of undefined (reading 'toString') at t.keyEventMatchesAutoSwitchKeys (kendo.all.js:63751:1)

Expected/desired behavior

The value from the autofill should be filled in the DateInput.

The issue is a regression starting with 2023.2.606

Environment

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

Bug report

When the change event is bound after initialization it is not fired when changing a cell value.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/XeTgsxKc
2. Change a value in a cell

Current behavior

The change event is not fired.

Expected/desired behavior

The change event should be triggered when a value of a cell has been changed.

Environment

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

Bug report

If you have several Inline Editors and a Slider, switching focus from Slider and typing in the Editors result in an error in the console.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/EhiKaJAw/2
2. Change the Slider value
3. Go to the Editor right below the slider and type some text - it appears that the focus is stolen here as the text cursor is not shown
4. Go to the second Editor and type some text
5. Repeat steps 2-4 several times

Current behavior

An error is thrown in the console

Expected/desired behavior

No error should be thrown on the console

Environment

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

Bug report

When using a draghandle to drag a same level item below another item, it will not drop in the correct place.

Reproduction of the problem

1. Go to this Progress Kendo UI Dojo.
2. Try to drag Brian under Lillian as soon as the indicator says it's okay.

Current behavior

The item will revert back to the original position.

Expected/desired behavior

The item should be place in the expected dropped location.

Environment

• Kendo UI version: 2024.4.1112
• jQuery version: All Supported Versions
• Browser: all

Bug report

When the toggleOnClick option is set to true, the hide method doesn't hide the Popover

Workaround: https://dojo.telerik.com/JhWNDQrv (works only in the custom scenario when the hide method is called on scrolling the page. It will not work when the call method is called on button click)

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/hVdauDSd/4
2. Scroll the page, which will call the hide method.

Current behavior

The Popover remains visible

Expected/desired behavior

The Popover should hide

TicketID: 1669787

_

Environment

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

Hello,

My use case:

On grid dataBound, I am iterating over the table rows to perform some piece of custom logic on the row based off of the backing dataItem. Our production site is using version 2024.1.130, and everything is working great. Our next release we've updated to version 2024.2.514, and when we try adding a record, we get an error; when we try to access the dataItem of the last table-row - the dataItem is undefined. The grid.items() in my case is an array of size 21, and the internal _data array is size 20.

Repro conditions (as far as I can tell):

• A Grid backed by a DataSource with server operations set to false
• The DataSource should (?) have a filter configured
• The size of the DataSource's data should (?) be larger than the pageSize

My workaround:

Simply perform a null check on the dataItem before doing the logic. We are calling DataSource.read in the DataSource.sync success callback anyway, so the grid will reload and the dataBound event will be handled afresh.

I've created the below dojo snippet to demonstrate a simplified version of my use case. I tested with 2024.1.130 and seems to work fine. I noticed the issue starting at version 2024.1.319.

https://dojo.telerik.com/INbSBrSg

A note: No, I don't actually use the internal _data property in my code, just for debugging purposes :)

Thanks!

-Alexa

Bug Report

The diagram.exportImage() throws an error with v.2024.4.1112 

"Uncaught TypeError: diagram.exportImage(...).done is not a function"

Regression with 2024.4.1112.

Reproduction of the problem

Run the example from the following API: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/methods/exportimage

Current behavior
The export is not working.

Expected behavior
No error shall be present and image must be generated.

Environment
Kendo UI version: 2024.4.1112
jQuery version: x.y
Browser: [all]

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.

Original ticket: 

START

As title says, when a list box is both draggable and multiple select is enabled the behavior is unpredictable. Sometimes when you click and drag on an item it will create the selection box when you are trying to simply drag the item, and other times the opposite. As far as I can tell there is no way to force one behavior or another.

$("#pdfPreviewList").kendoListBox({
            draggable: true,
            connectWith: "proposal",
            selectable: "multiple",
            dropSources: ["proposal"],
            template: `
                    <div id='#:file#'>
                        #:pn#
                    </div>`,
            toolbar: {
                tools: ["moveUp", "moveDown", "transferTo"]
            },
            change: (e) => {
                let f = e.sender.select()[0].getElementsByTagName("div")[0].id;
                displayPdfPrview(f)
            }
        });

Data source is 2 -3 items, so there is white space below the list items. 

END

I think there should be a dragToSelect option like there is in grid. That way you can still have multiple select work with key modifiers like control and shift and can also have dragging without worrying about the box select interfering with it.

maybe something like

select: "multiple" // normal selection *without* box selection
select: "dragToSelect" // selection with box selection and all the other features of "multiple" such as key modifiers

Also potentially a warning if dragToSelect and draggable are active at the same time to notify the developer that this combination may lead to unexpected behavior.

Thank you

Currently, the Virtualized DropDownList does not handle the autoWidth property, as describe in the offical client-side API documentation.

It would be beneficial if there is a way to circumvent around this limitation.