There is an issue with the .k-sorted class being applied to the last column in the grid when the actual column is not visible. It also is not updating the k-sorted when a sort is applied after the grid was created. 

This seems to be an issue in the latest release if the column sorted on is hidden, the last column in the grid gets the class. I also noticed that sorting a column does not apply the k-sorted class to the correct column: https://dojo.telerik.com/@dojolee/eFIbaSUn 

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

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

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

Expose a Cron-Like Scheduler following an example found here https://crontab.guru/.

I'm seeing an error in the Chrome console when the filter menu is clicked on in a kendo grid: https://demos.telerik.com/kendo-ui/grid/filter-menu-customization

You can see the example in the link above by opening your console in Chrome and clicking on the filter button. 

Here is the error:

Blocked aria-hidden on a <a> 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. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

When the browser is zoomed, the TabStrip scroll right arrow does not change to disabled when there are no more tabs to scroll into view. 

It looks like the problem is in kendo.tabstrip.js _toggleScrollButtons function, the following line:

that._scrollNextButton.toggleClass('k-disabled', scrollLeft === ul[0].scrollWidth - ul[0].offsetWidth);

When the browser is zoomed, kendo.scrollLeft(ul) returns a decimal value.  https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft has the warning: "On systems using display scaling, scrollLeft may give you a decimal value."

scrollWidth and offsetWidth are rounded to integer.

My workaround is to override the _toggleScrollButtons function and do the following:

that._scrollNextButton.toggleClass('k-disabled', Math.abs(scrollLeft - (ul[0].scrollWidth - ul[0].offsetWidth)) <= 1);

Bug Title: Filter controls are not accessible via keyboard under 'Security Groups and Service Accounts' screen.

Severity: Sev1 (Critical)

Test Environment: OS: Windows 11 22H2
OS Build: 23620.1000

Repro steps:
1.Open https://codepen.io/oneID/pen/LYaGREP
2.Activate populate grid.
3.Try navigating to Column filter controls using keyboard.
4.Observe whether filter controls are accessible via keyboard under 'Security Groups and Service Accounts' screen or not.

Actual Result:
Keyboard focus does not remain on same control after pressing 'ESC' key to close the opened ‘Filter’ popup present under 'Security Group' screen.

Expected Result:
Keyboard focus should remain on same control after pressing 'ESC' key to close the opened ‘Filter’ popup present under 'Security Group' screen.

Bug report

Inserting sheets in the Spreadsheet component is not working as expected.

Reproduction of the problem

1. Open this Dojo example https://dojo.telerik.com/EyEzOcER/8
2. Click on the Load New Sheet Button
3. Click again
4. Open the Browser console to see the error:

Current behavior

Error is thrown.

Expected/desired behavior

Error to not be persistent.

Environment

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

i've tried to apply autoFitColumn method for treelist accordingly to the documentation, https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/methods/autofitcolumn#autofitcolumn , and seems it assumes only "simple" columns structure, i.e. no nested headers.

Currently, the Grid provides autoFitColumn and autoFitColumns methods, while the Treelist provides built-in only the autoFitColumn. I would like to have built-in support for the TreeList components, so the behavior to be equivalent to the Grid - example.

dataBound: function(e) {
        e.sender.autoFitColumns();
},

I am running into an issue with allowing copy/paste of dates into the filter and cell input fields. Currently, the date fields have validation to support MM/dd/yyyy, and users of the app may be trying to copy dates in that are MM/dd/yy. I would expect Kendo to auto format the date to MM/dd/yyyy after the paste happens, or at least allow support for that, but it doesn't seem to happen.

In the cell, when putting in MM/dd/yy, a validation message appears saying the date is invalid, and there doesn't appear to be a way to override that. In the filter, when putting in MM/dd/yy and submitting the filter, it doesn't stick and completely ignores the date put in.

Steps to reproduce (filter):

1. Copy a date formatted as MM/dd/yy
2. Paste it into a date column filter
3. Attempt to apply filter
4. Notice that the filter is ignored

Steps to reproduce (cell edit):

1. Copy a date formatted as MM/dd/yy
2. Paste it into a cell datepicker field
3. Notice the validation flags it as an invalid date

Bug report

When typing in the search input a value that does not match any item of the Filemanager's content view, while a subfolder is selected, the expand arrow disappears.

Reproduction of the problem

