Telerik Forums
Kendo UI for jQuery Forum
18 answers
778 views
My mobile app build with kendo ui failed user acceptance testing because the app is "slow", "sluggish" or "sometimes stops working". After some research I found out that the app quite often fails to react when the user clicks a button: the click event does not fire when the user does not tap "the right way". Since my app aims at inexperienced users, this is a serious issue.

The problem can easily be reproduced in the button/events demo, especially when viewed on a mobile device:

http://demos.telerik.com/kendo-ui/mobile/button/events.html

Just between touching and releasing move the finger or mouse a little bit to the side or up/down, and the click event does not fire.

What's worse (and why i would consider this an error) is that the user gets a visual feedback that the button was pressed --- but nothing happens!

It's kind of like the opposite of the problem in this thread: http://www.telerik.com/forums/button-click-event-firing-when-trying-to-scroll where someone is (ab?)using oversized buttons.

Is there a way to set the sensibility of how much wiggle is allowed until a touch isn't a click anymore? Any other solution?

I am using kendoui.complete.2013.3.1119. The behaviour was tested on iOS6 & iOS 7 (iPad).

TIA Marco
Petyo
Telerik team
 answered on 04 Mar 2015
0 answers
28 views
Hello,

A defect is preventing the sparkline tooltips from showing in the official release (v. 2013.3.1119) .
This issue is fixed in internal build v. 2013.3.1121 and later.

Recommended temporary workarounds:
  • Disable shared tooltips. This will not negatively affect Sparklines with only one series.

    $("#hum-log").kendoSparkline({
        type: "area",
        data: [71, 70, 69],
        tooltip: {
            format: "{0} %",
            shared: false
        }
    });
  • Set series names on Sparklines with more than one series:

        $("#sparkline").kendoSparkline({
          type: "area",
          series: [{
            name: "Series one",
            data: [71, 70, 69, 68, 65, 60, 55, 55, 50, 52]
          }, {
            name: "Series two",
            data: [73, 72, 72, 71, 68, 63, 57, 58, 53, 55]
          }],
          tooltip: {
            format: "{0} %"
          }
        });
Apologies for the caused inconvenience.
Kendo UI
Top achievements
Rank 1
 asked on 21 Nov 2013
0 answers
1 view

Hello,

How can I get the text and the value of the button pressed?  Right now it only appears to return the value which is not what I want the user to see.  Like in this example it should say option 1 when you click on option 1 and not show value 1 but pass it back for use in the code.

https://dojo.telerik.com/OkoCIxIT

How can I get this to work properly?

Thanks -Tim

Tim Larson
Top achievements
Rank 1
 asked on 11 May 2021
0 answers
3 views

Hi Admin and Everybody,

As the title, Currently I have read all data from the folder to the corresponding items of folder. But data children ( see picture 1.png ), can not call the function.

When I clicked delete from folder name, it work and can log name

But when clicked delete from items inside folder, it cannot call function, not error in console debug.

My code will show you:


