Test Environment:
     Browser: Edge Anaheim 107.0.1387.2 (Official build) dev (64-bit

     OS: OS version (OS Build 25203.1000)

     Screen reader: Narrator

     URL: WPG - Home

     Credentials: V- ID

     Screen Reader: Narrator

Is important to send email enable the user to insert hyperlinks to different parts of the same image, without cut the image and assign links to individual's parts, because this affect visualization.

This example show example but is require that end user can do it in the user interface. 

<img src="some-image.jpg" usemap="#image_map">

<map name="image_map">
  <area alt="Google" title="Google" href="https://www.google.com/" coords="142,1131,493,1239" shape="rect">
  <area alt="Microsoft" title="Microsoft" href="https://www.microsoft.com/es-co" coords="608,1133,957,1239" shape="rect">
</map>

The ability to have finer control over the zoom level would be useful, i.e. with each click of the zoom in / out button the ability to zoom slightly less. The levels currently available zoom too far with each step, so when plotting many points on the map I'm unable to auto zoom in as far as I'd like (while keeping all markers in the visible area), because the next zoom level in cannot fit all of the markers into the viewable map area.

Create a setting that will enable/disable the drag to select when Multiple Selection is enabled.

Current behavior

The Selectable widget which has drag selection functionality is always turned on, but in some cases it conflicts with other logic like drag and drop.

Expected/desired behavior

Create a setting to enable/disable drag-selection.

Environment

• Kendo UI version: all

The Kendo UI ListView widget supports setting the selected items via the select method. Up to version 2022.2.802, calling select() triggered a change event. This is no longer the case.

You can see the different behaviors in these two DOJOS: 2022.2.802 vs 2023.1.117 (the item gets selected after a second to make sure the dataSource has finished loading).

Currently, the element from which a widget is initialized is wrapped in an additional parent element in some cases ("Editors" widgets for example). I would like to have the possibility to add an id to the parent as this way styling the widget will be much easier. 

For example, with the current implementation of the TextArea I need to use specific CSS selectors to style the component (Dojo). It will be much easier if there is an option to add an id to the wrapping parent.

Bug report

When a Kendo widget is initialized in a navigatable Drawer and the user clicks in the intiialized component an error Uncaught TypeError: Cannot read properties of undefined (reading 'attr') is thrown

Reproduction of the problem

1. Open the Dojo example - https://dojo.telerik.com/@NeliKondova/ePOgoMek
2. Click in the MultiSelect and observe the console

Current behavior

An error: Uncaught TypeError: Cannot read properties of undefined (reading 'attr') is thrown

Expected/desired behavior

No error should be trhown even if the 'drawer-item' attribute is missing

The issue is a regression introduced with 2021 R1 - 2021.1.119 version

Environment

• Kendo UI version: 2022.3.1109
• Browser: [all]

Describe the bug
Kendo ComboBox and DropDownList controls are conflicting with kendo PanelBar.
If ComboBox or DropDownList control is included inside a kendo PanelBar, the the dropdown elements of both controls are detached from the combobox or dropdownlist inputs respectively.

To reproduce
In order to reproduce the behaviour:

1. Create a kendo PanelBar with one item
2. In the previously created panel's bar item create a list
3. Add input value in one of the list items
4. Add ComboBox or DropDownList kendo control to the input
5. Both controls will have detached the dropdown elements
6. You can run the piece of code in dojo to reproduce the issue (https://dojo.telerik.com/OZoXiPEy)

Expected behavior
ComboBox or DropDownList controls should work correctly and the dropdown elements of controls should not be detached.

I would love it if I could add a header to the PDF when using drawTabularData. I'd like to add some header information (e.g. some text above the table) describing what the PDF contains. Ideally this would repeat on each page of the PDF.

For context, I'm using drawTabularData to export data from a Grid component to PDF in a way that supports horizontal page splitting (column splitting).

Require an Editor method to provide the cursor position as an integer representing the offset of the current cursor position from the start of the document with respect to the text displayed in the editor.

For example consider an editor displaying 'This is text content'. The underlying html will be <p><span>This is text content</span></p>. When cursor is placed after 'text', I would like to obtain the cursor position as 12 i.e. the offset based on the text displayed irrespective of the underlying html.

I would like a control to accept durations in the format HH:MM, and persist as a number minutes (or maybe optionally fractional hours).  Something similar was suggested here (not by me):

http://www.telerik.com/forums/mobile-time-duration-picker

I have a time keeping application where user need to be able to enter summarize duration amounts on their timesheets, such as 8 hours of Holiday time (entered as "8:00").  It doesn't make sense to enter this as a time range.

We're accomplishing it now with a textbox, a masking library, and a bunch of fragile JS code, but I'd like a control that is natively build for this.

Currently it is not possible to provide a selected date format template when the scheduler is shown in mobile "phone" mode.

   views: [
                {
                    type: "day", minorTickCount: MinorTickCount,
                    selectedDateFormat: "{0:D}",
                    selectedDateFormatMobile: "{0:D}", 
                    dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'ddd d-M')#</strong>")
                },
                ]

Bug report

Horizontal and vertical lines appear in the merged Spreadsheet cells when they are disabled.

** Possible workaround could be to apply the following CSS:

      #spreadsheet > div.k-spreadsheet-view > div.k-spreadsheet-fixed-container > div.k-spreadsheet-pane > div.k-spreadsheet-data > div.k-state-disabled {
        opacity: 1;
        color: #a3a3a3;
      }

