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
After upgrading some of our css are not getting applied. Attaching the screenshots for reference. I'm attaching my sample code.
Below are the stylesheets I'm using<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">
Hi all,
I built the custom JS of Window widget by command below, the window is working but the upper right corner doesn't show action icons (Pin/Minimize/Maximize/Close).
npx gulp custom -c window
From the screenshot attached, you can see there is still finger cursor when mouse over the upper right corner, if I click it, the browser console shows error below:
Uncaught TypeError: /\bk(-svg)?-i(-\w+)+\b/.exec(...) is null
jQuery 16
viewEmail email_template_log_list.php:124
<anonymous> :1
kendo.custom.js:10130:16
However, there is no any problem if I simply use ./dist/js/kendo.ui.core.min.js instead of ./dist/js/kendo.custom.min.js . Is it a bug or I've missed something?
Hi,
as the title says i'm trying to open an alert on the Select Event of a kendoContextMenu, but the alert is shown only after the Select function is completed, is it possible to show an alert as soon as the user clicks on the ContextMenu option (at the start of the Select Event)?
Below the Select Event of my code:
select: function (e) {
alert("Test Alert"); //This one appears only after that the Select function ends, but i'd want it to appear as soon as the select function starts
//MY CODE
}
Thanks in advance,
- Antonio