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.

Hi, 

We are looking to get tabs with menu list or dropdown kind think in it , with items in that , Below i have attached image of our requirement,

Kindly provide solution for above requirement  ,

 Thanks,

Mike

Hi, 

We currently have a Kendo Editor with paste cleanup set as:

  pasteCleanup: {
all: false,
css: true,
custom: null,
keepNewLines: false,
msAllFormatting: true,
msConvertLists: true,
msTags: true,
none: false,
span: true

We've noticed an issue in that when copy and pasting underlined text within the control (not from external to the control), the underline is removed. I can only imagine that this is because we're stripping our SPANs with the above option. Our issue is that we can't really set this SPAN option to off as we explicitly do no want complex span elements being saved. Is there a workaround for this?

Thank you

I have Asp.net website , and telerik controls on it.  On page load I get ConvertFontToSpanfilter error as a alert. On clicking few times 'OK' on alert i am able to process normal.

I am not able to figure it out why it's happening . As i know we can disable the filter but is there any specific reason it's happening?

I have a kendo ui jquery datasource that I'm using to populate my grid. I have added a custom toggle switch to show only active accounts or show all accounts. The switch works by calling the following function on change: 

    $(".my-page").on("change", "#myTableStatusToggle", function () {
        if ($("#myTableStatusToggle:checked").length > 0) {
            dataSource.filter({});
        } else {
            dataSource.filter({ field: "Status", operator: "eq", value: "Active" });
        }
    });

I have configured a grid and have set up the pager
pageable: {
                        refresh: true,
                        pageSizes: false,
                        buttonCount: 5,
                    },
This works everywhere else but in one grid where it shows a dropdown with page numbers  

as soon as I open dev tools it changes 

How can I get rid of that ?