Reproduction of the problem

1. Open this Dojo and run it
2. There are is a horizontal line above the cell with text "Merged DISABLED cell and there is a horizontal line above". There is a vertical line inside the cell with text "Two cells are merged horizontally and the result cell is disabled. There is a vertical line that should not appear"

Current behavior

When Spreadsheet cells are merged and the result cell is disabled, there are horizontal or vertical lines that appear inside the merged cell.

Expected/desired behavior

No lines should appear inside the merged cells, no matter if they are enabled or disabled.

Environment

• Kendo UI version: 2020.3.1021
• jQuery version: x.y
• Browser: [all]

Hi Team,

The pre-2022 versions allowed sizing via parent divs, which was a very flexible solution. The newer versions seem much worse in this regard. Also, if it's going to require altering the internal styles, these need to be fully documented, which I don't believe they are.

Also, updated components only have three available sizes, which don't go small enough.  It would be nice to either have more sizes or documentation to customize my own style.

Will future updates be addressing these shortcomings?

This is very much critical to our continued use of the framework, as I create a lot of data-heavy pages which need to be fitted onto the screen.

Thank you!

Apparently the dark theme we are using adds the glass.png to tabs.  Great.  Looks good.  However it also seems to be applying to the area inside the tab as well.
It's a little hard to see on most of our popups with tabs but it's visible through gaps in the controls.  I have removed the top layer in this image so you can see it.  Underneath is the html for one of the pages affected so you can see we aren't setting them up incorrectly.  This is the kendo black theme.

@using DispatchCrude.Models;
@model OriginEditModel

@* NOTE: This script section must be at the top of the page for the pop-up to function properly. It cannot be moved to the bottom of the page. *@
<div>
    @Html.HiddenFor(x => x.ID)
    <ul class="gridErrors NullValidator"></ul>
    @(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Items(tabstrip =>
        {
            tabstrip.Add().Text("General").Selected(true).Content(@<text>
                <div class="popup-editor-container">
                    <div class="popup-editor-column-sm">
                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.TimeZoneID).IsRequired()
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.TimeZoneID, new { htmlAttributes = new { style = "width:120px; height:30px;" } })
                        </div>
                    </div>
                    <div class="popup-editor-column-sm">
                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.RegionID).IsRequired()
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.RegionID)
                        </div>

                        <script>
                            function filterDestination() {
                                var dataItem = getGridEditRowModel();
                                let shipperIds = (dataItem.Products != null) ? dataItem.Products.map(x => x.ID).join(',') : -1;
                                let productIds = (dataItem.Shippers != null) ? dataItem.Shippers.map(x => x.ID).join(',') : -1;

                                return {
                                    "regionid": dataItem.RegionID || -1,
                                    "terminalid": dataItem.TerminalID || -1,
                                    "productids": (shipperIds != '') ? shipperIds : '-1',
                                    "shipperids": (productIds != '') ? productIds : '-1'
                                }
                            }
                        </script>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.PreferredDestinationID, new { table = "GetPreferredDestinations", controller = "origins", filter = "filterDestination()" })
                        </div>

                    </div>
                </div>
                </text>);
            tabstrip.Add().Text("Oil Field").Content(@<text>
                <div class="popup-editor-container">
                    <div class="popup-editor-column-sm">

                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.LeaseName).IsRequired()
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.LeaseName)
                        </div>
                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.LegalDescription)
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.LegalDescription)
                        </div>

                    </div>
                </div>
                </text>);
            tabstrip.Add().Text("GPS").Content(@<text>
                <div>
                    <div class="popup-editor-column-lg">
                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.GeoFenceRadiusMeters)
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.GeoFenceRadiusMeters, new { htmlAttributes = new { style = "" } })
                        </div>
                    </div>
                </div>
                </text>);
        })
    )
