Questions on Kendo UI for jQuery Forum

13 answers

117 views

[Solved] Android - Ghost Click - ModalView over ListView

Kendo Mobile version - 2012.3.1315. I am having issues on native Android devices with click events. I have a ListView and register to its data-click event. I then show a ModalView over the ListView. When I click the Close button of the ModalView, the underlying ListView click event fires as well (ghost click). I cannot recreate this scenario in the Icenium simulator. It only occurs on native devices.

Edit: I've also tested this scenario on 2013.1.703 and the same behavior occurs.

<div id="modalview-additional-info" style="width: 80%; height: 70%;">

<div data-role="header">

<div data-role="navbar">

<span>Info</span>

<a data-click="closeModalViewAdditionalInfo" data-role="button" data-align="right">Close</a>

</div>

<div data-role="scroller">

<p id="additionalInfo"></p>

</div>

<ul data-role="listview" data-type="group" data-click="equipmentListViewClick">

...

</ul>

General Discussions

answered on 23 Dec 2013

1 answer

292 views

[Solved] TreeView checkboxes with remote hierarchical datasource MVC - Country / Region

How can I create a treeview layout using checkboxes similar to the example below:

[ ] Country A
[ ] Region A
[ ] Territory 1
[X] Region B
[X] Territory 2
[X] Territory 7
[ ] Country B
[ ] Region C
[ ] Territory 3
[ ] Territory 4

I am using the MVC helpers and would like to load the data in one call to the controller i.e. NO on-demand loading.

I've been trying to use the following example: http://demos.kendoui.com/web/treeview/remote-data.html - but I
don't understand how I should construct the JSON object to include children etc.

Similar post here? - http://www.kendoui.com/forums/kendo-ui-framework/hierarchical-data-source/good-way-to-populate-entire-hierarchical-datasource-with-one-data-call.aspx

Any examples would be great.

Thanks,
Beau

TreeView

answered on 23 Dec 2013

6 answers

1.1K+ views

Example: Treeview with highlight search term

Hello All:

I wrote fiddle http://jsfiddle.net/RichardAD/QfDd9/ to demonstrate how a portion of a node text value can be highlighted when it matches a search term. Could also be tweaked to hide non-matching nodes.

I'm looking for feedback on the technique and improvements.

Thanks,
Richard

TreeView

answered on 23 Dec 2013

2 answers

104 views

Dropdownlist under treeview is having problem in showing up and selection of values

I am trying put dropdownlist under treeview but it is not appearing properly on click and also not able to select due to same reason. I have tried putting contents on JsFiddle with dropdownlist under treeview and without treeview. It is working fine without treeview but having problem if we put under treeview.
Please have a look on http://jsfiddle.net/dN2PK/8/

TreeView

answered on 21 Dec 2013

1 answer

260 views

Dynamically defining the tooltip format

Hi, I'm trying to generate a ListView with a sparkline for each item. Each sparkline is associated with a metric that is provided by data source. Each metric has the information about the service that provides its data and the datatype. I'm using the datatype to define the format of the tooltip. However, the tooltip format function is bind only when each value of the series and not in the sparkline definitio. So, it uses the information of the last metric for all the sparklines. How I can use the correct datatype to set the tooltip?

This is my code:

01.createChart: function (e) {

02. var list = e.sender;

03. var data = list.dataSource.data();

04. for (var i = 0; i < data.length; i++) {

05. var item = list.wrapper.find("[data-uid='" + data[i].uid + "']");

06. var chart = item.find(".chart");

07. var metric = data[i];

08. this.metrics[data[i].uid] = metric.MetricType;

09. chart.kendoSparkline({

10. type: "column",

11. dataSource: new kendo.data.DataSource({

12. transport: {

13. read: {

14. url: metric.MonthService,

15. dataType: "json"

16. },

17. parameterMap: function (options, operation) {

18. if (operation === "read") {

19. options.hotelId = 2; // _model.get('hotelId');

20. options.year = 2013; //_model.get('date').getYear() + 1900;

21. options.month = 7; //_model.get('date').getMonth() + 1;

22. return options;

23. }

24. return options;

25. }

26. }

27. }),

28. series: [{

29. type: 'column',

30. field: metric.MonthValue,

31. color: '#ff0000',

32. negativeColor: '#0099ff',

33. metricType: metric.MetricType // Hack? or Extension

34. }],

35. tooltip: {

36. format: function () {

37. switch (metric.MetricType) {

38. case 0: // Graduacion

39. return "{0:N2}";

40. break;

41. case 1: // Cantidad

42. return "{0:N0}";

43. break;

44. case 2: // Moneda

45. return "{0:C2}";

46. break;

47. case 3: // Indice

48. return "{0:N2}";

49. break;

50. case 4: // Porcentaje

51. return "{0:P2}";

52. break;

53. case 5: //Clasificacion

54. return "{0}";

55. break;

56. }

57. },

58. visible: true,

59. shared: false

60. }

61. });

62. }

In line 14 I set the url of the service based on the metric information. An in line 37 I trying to use the same approach for defining the tooltip but doesn't work. The last metric info is used for all the tooltips.

Thanks in advance.

Sparkline

answered on 21 Dec 2013

1 answer

558 views

Is there a way to set a close delay for a tooltip?

I have autohide tooltips, that may have scrollable content.

But the tooltip hides before the use can move their mouse into the tooltip. So, I want to delay the close to give the user a chance to scroll if desired.
Right now, the user has to navigate the mouse through the pointer to the target to keep it open.

Thanks

ToolTip

answered on 21 Dec 2013

10 answers

270 views

Listview Load More not working with kendo.mobile.min.js

I have taken the code from this Listview Load More demo:

http://demos.kendoui.com/mobile/listview/press-to-load-more.html#/

and tried running it on an iPhone UIWebView using these files:

<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
<link href="css/kendo.mobilecommon.min.css" rel="stylesheet" />
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />

When I use these, the same code from the demo doesn't work with page sizes smaller than 50. When I change to the kendo.all.min.js like the demo, the Load More works. I would rather not include the kendo.all.min.js file in the app just for the Load More functionality. What are the correct minimal includes necessary for the Kendo Mobile Listview Load More to work?

Thanks,
Derrick

ListView (Mobile)

answered on 21 Dec 2013

2 answers

150 views

change Platform/skin at run time

So i have an application that starts up using the default platform. I have added a button on the home screen that allows you to pick which platform you would like the UI to mimic. My problem is actually getting the UI to change, or having it partially change.

I have some javascript code like:

var crmMobile = (function () {
var mobileApp = null;

return {
init: function (cfg) {
mobileApp = new kendo.mobile.Application(document.body, {
skin: settings.skin //this sets it to default
});
},
changeSkin: function (skin) { //I have tried used both of the below methods
mobileApp.skin = skin;
mobileApp.platform = skin;
}
}
})

Neither of those calls seems to change the the look. any help would be much appreciated! Thanks.

Application

answered on 21 Dec 2013

2 answers

153 views

[Solved] Problem with timepicker

Hello.

Is there any way to catch format exception from Time picker? It seems that whenever I manually enter time with wrong format into Time picker it won't fire onChange event and I can not validate proper format.

Thank you.

General Discussions

answered on 20 Dec 2013

2 answers

321 views

[Solved] Invoke Javascript (jquery) method after update (inline edit)

I need to invoke a js method after an Update Action with an inline editable grid. I hooked into the Save event as so:

.Events(e => e.Save("save_grid"))

However, that happens before the Update Action. I need "save_grid" to occur AFTER the update action.

Any ideas?

Grid

answered on 20 Dec 2013