I am trying to add a dropdown to a popup window title bar. I modified the basic usage demo to do this and here is a dojo. When you click the button to open the window, a dropdown is added to the title bar. However, the dropdown is unresponsive -- when I click on it, the dropdown list does not appear and I cannot change the selection either by mouse or keyboard.

How do I make the dropdown responsive to clicks or the keyboard, like one would expect a dropdown to respond?

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.

I have a Kendo window:

$("#depDialog").kendoWindow({
    width: "450px",
    modal: true,
    title: "Add Dependency",
    content: {
        template: $('#javascriptTemplate').html()
    },
    visible: false,
    resizable: false,
    actions: [
        { text: "Cancel" },
        { text: "Add", primary: true }
    ]
});

I also have a template:

<script id="javascriptTemplate" type="text/x-kendo-template">
     <div class="row mt-2">
        <div class="col">
            @(Html.Kendo().DropDownList()
                .Name("dep_new")
                .DataTextField("Name")
                .DataValueField("Id")
                .BindTo((System.Collections.IEnumerable)(Model.Applications.ToList()))
                .SelectedIndex(0)
                .ToClientTemplate()
            )
        </div>
        <div class="col">
            @(Html.Kendo().TextBox()
                .Name("dep_notes_new")
                .HtmlAttributes(new { style = "height: 38px;" })
                .ToClientTemplate()
            )
        </div>
    </div>
</script>

I have an empty div to load the template:

<div id="depDialog"></div>

I tried using a dialog (hence the naming) but I couldn't get it to work.  Now I'm using a window, and I'm getting the following TS error:

kendo.all.js:96132  Uncaught TypeError: e.toLowerCase is not a function
    at kendo.all.js:96132:1
    at Function.map (jquery-3.7.0.min.js:2:3967)
    at init._actions (kendo.all.js:96130:1)
    at init.title (kendo.all.js:96540:1)
    at new init (kendo.all.js:95806:1)
    at HTMLDivElement.<anonymous> (kendo.all.js:3741:1)
    at Function.each (jquery-3.7.0.min.js:2:3129)
    at ce.fn.init.each (jquery-3.7.0.min.js:2:1594)
    at e.fn.<computed> [as kendoWindow] (kendo.all.js:3740:1)
    at init.editOnShow (index.ts:287:29)

The error line points to the kendoWindow initialization.  Thoughts?

Hi,

how to set focus to kendo TextBox widget when a kendo window opens?

I tried the following but no luck. The widget is selected and focused for a fraction of second and then selection and focus is magically removed.

   $(document).ready(function () {
       setTimeout(function () { $("#position").data("kendoTextBox").focus() }, 200)
   });

Hi,

I was using jQuery Window Loading Content with AJAX and was able to open multiple Window, however after I updated Kendo UI, I can only open two Window now, is there any problem? Do I need to pay now to use it? I thought Window is a widget then there is no usage limitation on it.

Thank you for answering.

Ming

Hi support team,

when setting the content using the setOptions method we only see a white window. Why is not loading?

 var window = $('#kendo-window')
            
         	if(!window.data("kendoWindow")) {
            window.kendoWindow({})
          }
          
         window.data("kendoWindow").setOptions({
                 title: title,
           			 content: "../content/web/window/ajax/ajaxContent1.html",
           			 modal: true,
                 actions: ["maximize","close"],
                 position: {
                     top: "10",
                     left: "10"
                 },
                 width: width,
                 minHeight: 900,
               	 scrollable: true,
                 animation: {
                     open: {
                         effects: "fade:in",
                         duration: 500
                     },
                     close: {
                         effects: "fade:out",
                         duration: 500
                     }
                 }
             })
         
         window.data("kendoWindow").center().open()

Hello,

We have upgraded our Kendo jQuery package. The previous version was 2019.1.220 and our latest version is 2023.3.1114. We observed that

• Some classes were changed in the new js say buttons in the kendo grid.
• Some CSS files are removed. (Assuming it is not compatible with the current version.

After upgrading some of our css are not getting applied. Attaching the screenshots for reference. I'm attaching my sample code.

<link href="{{ URL::asset('css/boostrap_v4_alpha.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ URL::asset('kendo/styles/material-main.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ URL::asset('kendo/styles/font-icons/index.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ URL::asset('kendo/styles/bootstrap-main.css') }}" rel="stylesheet" type="text/css">