Questions on Kendo UI for jQuery Forum

18 answers

762 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

Button (Mobile)

answered on 04 Mar 2015

0 answers

26 views

Important: Tooltips not visible in Q3'13 release

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.

Sparkline

asked on 21 Nov 2013

0 answers

1 view

Allows user to edit connections path or prevent connections passing though shape

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.

Diagram

asked on 06 May 2021

0 answers

4 views

How items: [...] work . And How can the folder read the items corresponding to each folder when the URL has only the data of the Folder.

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

FileManager

asked on 06 May 2021

2 answers

5 views

How to update gantt task assignments directly on datasource

Using the code below I can successfully update a gantt task (I'm using a custom edit screen + custom update function). It fires off my transport update handler and axios does the update just fine.

  var task = ganttdataSource1.at(0);
  ganttdatasource1.update(task, { title: "New Title" });
  ganttdatasource1.sync()

What I can't figure out is how to update the resource assignments, doing as below seems to ignore the 'resources' property so when in the transport update handler 'resources' just has the ones that were originally set,

  var task = ganttdataSource1.at(0);
  ganttdatasource1.update(task, { 
        title: "New Title", 
        resources: {
            taskId: 111,
            resourceId: 222,
            value: 5,
        } 
    });

  ganttdatasource1.sync()

Gantt

answered on 06 May 2021

0 answers

2 views

Column editor with combobox/autocompete shows undefined

Hello. I am using a custom column editor as shown in your example : https://docs.telerik.com/kendo-ui/knowledge-base/custom-editor-autocomplete. Even in the example that you provided, if I type a value that is not in the list, the focus out event will display "undefined" and will not allow me to select another value. Is there a fix for this situation? Thank you in advance :)

I attached a screenshot from your working example.

updated question on 06 May 2021

0 answers

2 views

Import/Expoting all day iCal events that expand x days

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

Scheduler

asked on 06 May 2021

1 answer

10 views

default value in dropdownlist

I have this

$('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        suggest: true,
        select: function(e) {
            personSource.setDirty();
        },
        dataSource: rows,
    });
////////////////
whenever I load the page the dropdownlist is not automatically filled with the first value of the list (default value).
I have to click the mouse or do something and it gets filled.

if I put it like this
alert('hello');
$('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        suggest: true,
        select: function(e) {
            personSource.setDirty();
        },
        dataSource: rows,
    });

after I click the alert the default value is filled.
How can I make it fill the default without needing a popup?

DropDownList

answered on 06 May 2021

1 answer

9 views

Spreadsheet not loading data when number is formatted as text

Hi,

When loading the attached file, the data is not completely loaded in spreadsheet. https://dojo.telerik.com/AjOWOPEG

PFA the file as well.

Is there any specific formatting that spreadsheet allows or some restricted formatting. Please suggest.

Spreadsheet

answered on 06 May 2021

2 answers

11 views

Is there a way to keep connectors visible even without hover the diagram shape?

Get the example diagram in https://dojo.telerik.com/oNOJidug from example in Diagram Connections page reference

With the basic configuration:

$("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        content: {
            text: "Step 1"
        },
        stroke: {
            color: "#33ccff"
        }
      }
    ]
  });

My question is, is there a way to keep the connectors of both shapes visible without need to keep mouse hover?

I want this:

instead of:

Diagram

answered on 05 May 2021