$("#filemanager").kendoFileManager({
    dataSource: {
        transport: {
            read: function (options) {
                var that = this;

                $.ajax({
                    url: "/_layouts/15/xxx/API/ApiHandler.ashx?tbl=like&func=getalllibrary",
                    dataType: "json",
                    method: "POST",
                    data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
            delete: function(options) {
               //Test call function delete when click delete

               var text = options.data.name;
               console.log(text);

               //result: can log folder name but cannot log items name inside folder
               
            },
        },
        schema: {
            data: 'data',
            model: {

               id: 'path',  

               children: 'items'  
            }
        }
    },
    toolbar: {
        items: [
            { name: "custom", type: "button", text: "Create", command: "MyCustomCommandCreate" },
            { name: "custom", type: "button", text: "Upload", command: "MyCustomCommandUpload" },
            { name: "sortDirection" },
            { name: "sortField" },
            { name: "changeView" },
            { name: "spacer" },
            { name: "details" },
            { name: "search" }
        ]
    },
    contextMenu: {
        items: [
            { name: "rename" },
            { name: "delete" },
            { name: "custom", text: "Detect", command: "MyCustomCommandDetect", spriteCssClass: "k-icon k-i-info" }
        ]
    },
    draggable: true,
    resizable: true
});

My json data has a structure similar to that of demo from docs Kendo ( https://docs.telerik.com/kendo-ui/api/javascript/ui/filemanager/configuration/datasource ) - EXAMPLE

Image show you my Json Data inside url link: ( 1.png )

Looking forward to hearing from Admin and everybody soon, thanks
 
Stark
Top achievements
Rank 1
Iron
Iron
 updated question on 11 May 2021
1 answer
3 views

Hi,

we want to persist the width of resizable columns, only.

We are aware of this article (https://demos.telerik.com/aspnet-mvc/grid/persist-state) and the getOptions() and setOptions() functions, but these get/set other options like sort and page.

We only want to persist the column width. Is there a supported way of doing this?

Kind regards.

Georgi Denchev
Telerik team
 answered on 11 May 2021
1 answer
4 views

In demo Pie Chart From kendo https://demos.telerik.com/kendo-ui/pie-charts/index

data: is created manual, but I want to read data from a url of type Json. 

Help me. Thanks.

                    data: [{
                        category: "Asia",
                        value: 53.8,
                        color: "#9de219"
                    },{
                        category: "Europe",
                        value: 16.1,
                        color: "#90cc38"
                    },{
                        category: "Latin America",
                        value: 11.3,
                        color: "#068c35"
                    },{
                        category: "Africa",
                        value: 9.6,
                        color: "#006634"
                    },{
                        category: "Middle East",
                        value: 5.2,
                        color: "#004d38"
                    },{
                        category: "North America",
                        value: 3.6,
                        color: "#033939"
                    }]
    <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
    
    <script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    position: "bottom",
                    text: "Share of Internet Population Growth, 2007 - 2012"
                },
                legend: {
                    visible: false
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    labels: {
                        visible: true,
                        background: "transparent",
                        template: "#= category #: \n #= value#%"
                    }
                },
                series: [{
                    type: "pie",
                    startAngle: 150,
                    data: [{
                        category: "Asia",
                        value: 53.8,
                        color: "#9de219"
                    },{
                        category: "Europe",
                        value: 16.1,
                        color: "#90cc38"
                    },{
                        category: "Latin America",
                        value: 11.3,
                        color: "#068c35"
                    },{
                        category: "Africa",
                        value: 9.6,
                        color: "#006634"
                    },{
                        category: "Middle East",
                        value: 5.2,
                        color: "#004d38"
                    },{
                        category: "North America",
                        value: 3.6,
                        color: "#033939"
                    }]
                }],
                tooltip: {
                    visible: true,
                    format: "{0}%"
                }
            });
        }

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

Georgi Denchev
Telerik team
 answered on 11 May 2021
1 answer
4 views
Hi, I've been trying for quite some time now to expand the newly created row. So basically when I hit "add new" and hit update after it updates and inserts, then expand that new row.
Georgi Denchev
Telerik team
 answered on 11 May 2021
2 answers
6 views

Hi, Using the demo site https://demos.telerik.com/kendo-ui/scheduler/import-export-ical I have added a all day event that expands 2 days, and then exported that data, when I import the data it changes to a 1  day event,  is this a ical.js issue?, 

 

 

export and then import i get

 

Thanks

Kulwant
Top achievements
Rank 1
Iron
 answered on 11 May 2021
1 answer
7 views

This is demo code about filemanage: https://demos.telerik.com/kendo-ui/filemanager/index


<script>
        $("#filemanager").kendoFileManager({
            dataSource: {
                schema: kendo.data.schemas.filemanager,
                transport: {
                    read: {
                        url: "/kendo-ui/service/FileManager/Read",
                        method: "POST"
                    },
                    create: {
                        url: "/kendo-ui/service/FileManager/Create",
                        method: "POST"
                    },
                    update: {
                        url: "/kendo-ui/service/FileManager/Update",
                        method: "POST"
                    },
                    destroy: {
                        url: "/kendo-ui/service/FileManager/Destroy",
                        method: "POST"
                    }
                }
            },
            uploadUrl: "/kendo-ui/service/FileManager/Upload",
            toolbar: {
                items: [
                    { name: "createFolder" },
                    { name: "upload" },
                    { name: "sortDirection" },
                    { name: "sortField" },
                    { name: "changeView" },
                    { name: "spacer" },
                    { name: "details" },
                    { name: "search" }
                ]
            },
            contextMenu: {
                items: [
                    { name: "rename" },
                    { name: "delete" }
                ]
            },
            draggable: true,
            resizable: true
        });

        $(document).ready(function () {
            var filemanager = $("#filemanager").getKendoFileManager();

            filemanager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
            filemanager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();
        })
    </script>

I still don't understand, right at the items position there is nothing related to "tranport: read" but still can read the data of the items. So where is that data retrieved through?

This is link read data but it only of Folder: https://demos.telerik.com/kendo-ui/service/FileManager/Read

Can Admins explain in depth for me??

I am working on a project using filemanager and I am currently spending a lot of time. Hope Admins can help me.

THis is my Project code:


$("#filemanager").kendoFileManager({
            
        dataSource: {
            transport: {
                read: function (options) {
                    var that = this;
                    $.ajax({
                        url: "/_layouts/15/xxx/API/ApiHandler.ashx?tbl=like&func=getalllibrary",
                        
                        cache: false,
                        scriptCharset: "utf8",
                        dataType: "json",
                        method: "POST",
                        data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                        success: function (result) {
                            options.success(result);
                        }
                    });
                },
                
                destroy: function (options) {
                    
                    console.log("Here Hello"); //[error] not show log when click delete => cannot call function destroy
                }
            },
            schema: {
                data: 'data',
            }
        },
        toolbar: {
            items: [
                { name: "custom", type: "button", text: "Create", command: "MyCustomCommandCreate" },
                { name: "custom", type: "button", text: "Upload", command: "MyCustomCommandUpload" },
                { name: "sortDirection" },
                { name: "sortField" },
                { name: "changeView" },
                { name: "spacer" },
                { name: "details" },
                { name: "search" }
            ]
        },
        contextMenu: {
            items: [
                { name: "rename" },
                { name: "delete" },
                { name: "custom", text: "Detect", command: "MyCustomCommandDetect", spriteCssClass: "k-icon k-i-info" }
            ]
        },
        draggable: true,
        resizable: true
    });

    var filemanager = $("#filemanager").getKendoFileManager();

    filemanager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
    filemanager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();

    var filemanagerNS = kendo.ui.filemanager;

    filemanagerNS.commands.MyCustomCommandUpload = filemanagerNS.FileManagerCommand.extend({
        exec: function () {
            myWindow.data("kendoWindow").open();
            
        }
    });

    filemanagerNS.commands.MyCustomCommandCreate = filemanagerNS.FileManagerCommand.extend({
        exec: function () {
            myWindowAddLibrary.data("kendoWindow").open();
            
        }
    });

Click Folder not red hover and Console show Error: ( image1.png )

My json data in Url transport: read: ( image2.png )

Hope the admin can show me how to show the item corresponding to my folder

Neli
Telerik team
 answered on 11 May 2021
1 answer
4 views

Is there a way to allow user to edit connections path by interacting with points? Or is possible to make the connections does not passing through shapes? 

 

The "editable" option just allows user to change the start and end of connection, not the path, I need to allow user to change the path because Kendo Diagram does not has an option to prevent connections of passing through shapes.

Example: https://dojo.telerik.com/@rodrigo_x10/AGExALED

 

You can see that connection between 1 and 3 is passing through Shape 2, which is a bad visualization of data.

 

 

Georgi Denchev
Telerik team
 answered on 11 May 2021