Hi everyone,

I have a problem with kendo checkbox they work usually fine but on display with zoom scale plus 100% and in a certain range of resolution stop working and they have also a visual bug, attach image for clarify.

no work

work fine

I'm binding a span to a property on my model that ends up being populated with HTML e.g., "Word<br/>break". When it gets rendered, it is rendered just like that, so it displays the <br/> inline in the text with no effect. Is there a way to tell the binding to render it in raw form so it is displayed on two lines?

                <span id="rawSpan" data-bind="text:  rawTextDisplay"></span>

I was hoping to find some option like data-raw-text='true' but apparently my google-fu needs some work. Thanks.

Hello,

I'm trying to implement a tooltip that shows how many and what kind of events the resource has for the day when hovering mouse cursor over resource. I was able to do this in day/week/month views by using a custom group header template but I'm having a hard time trying to implement it in agenda view because I'm not able to make a custom template for resource group header, only event date, event time and event custom templates are available as far as I'm aware. Basically what I need is the ability, when hovering over a resource, to know what resource and what date it is to get the relevant information.

Any help is greatly appreciated! Thank you!

I have tried numerous different ways to get the Kendo UI Pro feed going for my DevOps build pipeline.

My latest is using a powershell script:

 NuGet Sources Add -Name "telerik.com" -Source "https://nuget.telerik.com/v3/index.json" -UserName "your login email" -Password "your password" -StorePasswordInClearText

But I get the following error:

##[error]The nuget command failed with exit code(1) and error(Errors in packages.config projects
    Unable to find version '2022.3.1109' of package 'KendoUIProfessional'.
      https://api.nuget.org/v3/index.json: Package 'KendoUIProfessional.2022.3.1109' is not found on source 'https://api.nuget.org/v3/index.json'.)
##[error]Packages failed to restore

I have a series of Kendo UI Jquery DropDownLists. When one is selected, the change event fires and makes an ajax call to get the next list's options. This works fine when a user manually selects one and then the next, however I have a button that will auto populate all lists with selected options via the .value(123) and .trigger("change") calls. Unfortunately, the trigger event doesn't wait for the change to finish before calling the next set of .value(234) and .trigger("change") events. How can I fix this? 

Here is an example DoJo. In it, note that if you click "Choose Florida"  when "south" is not already selected you get nothing. Also note that the console is logging "Looing for Florida" before it logs "Now I have the states". 

https://dojo.telerik.com/@dojolee/AleWuvAP

to set the class

var hasInvalid = false;
                        // iterate the data items and apply row styles where necessary
                        var dataItems = e.sender.dataSource.view();
                        for (var j = 0; j < dataItems.length; j++) {
                            // Get the value of the discontinued cell from the current dataItem.
                            var isNotValid = dataItems[j].get("isNotValid");

                            // Find the table row that corresponds to the dataItem by using the uid property.
                            var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");
                            // Add the class if the row is discontinued.
                            if (isNotValid) {
                                row.addClass("warning");
                                hasInvalid = true;
                            } else {
                                row.removeClass("warning");
                            }
                        }

the workaround, but could be done the better way?

cancel: function (e) {
                        e.model.isNotValid = (e.model.ardentAgency.id === null
                            || !e.model.employeeFound 
                            || ((e.model.disposition === "" || e.model.disposition === null) && e.model.ardentDisposition.code === null)
                            || ((e.model.status === "" || e.model.status === null) && e.model.ardentStatus.code === null)
                            || ((e.model.businessState !== "" && e.model.businessState !== null) && e.model.ardentBusinessState.code === null)
                            || ((e.model.licenseType === "" || e.model.licenseType === null) && e.model.ardentLicenseType.code === null));                       
                        

                        if (e.model.isNotValid) {
                            var rowModel = e.sender.dataSource.get(e.model.recordId);
                            var modelUID = rowModel.get("uid");
                            var rowselector = "tr[data-uid='" + modelUID + "']";
                            setTimeout(function(){
                                console.log(rowselector);
                                $(rowselector).addClass("warning");
                            }, 500);                            
                        }
                    },

Hallo,
i added a custom tool in the editor and am using it to add horizontal tab.
I'm using inserthtml for this, but after adding the tab span, the previous format isn't retained.

How can I add the span for tab inside the previous format span? Or in other words, how can I continue the previous format?

any ideas?

You can test it like this:
1- press the custom tab tool button to activate the tab key
2- enter a text and make font size eg. 16px
3- then press tab key on keyboard
4- then enter a new text again

formatting is lost

Example:
Tab on/off | Kendo UI Dojo (telerik.com)

function onTabKeyClicked(e){
    if (isTabOn){ 
        e.preventDefault();
              
        editor.exec("inserthtml", { value: '<span style="white-space:pre;tab-size:0.25in;">&#9;</span>' });
    }
}

thank you in advance

Hello,

I ran into an relatively simple issue and I just can not find out how to do it.
I have a Donut Chart which I want to fill with remote data.

function createCharts() {
                var showLabels = $(document).width() > 677;

                $("#overview-chart").kendoChart({
                    theme: "sass",
                    dataSource: {
                        data: [
                            { value: countOrderFinished, type: "New Orders" },
                            { value: 30, type: "Orders in Process" },
                            { value: 180, type: "Finished Orders" },
                        ]
                    },
                    series: [{
                        type: "donut",
                        field: "value",
                        categoryField: "type",
                        startAngle: 70,
                        holeSize: 55
                    }],
                    legend: {
                        position: "bottom"
                    }
                });

                kendo.resize($(".k-grid"));
            }

            $(document).ready(createCharts);
            $(document).bind("kendo:skinChange", createCharts);

            $(window).on("resize", function () {
                kendo.resize($(".k-chart"));
            });

            

How would I manage to fill my Variable countOrderFinished with remote data? I tried this way, but it did not work:

var countOrderFinished = new kendo.data.DataSource({
                type: "json",
                read: {
                    url: "Services/OrderServices.asmx/GetCountOrderFinished",
                    contentType: 'application/json; charset=utf-8',
                    type: "POST"
                },
            });

I think it is a simple solution but I just cant get it.

Thank you for your Help!

When a table is resized in the editor using the inner borders, how can I get the event to determine this has happened?  I can see that the select event is fired, but I don't know how to determine it was from a resize of the inner borders of a table.  I have tried this code:

      select: (e) => {
        if ((e.sender?.columnResizing?._resizable !== null) || (e.sender?.rowResizing?._resizable !== null))
          this.handleEditorTableResizeValueChanged(e.sender.body?.innerHTML);
      }

However, this code does not seem reliable.  Sometimes it works and _resizeable is not null, but other times it is null until the next select event as if there is a delay.  Can you please provide insight to a reliable way to get this resize event?

Thanks,

Bob

Hi, perhaps this is intended functionality for reasons I'm not understanding, but when navigating within a Kendo Scheduler that has certain view types set (particularly, "week" for my purpose), the date that's received in the "navigate" event handler is inconsistent depending on which direction navigation is performed.

When navigating forward, the e.date value is that of the first day of the currently displayed week, as I would expect. However, when navigating backward, the e.date value is the last day of the displayed week. Is there a reason that the day of week for the event date is not the same regardless of which direction navigation is performed?

The console output of this Dojo exhibits the date discrepancy: https://dojo.telerik.com/eMEtuhAQ/2

Thanks!