</div>
<script>
    $("#RegionID,#TerminalID").on("change", function () { refreshDestinations(); });
</script>

I have some client events for creating/updating events.

They are currently the same and call the same method:

Due to JSON serialization, I end up with dates being serialized as ticks when sent to the client. This function converts these ticks to a proper JavaScript Date() object. The code works perfectly fine.

We run into an error on random occasions. This happens maybe once a day per user. It is not repeatable but it was fixable. This code is from the Kendo.all.js file. The highlighted lines were added:

99% of the time things work fine. But sometimes this convertData() method is called before the client methods are called. Perhaps a threading or AJAX or promise issue?  Perhaps there is one scenario where the client method is not being called? The real bug here is that convertData() can sometimes get called before the client’s event where I would have corrected by dates. This is another case where it is tough to upgrade Kendo versions because I need to port this as minified JavaScript to the custom downloaded minified file.

Here is the text from the browser’s F12 window when we hit this error (If I have not applied the fix above):

kendo?v=Brdc2jM0hzOFDq3Kj04CDAYP5xcGXPDm3x-vN4slHho1:1 Uncaught TypeError: f.start.getTimezoneOffset is not a function
    at ai (kendo?v=Brdc2jM0hzOFDq3Kj04CDAYP5xcGXPDm3x-vN4slHho1:1:1182628)
    at init.data (kendo?v=Brdc2jM0hzOFDq3Kj04CDAYP5xcGXPDm3x-vN4slHho1:1:1182352)
    at init._readData (kendo?v=Brdc2jM0hzOFDq3Kj04CDAYP5xcGXPDm3x-vN4slHho1:1:96753)
    at init._push (kendo?v=Brdc2jM0hzOFDq3Kj04CDAYP5xcGXPDm3x-vN4slHho1:1:90345)
    at init._pushUpdate (kendo?v=Brdc2jM0hzOFDq3Kj04CDAYP5xcGXPDm3x-vN4slHho1:1:90237)
    at init.e (jquery?v=9zl6bqYAmbr9FSUZX0T1VSNbWQ5Gc01X9-RaVvSk-7A1:1:95021)
    at init.a (signalr?v=4OffKgJP3BKl-a0HMCu8SoFYj-iqmWy-1sbyLwYhtvk1:1:36810)
    at init.dispatch (jquery?v=9zl6bqYAmbr9FSUZX0T1VSNbWQ5Gc01X9-RaVvSk-7A1:1:55579)
    at y.handle (jquery?v=9zl6bqYAmbr9FSUZX0T1VSNbWQ5Gc01X9-RaVvSk-7A1:1:53581)
    at Object.trigger (jquery?v=9zl6bqYAmbr9FSUZX0T1VSNbWQ5Gc01X9-RaVvSk-7A1:1:78599)

In my application, when a user changes their view date on the scheduler, there are two other schedulers on the other two tabs of the tab strip that are not visible. The dates here get changed too. This happens in a navigate event. They end up in a broken state from this. It seems the issue is that they are not visible so rendering is not happening. I found a hacky way to work around this. I am adding a newDate property and a needRefresh property to the scheduler. When a tab is activated, the scheduler in that tab is checked. If it needs a refresh, it is refreshed. If it has a new date, that is also set.

In the scheduler component, create a new event. Select monthly for the repeat. If you are using the Bootstrap theme the day will be cut off. The problem lies in the kendo.common-bootstrap.css file.

Overriding to 10em works. The same issue exists on the demo site today which I assume is running the current version (https://demos.telerik.com/kendo-ui/scheduler/index?autoRun=true&theme=bootstrap-main):