1. Open this Dojo: https://dojo.telerik.com/AmOGOdut
2. Select documents and create a subfolder
3. Select the newly created folder and create another subfolder
4. Type "a" or other value that does not match
5. See the arrow disappearing

Current behavior

The expand arrow disappears.

Expected/desired behavior

The arrow should not disappear and the search to work correctly.

Environment

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

Hello!

I was recommended to submit a feature request for this in this feature request. I also commented on a similar forum question.

Dynamically adding/removing tiles via the setOptions method works, however in my case I'm using the containers/tiles to display other widgets (like charts and data grids) in a dashboard. Re-initializing the TileLayout via setOptions forces me to recreate my data widgets, some of which are loading fairly large datasets.

I've been able to work around this using the internal source code for the kendoUI TileLayout, which I dislike doing and am always just one update away from my solution breaking. So far it works - I can add/remove tiles without destroying and re-initializing. I did run into some trouble with resizing and reordering, but I think I've gotten around that.

It seems a common usage for the TileLayout is to display dashboards/remote data. I do think implementing a solution to add/remove tiles without re-initializing would be beneficial for many developers using this widget.

Thank you,

-Alexa

/**
     * At the time of this writing, the only kosher way to dynamically add/remove tiles to a kendoUI TileLayout is
     * to use the `setOptions` method and pushing/slicing the `containers` array. However, doing this destroys the
     * TileLayout and re-initializes it. We would have to re-initialize all the data widgets and submit requests to
     * the server all over again. So... I lifted this from the KendoUI TileLayout source code and modified it to
     * suit our needs.
     * It seems to work, but it just one update away from breaking. I guess I like living on the edge.
     *
     * @deprecated
     * @param options {Object} the kendo.ui.TileLayout `containers` item configuration
     * @param idx {Number} the index of the tile to add
     * @param kendoTileLayout {kendo.ui.TileLayout} the kendo tile layout instance
     */
    const addContainer = (options, idx, kendoTileLayout) => {
        const body = $(`<div></div>`).addClass('k-tilelayout-item-body k-card-body');
        const headerSettings = options.header;
        const id = kendo.guid();

        const container = $(`<div></div>`)
            .addClass('k-tilelayout-item k-card')
            .attr({
                id: id,
                role: 'listitem',
                'aria-keyshortcuts': 'Enter',
            });

        if (headerSettings && (headerSettings.template || headerSettings.text)) {
            const header = $('<div></div>').addClass('k-tilelayout-item-header k-card-header');
            const headerContent = headerSettings.text ? `<div class="k-card-title">${headerSettings.text}</div>` : null;

            if (kendoTileLayout.options.reorderable) {
                header.addClass('k-cursor-move');
            }

            header.append(headerContent || kendo.template(headerSettings.template)({}));
            header.appendTo(container);
        }

        body.append(kendo.template(options.bodyTemplate)({}));
        body.appendTo(container);
        container.appendTo(kendoTileLayout.element);

        kendoTileLayout._addContainer(container, options, idx, id);
    };

    /**
     * @deprecated
     * This also is using KendoUI internal source code. If/when the folks at Telerik decide to implement a different
     * solution for dynamically adding/removing tiles, that should be used instead and this should be removed.
     *
     * @param widgetId {Number} the id of the widget to remove
     * @param kendoTileLayout {kendo.ui.TileLayout} the kendo tile layout instance
     */
    const removeContainer = (widgetId, kendoTileLayout) => {
        const widgetRegex = new RegExp(`${widgetId}`);
        const matchedContainer = kendoTileLayout.options.containers.find(container => container.bodyTemplate.match(widgetRegex));

        const containerGuid = matchedContainer.id;
        const containerItem = kendoTileLayout.itemsMap[containerGuid];
        const containerItemIdx = kendoTileLayout.items.indexOf(containerItem);

        kendoTileLayout.options.containers.splice(containerItemIdx, 1);
        delete kendoTileLayout.itemsMap[containerGuid];
        kendoTileLayout.items.splice(containerItemIdx, 1);

        $(`#widget-${widgetId}`).closest('.k-tilelayout-item.k-card').remove();
        kendoTileLayout._updateContainers();

        // I've got a bad feeling about this.
        kendoTileLayout.element.off('mousemove'); // after removing a container, the resize handles weren't working.
        kendoTileLayout.resizable.destroy();
        kendoTileLayout.element.find('.k-resize-handle').remove();
        kendoTileLayout.resizeHandle = null;
        kendoTileLayout._resizable();
    };