Questions on Kendo UI for jQuery Forum

3 answers

243 views

I cant get swipe / drag to work. Development software:
- Windows 7 profesional
- Icenium Graphite Editor, project name: cross-plattform Device Application (Kendo UI Mobile)
- Cordova.js
- jQuery 1.8.2
- Kendo UI Mobile v2012.3.1114
- Icenium Graphite Simulator
- iPhone 4

I'am trying to follow this example to the letter.
http://demos.kendoui.com/mobile/touch/index.html
The example is working fine on your site but not when I run it in the simulator nor in an iPhone 4.

Here is something I have noticed
- In your example you dont close the div tag with data-role="view".
- In your example you are using kendo.all.js. I'am using kendo.mobile.min.js
- I cant use kendoConsole.log (not defined), so I use console.log instead.

Like your example, my debugger registers: touch start, tap, swipe right and swipe left - but not swipe down. Why not swipe down?

Unlike your example, my black div with white text (touchSurface) does not move up and down.

Basicly, overall, what I want to do is this
I want to have two areas. Area A should be about a quarter of the size of Area B. Area B should have a higher z-index than Area A, covering it. Area B should be dragable on the x-axis and when draged to the right Area A should be visible under it.

Can you point me in the right direction? Preferebly with code examples. Iam pretty new to this.

General Discussions

answered on 26 Jan 2013

1 answer

225 views

Mobile : Custom Validator & Validation message

Hello,

I am using Kendo UI mobile and have developed a custom validator. I have also developed a simple form with 2 input controls & push button. The validator that I have developed is applied declaratively to these 2 controls.

When I click on the button and inside the button click handler, when I call 'validate' on validator object. When data entered in both input controls is invalid. I see validation messages for both input boxes displayed INSIDE the first input box. So essentially 1 validation message is written on top of the other.

I have 2 questions :
1. The error message being displayed inside the TEXTBOX itself, is that by design for the mobile platform ?
2. Why do both error message get overwritten one above the other ? I have attached my validator code for reference.

I can share the complete code if needed. Please let me know.

Best Regards,
Nilesh Padbidri

Validation

answered on 25 Jan 2013

2 answers

629 views

[Solved] Cannot apply class or style with columns.attributes object

columns: [

{ field: "id", attributes: {"class": "someclass", style: "color:#0c0"} }

]

This part of the API reference explains the above definition:
http://docs.kendoui.com/api/web/grid#columnsattributes-object

someclass and/or the color css is never applied to the grid, any idea why?

Grid

answered on 25 Jan 2013

3 answers

377 views

Problems with calling cancelRow() on a grid with a local datasource

When using a local dataSource with the Kendo UI Grid component, the cancelRow() method causes an issue in certain cases. If the Grid has a dataSource that contains 1 item, for example, and you then add 1 more item to the dataSource by using the DataSource.add() method or replacing it with a new data source using the DataSource.data() method, then edit a row and execute the cancelRow() method, the grid behaves as if none of the new items exist – any items that were part of the original dataSource remain in the grid after cancelRow(), but any other items are removed entirely. After digging a bit into the dataSource object, it seems that the _pristine array is not updated when adding items or replacing the root data array, and the _pristine array may be what is used during the cancelRow() process. Here’s a working example illustrating the issue:

$("#grid").kendoGrid({

editable: "inline",

columns: [

{

field: null,

title: "",

template: "<a href='\\#' class='edit'>Edit</a>, <a href='\\#' class='cancel'>Cancel</a>, <a href='\\#' class='update'>Update</a>"

},

{

field: "name",

title: "Name"

},

{

field: "other",

title: "Other"

}

],

dataSource: [

{

name: "name1",

other: "other1"

}

],

save: function() {

this.refresh();

},

dataBound: function() {

var $grid = $("#grid");

var grid = $grid.data("kendoGrid");

$grid.find("a.edit").click(function (e) {

e.preventDefault();

var index = $(this).closest("tr").index();

grid.editRow(grid.tbody.find(">tr:eq(" + index + ")"));

grid.tbody.find(">tr:eq(" + index + ") td:eq(1) input").focus();

});

$grid.find("a.cancel").click(function (e) {

e.preventDefault();

grid.cancelRow();

});

$grid.find("a.update").click(function (e) {

e.preventDefault();

grid.saveRow();

});

}

});

var $grid = $("#grid");

var grid = $grid.data("kendoGrid");

//fails with initial empty datasource

$("#grid").data("kendoGrid").dataSource.add(

{

name: "name2",

other: "other2"

}

);

Grid

answered on 25 Jan 2013

1 answer

2.1K+ views

Template inside template?

Hi,

Is it possible to use a template inside another template?

Something like this:

<script type="text/x-kendo-template" id="tmpl-user">

<span>data.Name</span>

</script>

<script type="text/x-kendo-template" id="tmpl-1">

<

div>

data.Title

</div>

#tmpl-user(data.User)#

</script>

Where '#tmpl-user#' is called with the user object passed to the template.

Thanks for your help.
Bastien

ListView (Mobile)

answered on 25 Jan 2013

5 answers

166 views

unresponsive mode in the graph pages due to long-running script

My graphs are getting into I am using Stock Charts
unresponsive mode in the graph pages due to long-running script

Charts

answered on 25 Jan 2013

4 answers

399 views

How can group items in ListView based on their first character

Hi

I am doing some tests with Kendo UI Mobile for an upcoming project. One thing that I saw can be easily done in jQuery Mobile's ListView is to group items in the ListView by their first character (like contacts in iPhone) automatically and even add a Search box on the top just by setting a property.
I was trying to do the same thing with Kendo UI using a DataSource loading json data from a data service. I can see the list of items in the ListView but I am not able to group them by their first character.
All the examples I have seen use a separate data field for group but I do not have a field for the first character.
Is there anyway that I can group list of names by the first character or at least create an unbound field in the datasource's model/shema that returns first character of the item so I can use it for groping?

Also is there an example that shows how to use a Search field to filter the ListView data?

I appreciate your help in advance.

Regards
Ron Farko

ListView (Mobile)

answered on 25 Jan 2013

1 answer

427 views

Refresh/Update list-item template?

Hi,

I have the following scenario:

A listview
A modalview to edit listview item

Once the listview-item is edited, I would like to close the modalview and update/refresh ONLY the listview-item that was impacted.

Is this possible? If yes, how can I achieve this? I want to avoid to refresh all the listview because the scroll position would be lost :-S.

Thanks for your support.
myTeamWorks

ListView (Mobile)

answered on 25 Jan 2013

3 answers

787 views

Open numeric keypad on mobile device?

Is there a way to load the numeric keypad when clicking in the box instead of the full keyboard? Thank you.

NumericTextBox

answered on 25 Jan 2013

3 answers

934 views

Turn off date/time autocomplete

Hi,

Is there a way we could add "autocomplete=off" to the date and time input fields? We simply don't want the field to be auto-completed using previously entered values.

Thanks

DatePicker

answered on 25 Jan 2013