Questions on Kendo UI for jQuery Forum

1 answer

83 views

Slider very hard to slide accurately on Mobile ( iPhone )

Hi,

Kendo UI 2013.2.716
PhoneGap 3.0.0

I have a slider in a view. On an iPhone it is very hard to capture the handle and slide it with a finger.
Most of the time the finger simply slides over it, without making it move; so the user has to try again and again until it captures the touch for the handle and starts moving.

Is there any way to improve this? It is really unusable the way it stands now.

Thanks

Slider

answered on 04 Sep 2013

1 answer

104 views

Performance/right usage of kendoComboBox

Hello,
We've being analysing kendo-ui before we buy it and we face what appears to be a performance issue(or not). As we are not costumers yet, we don't know if this is the right place to post this question, but here we go.

Attached to this thread there's a small html file that takes a quite long time to run despite its simplicity.
The questions are very simple:

1 - Are we using kendoComboBox in the wrong way?
2- There is a faster way to achieve the same result?
3- Is this performance considered normal?
4- If the answer for question 3 is `yes', do you have any guidelines to help us out to bypass these performance issues(number of elements per page, number of bindings per page etc)?

Ah, of course, it may be not a `performance issue' in other person point of view, so, when you read `performance issue' here, its our point of view :)
Despite that, neat library and great components.

ComboBox

answered on 04 Sep 2013

1 answer

164 views

Delete confirmation with TemplateId

Hi,
I am using the Asp.Net Mvc Wrapper for the scheduler control. I noticed that if I specify an editor template, the delete confirmation message does no longer appear:

To clarify, with this declaration the confirmation message does not appear:

.Editable(e => {
e.TemplateId("editEventTemplate");
e.Confirmation(true);
})

If I remove all the "Editable" configuration or if I leave just the Confirmation part, it works correctly:

.Editable(e => {
e.Confirmation(true);
})

What could be the reason for this strange problem?
Thanks,
Stefano Tassara

Scheduler

answered on 03 Sep 2013

1 answer

512 views

Drawer Not Working

Below is my code. I cannot get the Drawer to work. What am I doing wrong?

Thank you!!

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>App #1</title>

<link href="../styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/custom.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/kendo.web.min.js" type="text/javascript"></script>
<script src="../js/kendo.mobile.min.js" type="text/javascript"></script>
<script src="../examples/content/shared/js/console.js"></script>
</head>

<body>


<div id="mainView" data-role="view" data-title="View" >
<h1>App #1</h1>
<p>REST API.</p>
</div>

<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"></div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
<ul data-role="listview" data-type="group">
<li>Mailbox
<ul>
<li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
</ul>
</li>

</ul>
</div>


<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
</div>
</div>


<div data-role="footer">
<div data-role="tabstrip">
<a href="default.html" data-icon="favorites">Home</a>
<a href="views/view2.html" data-icon="favorites">View All Records</a>
<a href="views/view4.html" data-icon="favorites">Insert New Record</a>
</div>
</div>

</div>

<script>
// reset global drawer instance, for demo purposes
kendo.mobile.ui.Drawer.current = null;
</script>

<style>
.km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
.km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
.km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
.km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
{
background-color: #4e4e4e;
color: #fff;
}

.km-ios #my-drawer .km-group-title,
.km-blackberry #my-drawer .km-group-title
{
background-color: #6e6e6e;
color: #fff;
}

.km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
.km-inbox:before, .km-inbox:after { content: "\E0B0"; }
.km-sent:before, .km-sent:after { content: "\E0C6"; }
.km-trash:before, .km-trash:after { content: "\E0C3"; }
.km-spam:before, .km-spam:after { content: "\E0C5"; }
.km-star:before, .km-star:after { content: "\E0D7"; }
.km-settings:before, .km-settings:after { content: "\E0DA"; }
.km-off:before, .km-off:after { content: "\E0B9"; }

.inboxList
{
font-size: .8em;
}

.inboxList p,
.inboxList h2,
.inboxList h3
{
margin: 5px 2px;
}

.inboxList p,
.inboxList h3
{
color: #777;
}

.inboxList h3.time
{
color: #369;
float: left;
margin-right: 10px;
}
</style>

<script>
window.app = new kendo.mobile.Application(document.body, { layout: "mainLayout" });
//var app = new kendo.mobile.Application(document.body);
</script>

</body>

</html>

Drawer (Mobile)

answered on 03 Sep 2013

2 answers

119 views

RadioButtons, DropDownList

Is there such a thing in the Kendo Web Suite - did not find anything.

Let's say you have an app with 20 languages. How does the client select. scroll down?

I have only 3 at the moment but am planning on adding more

Markus

General Discussions

answered on 03 Sep 2013

1 answer

98 views

IE111 anomolies

I realize you don't support beta browsers, so this is just a FYI for you.

The sort by column in GRID is not working in IE11.

