Hello, sorry for the, maybe, dumb question, but I have a problem I can't solve.

I'm trying to update a DataSource transport data related on the change event of another input, here is the code:

                        var dp = new Date();
			var innerValue = 0;				
	function initPagamento(isNew) {

		dp = new Date();
		innerValue = 0;
		
		let ds = new kendo.data.DataSource({
				transport: {
					read: {
					url: "myURL",
					method: "post",
					data: {
					  data_movimento: dp.toLocaleDateString("it-IT"),
					  macro_categoria: innerValue
					},
					dataType: "json"
					}
				}
		});
		
		
		let datapagamento = $("#datapagamento").kendoDatePicker({
            format: "dd/MM/yyyy",
			change: function(x){
				$(".k-svg-i-save").parent("button").removeClass("k-disabled");
				dp = this.value();
				
				macro_categoria.dataSource.read();
				macro_categoria.trigger("change");
				
			}			
        }).data("kendoDatePicker");	
		//setInterval(function(){console.log(dp)}, 1000);
		
		let categoria =	$("#categoria").kendoDropDownList({
                filter: "contains",
				autoBind: true,
                optionLabel: "Seleziona una Categoria...",
 				dataTextField: "nome",
          		dataValueField: "id",
				dataSource: null,
			 change: function(x){
				 $(".k-svg-i-save").parent("button").removeClass("k-disabled");
			 }
		 }).data("kendoDropDownList");

		let macro_categoria = $("#macro_categoria").kendoDropDownList({
							filter: "contains",
							autoBind: true,
							optionLabel: "Seleziona una Macro Categoria...",
							dataTextField: "nome",
							dataValueField: "id",
			dataSource: {
				transport: {
					read: {
					url: "anotherUrl",
					method: "post",
					data: {
					  entrata: "0",
					  data: dp,
					},
					dataType: "json"
					}
				}
			},
			change: function(x) {

				$(".k-svg-i-save").parent("button").removeClass("k-disabled");

				innerValue = this.value();
				if(!isNullOrEmpty(innerValue) && (innerValue > 0 && innerValue != "0")) {
					categoria.dataSource = ds
					ds.read();
				} else {
					categoria.dataSource = null
				}
			}
			}).data("kendoDropDownList");
}

the two variables I want to change are dp and innerValue, so that when I change the datepicker value, dp (the date variable) is updated to the selected date, then the datasource (ds) has to call the transport > read uri sending via post the new dp value. Same thing with innerValue (this is the value from a kendoDropDownList, but I think the problem is the same...

it seems that the problem is here:

[...]
change: function(x){
				$(".k-svg-i-save").parent("button").removeClass("k-disabled");
				dp = this.value();
				
				macro_categoria.dataSource.read();
				macro_categoria.trigger("change");
				
			}
[...]

where dp value is updated locally (maybe redeclared locally inside the change() event), but not in the entire scope, as I want.

Please help me! If you need further infos let me know.

Thank you.

P.S.: I think that if I destroy and redeclare the DataSource instead of changing dp and innerValue values, it shall work, but I am slightly sure that there must be a simpler way...

I have a local array of between 2  and 2000+ strings that I would like to virtualize. For some reason, when I add the valueMapper to the virtual function when there are only 4 items in the array, it causes the user to not be able to click on anything.

Here is a dojo showing what I tried. You can click on a letter and nothing will happen.

https://dojo.telerik.com/oojEQyxf

I'm getting a WAVE Error on the Kendo Dropdownlist Filter input. Is there any way to correct this?

The error says: 

A form control does not have a corresponding label.

This is the code being flagged:

<div class="k-list-filter"><span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid" type="text" autocomplete="off"><span class="k-icon k-font-icon k-i-search k-input-icon"></span>

<input class="k-input-inner" type="text" placeholder="Filter" role="searchbox" aria-haspopup="listbox" aria-autocomplete="list" tabindex="0" aria-disabled="false" aria-readonly="false" aria-controls="ddLanguageMenu_listbox">

</span></div>

When I select initialize a kendoDropDownTree with checkboxes set to true, I experience all kinds of odd behavior visually. Inspecting the code shows that it is now a MultiSelectTree and not a DropDownTree yet there is no documentation and little support for this somewhat hidden component. I would actually prefer to have a MultiSelectTree without the checkboxes similar to a multiselect but with the grouping. 

One issue, is that it does not respect the global settings for the corner radius of the box. 

kendo.ui["DropDownTree"].fn.options["rounded"] = "none";

kendo.ui["MultiSelect"].fn.options["rounded"] = "none";

These seem to do nothing. When I guessed at "MultiSelectTree", I got a console error. 

Another issue is that the UI looks very different from the regular multiselect and it doesn't seem to apply the .k-selected class as expected. When I check a box, the aria-checked is true but the k-selected class is not applied, this makes the item remain white rather than getting the blue background like it does in a regular multi-select. Can we get some consistency there?

Expanding an element does not change the height of the k-child-animation-container. It does show on the screen, but any styling targeting the container will not work because the container does not expand to fit the content. 

I made my dropdown arrows 7px wider (k-treeview-toggle). Now the autoWidth makes the list 7px wider than the input element.

Hi,

My CSP settings on the server-side:

Response.AddHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' https://code.jquery.com 'nonce-kendoInlineScript' https://kendo.cdn.telerik.com; connect-src 'self'; img-src 'self' 'unsafe-inline' blob: data: gap:; style-src 'self' 'unsafe-inline' https://kendo.cdn.telerik.com; font-src 'self' data:;");

My CSP settings on the front-end:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-kendoInlineScript' https://kendo.cdn.telerik.com https://code.jquery.com/;" />

And I get the following error:

Now of course, when I add 'unsafe-eval' in the CSP settings/config, the errors will be gone but it's not ideal since at the end of the day, it's still a security risk however low.

BTW, I'm using CDN to load the JQuery and Kendo js:

I would greatly appreciate if you can give some assistance.

Thanks,

JT

We tried to apply the arabic conversion logic to the page. We have control like textbox, dropdown, date and grids with labels. The labels of all controls was changed without any issue. The grid column header caption and the data was also changed.

But the value inside the textbox, dropdown was not changed. Any guidance to resolve this issue.

I used the below code to enable the Google Translation in page.

function googleTranslateElementInit() {
                 new google.translate.TranslateElement({
                    pageLanguage: 'en',
                    includedLanguages: 'ar,en',
                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                 }, 'google_translate_element');
            }

I herewith shared a video for your reference.

Hi Team,

We extensively use Kendo UI jQuery in our application for various front-end activities. Recently, we attempted to upgrade our Kendo UI version from 2021 to 2024 and encountered issues with comboboxes, dropdowns, and lists.

Many of our controls rely on dynamic data that changes based on multiple factors and requirements. This functionality is critical to our application. However, post-upgrade, we have observed unexpected behavior, as illustrated in the attached screenshots.

To help replicate the issue, we have created a sample in the Kendo Dojo, which can be accessed via the following link:
https://dojo.telerik.com/WyKWJZpa

Please note, The reported behavior is seen in combobox2 on change of combobox1

This behavior was not present in the previous version, and the upgrade seems to have introduced this issue. Since this implementation pattern is widespread in our application, modifying the code everywhere is not a feasible option.

We kindly request your assistance in identifying a quick and efficient resolution to this issue.

Thank you in advance for your support.