columns:
    [
        {
            field: "OrganizationName"//,
                                //width: "35%"
                            },
        {
            field: "Amount"//,
                                //width: "65%"
                            }
    ],

We have a page with many spark lines, for example:

As the user hovers over the chart we have a toot tip display as you can see in the example above.  The user can click any of the charts at the point that they want to drill into more detail.  For example, in the example above the user has moved the mouse over the Corrective Work Orders spark line and then to the 16th week of 2022.  The tooltip is telling the user there are 55 work orders in that week.

The problem: The click event is not always in line with the tool tip.  In the above example what actually loaded was the data for week 17 (not 16).  It's a very specific issue in that if you click in the top part of the chart it will always load correctly but if you click in the bottom 30% or so of the chart it seems quirky, sometimes it will load the correct week, sometimes the wrong one.  You can see in the diagram the mouse cursor is behind the highlighter line at week 17 (I've circled that line in red), but the tool tip shows week 16.  We could tell users "make sure you click in a perfectly vertical line to the highlighter line" but users do what user do and will expect the tooltip to be accurate to the detail they see when they click.  The problem with this we give the wrong information and something bad happens.  I tried setting absolute heights and widths because it was previously even worse and this got me to the 70% right vs 30% wrong situation I have now but I'd like to fix it.

Has anyone run into this previously and found a solution?  Can anyone recommend any course of action to narrow down the issue further?

hi,

I am trying to implement the following example

https://docs.telerik.com/kendo-ui/api/javascript/ui/orgchart/configuration/editable.fields

But it doesn't seem to work even on the website

Am I right?

I expect that after the implementation I will not be able to edit the fields shown in the edit popup.

Hi everybody.

Is it possible in JQuery KendoUpload to change the binary data before sending it to the server? Specifically pictures. We need to reduce the size of the image before sending it to the server. Does Kendo offer image resizing? Ideally in the upload?

Hi, I'm trying to insert a grid in the background of a diagram and have found some suggestions on how to do it, but the problem with these solutions is that when I try to remove a specific element, the other element disappears.

Suggested solution: image in Kendo UI for jQuery | Telerik Forums or Untitled | Kendo UI Dojo (telerik.com)

The problem is this insert 

diagram.mainLayer.drawingElement.insertAt(grid, 0)

 As far as I understand, this breaks the sequence and removes the previous element.

Does anyone know how to avoid this behavior or another solution to insert grid?

PS: The grid is only needed for positioning.

We have a Telerik Map object on a view, and the map displays several markers which is working perfectly. Each marker has a tooltip configured to "LoadContentFromAjax", so when the user hovers over the marker (for the first time), the API is queried and the correct data is returned.

The problem is that the Markers Tooltip data is only loaded the first time the user hovers over the icon after the page loads. once that first hover has occurred, the existing data is displayed until the page is reloaded.

I have attempted to refresh the data using the marker tooltips "Show" event, but so far i have had no luck.

This is my onShow event that is called anytime the Marker is hovered over

function tooltip_OnShow(e) {
    console.log(e);
    e.sender.marker.dataItem.refresh();
}

the "e.sender.marker.dataItem.refresh()" just throws an exception. I have tried several different iterations, with no luck so far.

Hi,  What about kml/kmz support for Kendo Maps?

Thank's  marc.

I had implemented this example: https://dojo.telerik.com/omIxeDUx

When I'm using kendo scheduler with view "Agenda", I need to separate events on same date by group, so I'm using the resources + group option.

With that said, I'm having problem when I need to get the selected event on change event trigger. But for some reason, depending on which event's row you select, the e.events[0] attribute is returning another event, which is not the selected one.

I'm trying to find what I'm doing wrong, the example alerts to window the meetingID of e.events[0] when change event triggers. If you see by the description of event, the ID is different.

Can anyone help me with this problem?

EDIT:

If you are experiencing the same problem, here is a workaround.  I'd notice that I can get the selected item by the UID of the selected row, and just ignore the e.events. Here is the following implementation: https://dojo.telerik.com/omIxeDUx/7 (notice that depending on the version you using, the "class" of selected item may be "k-state-selected" instead of "k-selected")

change: function (e) {
    var selected = document.querySelector(".k-scheduler-content tr.k-selected");
    if (selected) {
        var data = $(selected).find("[data-uid]").data();
        var selectedItem = this.dataSource.getByUid(data.uid);
        alert("Kendo event: " + e.events[0].meetingID + "\nSelected event: " + selectedItem.meetingID);
    }
}

Best regards,

I'm specifically working with the scheduler, however I believe this applies to any MVVM items.

When double click an event in the scheduler, my editor template is rendered and Kendo binds this to the event being edited. This happens for "free" as I do not do this. Consider this element:

<div data-container-for="title">
   <input type="text" data-role="textbox" name="title" required="required" data-bind="value:title" />
</div>

The binding to title works perfectly fine and I see my value.

Next, my event has a CategoryId which tags the event and what it is. This is a property I have added. Let me point out that if I replace title above with CategoryId, the integer value of the category displays. So this value is known and part of the bound object. However, I am using a very custom templated dropdown for this.

<div data-container-for="CategoryId">
   <input id="CategoryId" data-bind="value: CategoryId, source: categoriesDataSource" data-role="dropdownlist" data-auto-width="true"
          data-header-template="categorySearchHeaderTemplate" data-template="categorySearchTemplate" data-text-field="Description"
          data-value-field="Id" data-auto-bind="false" />
</div>

Hopefully this makes sense. My categories have an Id and a Description. There is a list of them. The event has a CategoryId which holds the value of what category is selected. However this element has its own datasource! Note the data-bind.

// This datasource is created and then kendo.bind() is called to bind to my dropdown
var categoriesViewModel = kendo.observable({
   categoriesDataSource: new kendo.data.DataSource({
      data: jsonSerializedCategories
   })
});

This drop down works perfectly fine for templates and for the elements in it. See screenshot below. But the value binding does not work. This is obviously because I had to set my own datasource on it. The value is not found in that datasource; it's in the one Kendo generated and applied to the popup. What is the proper way to set this up? The value is in one datasource and the elements here are in the other one I created.