I also have trouble with editable rows, that have a delete button at the end. Some rows cannot be deleted. Chrome V28 does not have these problems.

Grid

answered on 03 Sep 2013

7 answers

128 views

List-View width getting reduced on every click in Android

Hi,
Width of the List-view gets reduced on every click in Android(tested in S3),PFA the sample project.
Version Used: KendoUIMobile.2013.2.716.Commercial.

Regards,
Sowmya

ListView (Mobile)

answered on 03 Sep 2013

2 answers

1.8K+ views

[Solved] Include NumericTextBox within Grid using template

I have created a Kendo UI Grid and I have one field within the grid which is editable. I haven't used the "Inline editing" feature as I chose to simply create a template that has a text box and have an event handler on it. This works great.

I now want to change the text box to a `NumericTextBox` but it does not seem to work within the grid but works out side of the grid.

    <div id="grid" style="width:1250px!important;font-size:12px!important"></div>
     <script id="slotsTemplate" type="text/x-kendo-tmpl">
       <input class="numeric" type="number" value="#= additional_slots #" min="0" max="100" step="1" />
    </script>
    <script>

        $(document).ready(function() {
          $("#numeric").kendoNumericTextBox();
              $("#grid").kendoGrid({

                dataSource: {
                   transport: {
                       read:{
                           dataType: "json",
                           url: "data.php"
                       }
                   },
                dataBound: function(){
                      $(".numeric").kendoNumericTextBox();
               },
                    schema: {
                       total: "total",
                       data: "result",
                        model: {
                            fields: {
                                id: { type: "number" } ,
                                name: { type: "string" },
                                company: { type: "string" },
                                email: { type: "email" },
                                additional_slots: { type: "number", validation: { min: 0, required: true }},

                            }
                        }
                    },
           serverPaging: true,
                    pageSize: 25
                },
                scrollable: false,
                sortable: true,
                filterable: true,
             selectable: "row",
             detailTemplate: kendo.template($("#detailTemplate").html()),
                pageable: {refresh: true,},
                columns: [
                    {field:"id",title: "ID",filterable: false},
                    {field: "name",title: "Name"},
                    {field: "company",title: "Company"},
                    {field: "email",title: "Email"},
                    {field: "additional_slots",title: "Additional<br />Slots",template: kendo.template($("#slotsTemplate").html()),filterable: false},


                ]
            });



           $("#grid").on("change", '#numeric', function(event){
               alert('changed');
              });
    </script>

Can anyone help get this NumericTextBox working within the grid?

Many thanks

Grid

answered on 03 Sep 2013

1 answer

173 views

AngularJs and KendoUI

hy,

I'm trying to develop an MVC4 Single Page Application based on AngularJs and KendoUI

1/ In my index.html:
//I have thos lines :
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
<script src="/Scripts/angular-kendo.js"></script>
//I have this line :
<div kendo-grid k-data-source="things"
k-columns='[
{"field": "Id","title": "Id"},
{"field": "Country","title": "Country"}
]'
>
</div>
2/In my app.js :
var app = angular.module('appModuleName', ['kendo.directives']).config......
3/in my controller.js:
$scope.things= new kendo.data.DataSource({
transport: {
read: "[{ 'Id': 1 , 'Country': 'England01'}, { 'Id': 2 , 'Country': 'England02'}, { 'Id': 3 , 'Country': 'England03'}]"
}
});

>> when i add the line : {{things}} , i have the scope, but i do not see the grid in my page !!!

Thanks a lot for your help.
Best M,

Grid

answered on 03 Sep 2013

6 answers

440 views

Kendo UI TreeView remove function on newly created node.

Hi,

I have a problem with remove newly created nodes from a treeview, in that it gives an error "TypeError: r[0] is undefined".
This only happens with newly created nodes, if a tree is reloaded after appending the node, then the removal works fine.

Versions:
<link href="//da7xgjtj801h2.cloudfront.net/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2013.1.514/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.all.min.js" type="text/javascript"></script>

Using Firefox.

Process:

Add node:
function addToTree(id, data) {   // This works just fine.
    var treeView = $element.data("kendoTreeView");
    var getitem = treeView.dataSource.get(id);
    var selectitem = treeView.findByUid(getitem.uid);
    treeView.append(data, selectitem);
}

function removeFromTree () {
    var $parent = treeView.parent(treeView.select());
    treeView.remove(treeView.select());
    treeView.select($parent);
    treeView.trigger('select', { node: $parent });
}

// First we add to the tree
addToTree(targetId, newNode);
// Then we select the node, and display the appropriate info panel.
....
// Then we try to remove the node
removeFromTree(); // error is thrown, and it is thrown even if the parent selection code is removed leaving only the remove command.

The remove function works just fine if the tree is reloaded after adding the node, but clearly that is not a workable method. Any ideas on what is wrong with the "new node"?

TreeView

answered on 03 Sep 2013