Hello,

I am trying to build a grid that has a combobox in it that should be filled from an Ajax request. But based on the demo on the page, I am not being able to determine where the combobox is filled.

I appreciate any help on the matter, if possible with a code sample so that I can understand it better.

Regards,

Alexandre

If I include a certain kedo ui theme like default or nova or uniform in my asp.net mvc view/web page that uses kendo ui, then what would be the quickest way to apply the kendo ui theme to everything on the asp.net mvc view i.e. to the textboxes, buttons etc.?

The asp.net mvc view/web page is always applying boostrap theme to the textboxes, buttons etc, but I want to change it so that the kendo ui theme gets automatically applied to these textboxes, buttons etc.

I know that I could execute jquery code on document  ready event that looks for all elements in the web page and then changes each element to a corresponding kendo ui element (example code as below), but this would involve quite a bit of coding in jquery.

 $(document).ready(function () {
        let allElements = document.querySelectorAll("button,input,textarea");
        console.log("allElements length is " + allElements.length);
        for (let i=0; i < allElements.length; i++) {
            let emt  = allElements[i];
            emt.className = "";
            console.log("element tag name is " + emt.tagName);
             if (emt.tagName === "BUTTON") {
                 $(emt).kendoButton();
            } else if (emt.tagName === "INPUT" && (emt.getAttribute("type") === "text" || emt.getAttribute("type") === "password")) {
                 $(emt).kendoTextBox();
            } else  if (emt.tagName === "TEXTAREA" ) {
                 $(emt).kendoTextArea();
             }
        }
        $(".jumbotron").kendoResponsivePanel({breakpoint:769});
        });

All 

I have upgraded our Kendo UI spreadsheet  jQuery to 2024.3.80, however it is causing strange UI issues. 

The UI Loads at a huge zoom level (e.g a single icon taking over the entire screen etc...) so it is unusable

If I swap the stylesheet back to 8.2.1.tabs and all sorts look very strange

My imports are as  below 

I want some of my date time pickers to have a width of 140px.

 https://dojo.telerik.com/@mortenma71/eSAhOyaN/9

It works when I set the width using inline style:
<input id="datepicker" value="10/10/2011" style="width:140px;" />

It doesn't work when I set the width using a CSS class.

Without !important the CSS class seem to have no effect:
<style>.width-140 { width: 140px; }</style>
<input id="datepicker2" value="10/10/2011" class="width-140" />

With !important the CSS class effects the width, however the svg-picker-icon doesn't show:
<style>.width-140-important { width: 140px !important; }</style>
<input id="datepicker3" value="10/10/2011" class="width-140-important" />

I only observed the problem now; I'm sure it worked in an earlier kendo/CSS version.

How can I set the width using a CSS class and retain the svg-picker icon?

/Morten

I have a request for a group of dropdown lists with complex filtering in the lists. The issue is that they don't want any previously selected options to be erased when filtering. My actual list can have thousands of options but for the sake of example I'm going to make it shorter:
Let's say the lists are called "favorite fruit 1" and "favorite fruit 2". Someone already chose "Banana" in favorite fruit 1. Now they want to filter the options by "Color: Red" and "Fiber: above 4g". They want the selected option for favorite fruit 1 to remain "Banana" but the list of options available for favorite fruit 1 and 2 to both contain only fibrous red fruits. (Again, I over simplified it for example. This makes more sense when you have thousands of options). Is there a way to do this?

The layout would be something like this:

<select id="color"></select>
<select id="fiber"></select>

<select id="fruit1" value="1"></select> <!--Bananas is selected-->
<select id="fruit2"></select>

[
  {
    fruitId: 1,
    fruitName: "Banana",
    color: "Yellow",
    fiber: "below 4g",
    potassium: "high"
  },
  {
    fruitId: 2,
    fruitName: "Apple",
    color: "Red",
    fiber: "above 4g",
    potassium: "low"
  },
  ...
]

Hi Team,

When a drodpdownlist is loading data, the loading icon (k-input-loading-icon) has a wrong height causing the widget height to change too, resulting in a weird "pumping effect" in the form.

To reproduce, simply look at the dropdownlist demo page :

https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist?autoRun=true&theme=bootstrap-main

Any workaround?

Regards,

Laurent.

I looked at the demo at https://demos.telerik.com/kendo-ui/menu/orientation.

The code for this demo included the following line of code.

• Why is this line of code necessary ?
• What is the need of passing the parameter  $("#myMenu .k-link") to the close method? I thought we could simply call the close method without any parameters and that would close the menu.

 menu.data("kendoMenu").close($("#myMenu .k-link"));

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. I have a spreadsheet control that can have ~7000 rows per sheet with formatting used. I need to know where to start the  kendo.ui.progress component and where to end it. I tried to put the start in the selectSheet sheet Event handler:

document.getElementById('generateText').innerHTML = "Loading large page...";
$("#popUpProgressWindow").data("kendoWindow").open();
kendo.ui.progress($("#popUpProgressWindow"), true);

...but I couldn't figure out where to put the matching "hide" or:

$("#popUpProgressWindow").data("kendoWindow").close();
kendo.ui.progress($("#popUpProgressWindow"), false);

In addition, it seems like the progress component won't actually start until render event. (which is after everything has rendered).. and by then the sheet seems to be populated already.

I also tried creating an onClick event handler to start the progress component. No luck.

Thanks again for your help and patience ^__^

George

Hello,

I am using KENDOUI jQuery PDFViewer. PDFViewer essentially uses Mozilla's pdf.js library, and I was using version 2.5.207 of pdf.js. However, there are security vulnerabilities in this version (https://github.com/mozilla/pdf.js/security/advisories/GHSA-wgrm-67xf-hhpq). Mozilla has started using pdf.mjs and pdf.worker.mjs with version 4.x. How can I use these versions with PDFViewer?

How can I set the window.pdfjsLib.GlobalWorkerOptions.workerSrc assignment?