After upgrading our application from an older version of Kendo to v2022 R1 (301), we discovered a strange problem with the Kendo DatePicker popup calendar. Everything works fine on a desktop web browser but on a mobile phone the month calendar view renders as in the attached image:

Other calendar display modes work correctly. The problem seems to occur on all the phones we have tried (Android, iPhone).

The DatePicker control is instantiated on demand via Jquery function. No special DatePicker features used. Here is a snippet from the rendering function (ownerDiv is a parameter passed to the function):

            var datepickerWrapper = ownerDiv.find('#end-date-wrapper');
            datepickerWrapper.empty();
            datepickerWrapper.append('<input id="chart-end-date" name="chart-end-date" style="width:8em" />');
            datepickerDiv = historyDiv.find('#chart-end-date');
            datepickerDiv.kendoDatePicker({
                animation: false,
                change: function (e) {
                    changeEnddate(e);
                }
            });

The only slightly unusual thing about this is the parent HTML is part of the detail pane for a Kendo grid.  The popup calendar used to work just fine in the old version of Kendo we used to use (version circa 2018).

I'm at a loss. Android Chrome debugger running against a phone executing the DatePicker does not reveal any browser exceptions.

Any thoughts?

Jeff Benson
Senior Developer
New Boundary Technologies, Inc.

We have an existing Kendo Grid inside a Bootstrap Collapse. We are attempted to enable the Drag & Drop functionality on it. If the Collapse starts out visible, it works as expected; if the Collapse starts out collapsed, drag-and-drop does not work. You can drag, but you can't drop.

I attempted to swap out the Bootstrap Collapse for a Kendo ExpansionPanel, but it suffered the same issues: it works if pre-expanded, and not if pre-collapsed.

Dojo for Collapse

Dojo for ExpansionPanel

I don't see this noted in the known limitations. Is there anything we're doing incorrectly, or is this a bug?

Hello,

I currently have multiple comboBoxes in a modal view, once everythig is opened up there is a single x above the comboBox (photo 1) but if i leave the page and come back a new x will appear over the comboBoxes (photo2). 

the code for the html portion is 

<div data-role="view" data-title="New Simulation" data-layout="back" data-model="app.newSim" data-before-show="app.newSim.beforeShow">
     <a href="#NewSimModal" data-rel="modalview" data-role="button">Open Modal</a>

</div>

<div data-role="modalview" id="NewSimModal" style="width: 75%; height: 70%;  border-style:double;" data-modal="false">
<input id="Manufacturer" />
<input id="ProductFam" />
  <input id="CCT" />
  <input id="CRI" />
  <input id="PartNumber" />
  <a data-role="button" data-click="app.newSim.addLED">add LED</a>
</div>

And a piece of the javascript portion is 

$("#CCT").kendoComboBox({
    dataTextField: "CCT",
    dataValueField: "CCT",
    dataSource: app.CCTData,
    index: 0
});

$("#CRI").kendoComboBox({
    dataTextField: "CRI",
    dataValueField: "CRI",
    dataSource: app.CRIData,
    index: 0
});

$("#PartNumber").kendoComboBox({
    dataTextField: "LEDPartNumber",
    dataValueField: "LEDPartNumber",
    //dataSource: app.data
});

I don't know what is the cause of the error. Maybe someone might have a solution with my issue.

Here is my sample data

Here is my code

function mapDataSource2(model, records) {
        let dataSource = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    options.success(records); <------ IF I REMOVE THIS, THE ERROR WILL NOT SHOW
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            autoSync: true,
            schema: {
                model: model,
                total: function (data) {
                    return $(data).length;
                }
            },
            pageSize: 50
        });

        return dataSource;
    }

thanks in advance

Greetings,

I am having difficulty getting Kendo grid to function with a row template and detail template set. I am having the same problem on your example(also broken). https://docs.telerik.com/kendo-ui/controls/grid/templates/row-templates#using-row-templates-with-detail-templates

The difficultly is that the anchor link that is suppose to expand the details does not function when both a rowTemplate and detailTemplate is declared.  I have stumbled on older versions using a rowTemplate and detailTemplate that function successfully in past versions but not in version Kendo UI for JQuery 2023.1.425, should I move back to a older version?

Thank you for your time in this matter!

Hi team

Facing issue related to design. When bind records of around 100 groups then it shows result like this.

I tried with some workaround but still have a few issues. Tried to set the width of the columns using the below code. It increases size but the appointments size not increasing refer to below.

I tried the approach stated on https://www.telerik.com/forums/change-row-height-in-week-and-day-view, but this only allows a minimum row height of around 22 pixels.

I found some old code of mine, which allowed the desired height (about 16 pixels), but the code only works up to version 2021.3

See https://dojo.telerik.com/AvOkisad which uses ".k-scheduler-table td,.k-scheduler-table th { height: 1em }"

How can this be achieved in the latest release, as you can see it doesn't work as shown here https://dojo.telerik.com/iYoCobuG