Context: There is an item that illustrates the issue here: https://www.telerik.com/forums/kendo-datepicker-value-not-populated-after-refresh-firefox-only

In Firefox, when using the asp-for tag helper to bind a c# DateTime field to an input element, then calling kendoDatePicker() on that element, the control fails to populate on a soft-refresh (F5). Upon reloading using F5 in Firefox, the input's type is set to datetime-local, and the input 's control variation is changed to the default date picker.  Then, the Kendo UI DatePicker is initialized with a blank input which normally has a type of text. 

Example project and video of issue are attached.

This is the pertinent code (also happens in latest version of Kendo as well):

    public class IndexViewModel
    {
        public DateTime DateAsDateTime { get; set; }
    }

        public IActionResult Index()
        {
            return View(new IndexViewModel { DateAsDateTime = DateTime.Today });
        }

@model IndexViewModel

<input id="dtDate" asp-for="@Model.DateAsDateTime">

<script type="text/javascript">
    $(document).ready(function () {
        $("#dtDate").kendoDatePicker();
    });
</script>

Hi Team,

the SignalR demos are spread out across multiple products and it is hard to get a single cohesive demo that I'm looking for.

1. After fresh installation Telerik UI for ASP.NET Core PURCHASED 2024.1.319 (MAT 19, 2004) Start: Demos - Telerik UI for ASP.NET Core 2024 Q1 -> Grid -> SignalR Binding -> hundreds of JS errors -> not working.
   see pic. p101.PNG
2. https://github.com/telerik/ui-for-aspnet-core-examples Telerik.Examples.Mvc
   I replace telerik local trial nuget packages with purchased and I add kendo-ui-license.js
   I can compile and run the app, but when I change data in one browser -> no changes in other browsers, i.e no SignalR
3. https://github.com/telerik/ui-for-aspnet-mvc-examples signalR-bound-grid not compilable
4. https://github.com/telerik/kendo-ui-demos-service/tree/master/signalr-hubs
   This is probably a joke? edited 6 years ago, no Kendo UI, and this can't even start to run
5. https://www.telerik.com/support/code-library/binding-to-signalr
   download SignalRLocalHub.zip -> compile -> run -> everything (delete, edit, add) works excellently. but this is .Net Framework 4.5! and ancient package references and in addition uses Entity Data Model (EDM).
   
   

Request

Please create an example that works like 5) without problems and hundreds of JS errors, but with APS.NET Core (current net8) + SignalR (current @microsoft/signalr 8.0.0) + Kendo UI for jQuery Grid - Entity Data Model (EDM) ? 

Bug report

Setting an empty string value when using an MVVM ColorPicker throws an error

Reproduction of the problem

1. Open the following dojo.
2. Notice that the ColorPicker produces an error when the value from the Observable object is set to an empty string.

Current behavior

Setting an empty string through the Observable object throws an error within the console.

Expected/desired behavior

Setting an empty string through the Observable object should not throw an error within the console.

Environment

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

Feature Request/Enhancement to allow series.tooltip configuration for bubble charts in chart initialization.

Since my company is a public entity we are required by law to follow ADA accessibility on our web apps. We are currently using ASP.NET Core MVC and Kendo UI for jQuery. To meet the ADA requirements I have been going through our Kendo Charts and configuring the tooltips to meet the ADA color blindness contrast ratio standard of 3:1. 

It came to my attention that I cannot configure the bubble chart's series.tooltip the same way that I can a donut or pie chart. Since I am required to use a certain color of red in my chart and the default tooltip.color is black the contrast for small text does not meet the WCAG AA standard for text under 17 pt. 

My feature request/enhancement is to allow charts to all have the same initialization process for things such as series.tooltip to allow easy config to meet ADA standards.

When a column is set to sticky in a grid and the user clicks edit and then cancel, that column become unsticky for that row only. This happened when I upgraded from 2022 to 2024 so the bug was created somewhere in there. To reproduce, see this dojo: 
https://dojo.telerik.com/@dojolee/evOPeBey

1. Shrink the right side of the screen until it is pretty small (about 700px)
2. Click Run and make sure there is a horizontal scroll. If not, shrink the right and click run again.
3. Scroll and notice that the first column sticks
4. Click edit on the first row
5. Click cancel
6. Scroll and notice that the first row no longer has a sticky column.

I want to set the mask-character in the TimeDurationPicker.

Display as "08:__" or "__:15" is ugly and I want to display this as "08:00" or "00:15"

I just upgraded from V2021 to V2024. Now, in the grid's filter menu, I have buttons with icons for filter and clear. I don't want the icons. I know I can target them with CSS and do a display: none, but there should be a setting to prevent showing them in the first place. I'm thinking this should be both a global setting for the default and a local setting in the widget to override.

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();
    };

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();
},

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

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

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

Bug report

This is a continuation of the following issue.

Probably related to:
https://source.chromium.org/chromium/chromium/src/+/62d86ddddc8fad157321e42e2acdb18b6ebba951

Reproduction of the problem

1. Open the following Dojo in a browser running under the Chromium engine.
2. Notice that there is a an console error which showcases sporadically, indicating the following.

Current behavior

The animation container's aria-hidden attribute causes a console error in Chrome and Edge.

Expected/desired behavior

The animation container's aria-hidden attribute should not cause a console error in Chrome and Edge.

Environment

• Kendo UI version: 2024.4.1112
• Browser: [Chrome, Edge]

Example: https://runner.telerik.io/fullscreen/yypoqSea

This example is based on the example from the docs with `navigatable: true` and enough data that the user needs to scroll in order to see the bottom row.

On Chrome on macOS, the filter menu cannot be used when `navigatable: true` and "Tap to click" is enabled in the macOS Trackpad settings. When clicking on the filter icon, the menu disappears very quickly (see screen recording). As a workaround, setting `navigatable` to false seems to resolve the problem. The same issue does not seem to occur on Safari, however, there is still odd behavior with the scrolling.

For some reason, screen size, resolution, and window settings impact the ability to reproduce the issue. The most reliable way for me to reproduce the issue was with Chrome in full screen on a 16-inch MacBook (13-inch works too) with the bookmarks bar showing and no external displays connected. Hiding the bookmarks bar or not using full screen seems to make it more difficult to reproduce.

In my application, I have grids with dozens of hidden fields. 

It would be beneficial if I could filter the available columns similar to what's available in the Windows Forms column chooser:

It will be really useful if we could include a new 'filtering mode' in which operators like 'and' or 'or' are allowed in the filtering input box.

For instance, using the "doesnotcontain" with 'march or july or september' will allow users to exclude multiple conditions in a single filter

On Kendo's grid Custom Command, there's a bug with "text" object of "command". The bug is we can't use space in the "text" object, not even %20.
This is because the "text" object is appended on class attribute of the command button.