I have such a method that converts div with id="pdf-div" to pdf.
Html looks correct, and has all styles that are needed, but result pdf has no font-weight style(that is like font-weight:900) on elements, but font-weight: bold works correct.

kendo.drawing.drawDOM("#pdf-div", {
        scale: scale,
        fitWidth: true,
        paperSize: "A4",
        landscape: isLandscape,
        margin: margin,
        })
        .then(function (group) {
            kendo.drawing.pdf.saveAs(group, fileName, proxyURL, function () {
            //    window.close();
            });
        })

How to create detail-template of grid with MVVM?

This code doesn't work! i can't see the grid

I have requirement where i want to show Day in shift for example 24 days hours can be divided into 3 shift 8 hours each or can 6 hours each.

Against that i wanted to add events in Kendo Scheduler. Each day must have shift as show in below image

in  attached image Shift marked for each day and noted with different color.

Each shift can or can not have events. 

I'm also expecting functionality where events can move across the shifts.

Please suggest

Hello, I have maybe little complicated question.

We are using Kendo Professional sources to build custom version of Kendo. We have custom CSS modifications and some JS components selections.  So when there is a new version, we just get zip with sources from Telerik profile and run modified gulp pipeline. All works fine.

But I'm trying to little more automatic process and I want to use npm package as source. Installed @progress/kendo-ui and used sources in build.

Well, css files seems to be ok, because it is just less compilation. But how to process JS? In downloaded zip file, all JS are for jQuery. But in npm all are as module exports. So I can't use existing gulp tasks to just get custom build.

Is there any way how to use npm and build kendo for pure jQuery use? No Webpack etc.

Hello,

Any help on below much appreciated.

I have two dropdowns using cascading dropdownlist with kendo UI for Asp.net core. Child dropdown depends on parent dropdown. 

When i select a option/item in parent drop down list, child dropdown supposed to enable as parent dropdown list has value selected. But child drop list is NOT enabling ad remain disabled.

Below is my code snippet. 

See below, option "Category_2" selected but still child dropdown "Product" is not enabled.  I tried many solutions, still No luck.

Please help me on this.

How do you inject additional data to a drop down that uses remote data?

I would like to end up with a ProductID=0 and ProductName="Select Choice" as the first option.

  $(document).ready(function() {
                    $("#products").kendoDropDownList({
                        dataTextField: "ProductName",
                        dataValueField: "ProductID",
                        dataSource: {
                            transport: {
                                read: {
                                    dataType: "jsonp",
                                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                                }
                            }
                        }
                    });
                });

Hi,

I just upgraded to Kendo UI 2021 R1 version from 2020 R2.

Now I am trying to implement simple predefined (column) views for my gantt widget.

I have approx. 35 possible columns for my gantt and five "config" arrays which define which columns should be visible and in which order (usual case is 5-10 columns visible at the time). I have five buttons which trigger reorder and show/hide columns methods from gantt list.

I made this to work, but this tends to be quite slow specially if my project has many elements in tree.

Just to reorder elements before showing/hiding them, it takes more than half second (closer to 1 sec) per item to reorder as shown below.

measure reorder 0.9938250000122935
measure reorder 0.84582499996759
measure reorder 0.8179099999833852
measure reorder 0.8124349999707192
measure reorder 0.8222400000086054
measure reorder  0.670899999910034

Then, to show desired columns and hide others it takes additional 0.5 sec per hide/show method. (see below)

measure  show 0.5577549999579787
measure  show 0.43599000002723187
measure  show 0.4385149999288842
measure  show 0.42784000001847744
measure  show 0.44247000000905246

measure hide 0.4437199999811128
measure hide 0.440279999980703
measure hide 0.4344099999871105
measure hide 0.43585499993059784
measure hide 0.4289250000147149
measure hide 0.4369650000007823

This results in quite slow response - changing of views takes between 2 (smaller projects) to 10 seconds (medium/bigger projects).

measure table switch 9.914615000016056

Is there any better way to do this or could I simply prepare view in behind and replace current gantt.list.columns array with new one - because this switching logic is not acceptable from performance of point of view.

UPDATE: I tested further - seems that depth and how much tree is expanded is making a big impact on performance.

Thank you and best regards,

Vedad

Hi Admin and everybody,

As title above, I using datasource to read data (url string) for Kendo Image Editor.

But when read new data with the same name (name = url string), it only retrieves the original preloaded images. But It runs normally when  I open F12 and check to "disable cache"  (image will show you)

Easier to understand, when starting to reload the page, the cache is empty, I load an image url string, it will show the image (Come here, run very well).

Then My Json read another image (it's a different picture) have the same name (name = url string) as the original image. It still shows the original image.

When I "F12" open DevTools then Network and check "Disable cache" (i understand it is not save cache), every time I run it, it's normal. It will show true/new image have the same name as the original image

What happend in my code.???

My code will show you :

var dataSourceGetImageUrlWithDrawing = new kendo.data.DataSource({
        autoSync: true,
        transport: {
            read: function (options) {
                $.ajax({
                    url: "/_layouts/xyz/getimageurl,   //my link API 
                    type: 'GET',
                    cache: false,
                    scriptCharset: "utf8",
                    dataType: "json",
                    data: {
                        models: kendo.stringify(options.data.models)
                    },
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
        },
        schema: {
            data: 'data',
            model: {
                id: "imageUrlWithDrawing"
            }
        },
        change: function (e) {
            var view = dataSourceGetImageUrlWithDrawing.view()[0].imageUrlWithDrawing; //url in json data
            $("#imageEditorWithDrawing").kendoImageEditor({


                imageUrl: view,
                width: "100%",
                height: 650,
                saveAs: {
                    fileName: "image_edited.png"
                }
            });

            var imageEditorWithDrawing = $("#imageEditorWithDrawing").getKendoImageEditor();
            imageEditorWithDrawing.one("imageRendered", function () {
                imageEditorWithDrawing.executeCommand({ command: "ZoomImageEditorCommand", options: imageEditorWithDrawing.getZoomLevel() - 0.2 });
            });
        }
    });

Hi Admin and everybody,

I want call function() when click into color area. 

It will get category and value corresponding to that region. 

Can Kendo Pie Charts do that? 

Hope to get a reply soon from Admn and everybody. Thanks so much.

Code Demo architecture that I want to apply:

<script>
        var data = [
            {
                "source": "Hydro",
                "percentage": 22,
                "explode": true
            },
            {
                "source": "Solar",
                "percentage": 2
            },
            {
                "source": "Nuclear",
                "percentage": 49
            },
            {
                "source": "Wind",
                "percentage": 27
            }
        ];

        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Break-up of Spain Electricity Production for 2008"
                },
                legend: {
                    position: "bottom"
                },
                dataSource: {
                    data: data
                },
                series: [{
                    type: "pie",
                    field: "percentage",
                    categoryField: "source",
                    explodeField: "explode"
                }],
                seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"],
                tooltip: {
                    visible: true,
                    template: "${ category } - ${ value }%"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>

I want to make a grid with excel exporting feature which will export all data.

However, the grid might contain a massive amount of data that makes the export process spends lots of time.

I've found this that shows confirmation before exporting.

https://docs.telerik.com/kendo-ui/knowledge-base/export-the-grid-to-excel-only-after-confirmation

However, the confirmation popup window shows after loading all data (it popup after a few time after I click the export button, so I guess it loads all the data, or the excelExport event is activated after the excel file is well prepared to be exported).

Is it possible to show the confirmation window as soon as I click the export button?

Thanks.