I have several Multiselect dropdown controls in my web application that have stopped working after users Chrome browser updated to version 115. They work fine on Chrome 114. 

When we click on the control the list does not show up.

When we instantiate both DatePickers and DateTimePickers, there appears to be a phantom image (what looks like an "S") overlaying the calendar and clock icons as shown in the example below:

I've played around with the classes that are associated with the spans in which the icons are located, but am unable to locate the source of the phantom images.  Any ideas would be greatly appreciated!

Here's the code we use to implement both (where $(this) is the specific control :

                $(this).kendoDateTimePicker({
                    format: "MM/dd/yyyy hh:mm:ss tt",
                    value: savedStartDate,
                    min: savedStartDate,
                    change: startDateTimeChangeRange
                });

                if (reloadPreviousModel && previousModel) {
                    $(this).val(previousModel[counter].StartDate);
                }
                $('.datetimeFromcontrol').find('.k-i-calendar').attr('aria-label', 'Select start date');
                $('.datetimeFromcontrol').find('.k-i-clock').attr('aria-label', 'Select start time');
              

We recently upgraded from an older version of Telerik (2017 to 2022) and didn't have this issue in the older version.  Inspecting the elements, I can't find anything that seems out of the ordinary, but have included the generated markup below:

<span class="k-datetimepicker k-input datetimeTocontrol k-input-solid k-input-md k-rounded-md" style="">
<input aria-label="Proxy end date" class="datetimeTocontrol k-input-inner" data-savedenddate="" data-val="true" data-val-date="The field EndDate must be a date." data-val-required="The EndDate field is required." id="datetimepickerTo_row1" name="PreferencesList[3].Controls[0].ProxyList[0].EndDate" title="Proxy end date" type="text" value="1/1/0001 12:00:00 AM" data-role="datetimepicker" role="combobox" aria-expanded="false" aria-haspopup="grid" aria-controls="datetimepickerTo_row1_dateview datetimepickerTo_row1_timeview" autocomplete="off">
<button tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" unselectable="on">
<span class="k-icon k-i-clock k-button-icon" aria-label="Select end time" title="Select proxy end time">Select proxy end time</span>
</button>
<button unselectable="on" tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the date view" type="button">
<span class="k-icon k-i-calendar k-button-icon" aria-label="Select end date" title="Select proxy end date">Select proxy end date</span>
</button>
</span>

Hello,

I have a non-modal kendo window which can be dragged outside of the viewport. When such window regains focus the whole content of the document body is moved upwards, despite that the body has set CSS property overflow to hidden, width: 100%, height: 100%.

How can this be fixed?

BR

Dušan

This example not works as expected:

https://dojo.telerik.com/ESAQEsip/2

It should only select: Red and Green.

Isn't it?

It's the same if I write the value of the input field by hand: value="Red"

Docs:

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked#binding-lists-of-checkboxes-to-arrays

Many thanks

Using the demo (https://docs.telerik.com/kendo-ui/knowledge-base/timeline-using-range-bars) as a base, each has a unique ID.  I have adjusted the data in the datasource to only use two different colors.  The demo turns off the legend.  But I need a legend to indicate what the colors on my chart mean.  Turning on the legend (for both the demo and for mine) has two separate issues.

1) The legend contains a separate entry for each individual bar rather than combining them (either by category field or (prefered) the color).

2) The color in the legend doesn't match the color of the bar.

Here is the creation of my chart:

   $("#LDP_chart").kendoChart({
        dataSource: {
            data: cdata.results,
            group: {
                field: "id",
                dir: "asc"
            }
        },
        series: [{
            type: "rangeBar",
            fromField: "from",
            toField: "to",
            categoryField: "key",
            name: "#: group.items[0].seriesName #",
            colorField: "color",
            spacing: -1
        }],
        valueAxis: {
            name: "value",
            min: new Date(startDate + " 00:00").getTime() / 1000,
            max: new Date(endDate + " 23:59:59").getTime() / 1000,
            majorUnit: 24 * 60 * 60,
            majorGridLines: {
                color: "black"
            },
            labels: {
              template: "#= kendo.toString(new Date(value * 1000), 'ddd MM/dd') #",
              rotation: "auto"
            }
        },
        categoryAxis: {
            name: "category"
        },
        legend: {
          visible: true,
          position: 'bottom'
        },
    });

Google isn't helping me here.  I did find an article saying #2 isn't possible because the legend isn't using colorField parameter of the datasource, but that was pretty dated.

Hi,

I am new to your controls, and was wondering if there is a Grid example, or another control that enabled the user to  create something like this:

Regards,

George C. Geschwend

I have a kendo dropdown tree and when I set the datasource after initialization via .setDataSource([...]) it triggers the change event. How do I prevent this from happening? I am setting the datasource with a local javascript array of objects. I saw in another forum post to set the value to an empty array. I tried that but it still triggered the on change event. I'm doing this because I have 2 dropdowntrees (one in a flyout panel and one in the header) that I need to keep in sync.

Here is a dojo demonstrating my issue: 
https://dojo.telerik.com/iKoBOVIk/30

I'm trying to create a kendo menu that stays inside a bootstrap responsive grid. I don't want to set an explicit width, but allow users to scroll when items don't fit in the screen width.

Example: https://dojo.telerik.com/EJojofaD/6

When I try to click on a sub menu item, it closes too soon. When I remove the 'scrollable' property, clicking on child items works, but the menu overflows its containers.

How can I have a menu that stays inside a bootstrap grid column without specifying a width explicitly, and still be able to?

I have a kendo grid with custom control. Kendo Grid Export CSV is not working for me. Source code is given below. Can anyone help me.

Code running without error but CSV is not generating ( chrome).

1. kendo grid.
    .Name("PayrollReport")
    .ToolBar(toolbar =>
    {
        toolbar.Excel().HtmlAttributes(new { @class = "toolbar-field" });
        toolbar.Custom()
                        .Text("Export To CSV")
                        .HtmlAttributes(new { id = "exportCSV" });

jquerry

  $("#PayrollReport").on("click", "#exportCSV", function (e) {

            var batchid = $("#ddlbatchidamexrpt").data("kendoDropDownList").value();
            var status = $("#ddlpayrollstatus").data("kendoDropDownList").value();
            //debugger;
              $.ajax({
                type: "POST",
                url: "/Home/ExportServer",
                  data: JSON.stringify({ 'Batchid': batchid, 'Status': status }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //alert("Saved Successfully");
                },
                failure: function (response) {
                    //alert("Error Occured");
                }
              });
            e.preventDefault();



        }); 

Home controller