Questions on Kendo UI for jQuery Forum

27 answers

954 views

Phone vs. Tablet

This might be a higher level question than just the SplitView but since it is the primary situation I will discuss I thought to put the question here.

With the 2012 Kendo Summer release, new tablet level widgets were introduced.

Does this mean that kendo is strategically divided into the following?

Web vs. Mobile (Phone/Tablet)

i.e. do I build mobile applications with kendo mobile like normal and just "spice" the tablet level widgets on the screen when appropriate and let kendo handle the rendering of these tablet level widgets on mobile devices?

Or is it reccommended to built a tablet specific view of your mobile application?

In addition, if I use the splitview widget, how will it react on the mobile device? Just not display and treat the panes like normal mobile panes?

SplitView

answered on 02 Sep 2014

3 answers

574 views

In MVC View, I need to pass value from within the model to the controller from a KendoUI Widget

The code below works. The controller receives the value "Test Value" when the Upload widget is executed.However, I have a key value from the model that is displayed within this view that I need to send instead of the hardcoded text.

Note. This is a custom template within a grid popup editor.

Widget

ViewBag.Title = "Test Value"
@(Html.Kendo().Upload() .Name("files") .TemplateId("fileTemplate") .Async (a => a .Save("Save", "OpenRecords"), new { MyRequest = ViewBag.Title }) .AutoUpload(true)) )

Controller

public ActionResult Save(IEnumerable<HttpPostedFileBase> files, string MyRequest)
{
// The Name of the Upload component is "files"

if (files != null)
{
foreach (var file in files)
{
// Some browsers send file names with full path.
// We are only interested in the file name.

var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
// The files are not actually saved in this demo
file.SaveAs(physicalPath);
ViewBag.FileName = fileName;
//return Content(physicalPath);

}

}

// Return an empty string to signify success
return Content("");

}

Upload

answered on 02 Sep 2014

2 answers

452 views

Change event fired twice on ComboBox using AngularJS

I'm using Kendo UI v2014.2.716 with AngularJS v1.2.18 and have a ComboBox declared like below:

<select kendo-combo-box k-options="vm.manufacturerOptions" ng-model="vm.make.ManufacturerId"></select>

My options object sets the dataSource, dataTextField, and dataValueField, while the form gets the make object via the controller's resolve property. Everything appears to work as expected and I can see the ComboBox value change appropriately if I bind a separate element to the vm.make.ManufacturerId property. The part that is confusing me, though, is that when I tab off or click off the select element the change event is fired again and the value and text both reflect the text of the ComboBox, which obviously is not what I'd expect. I've tried reproducing this in the Dojo but have been unable to, but my code isn't very complex and I can't spot what could be causing the second change event to fire when the select element loses focus.

I was hoping someone might be able to think of what could be causing the second change event to fire.

ComboBox

answered on 02 Sep 2014

1 answer

1.7K+ views

[Solved] Binding string date value to model in angular kendo date picker

I have an api which return the date in this format "014-08-26T15:10:45.402Z" i am using angular kendo ui .The problem i am facing is the date is not getting bound to the kendo date picker.Could someone help me out . The result is same whether I use ng-model or k-ng-model. Do we need to convert the data in the model to date object? OR there is a much simpler way.
<input kendo-date-picker ng-model="emp.datestart" k-format="MM/dd/yyyy" />

http://dojo.telerik.com/uGIq

DatePicker

answered on 02 Sep 2014

6 answers

3.6K+ views

[Solved] How to determine if Window is open

I need to check if the Window is already open, since calling open again on a centered window that has been dragged re-centers it. What's te best way to determine if the window is already open?

Window

answered on 02 Sep 2014

5 answers

520 views

Custom edit form with fields not displayed in grid

Hello,

I am writing an order-entry app using AngularJS and Kendo UI Grid. I am new to both and am looking for some guidance on how best to approach the scenario below.

The order line grid is populated with Json data from a server (ASP.NET Web API). For example, for order # 3:

[

   {

      "OrderId":3,

      "Line":1,

      "ItemId":"0023",

      "Description":"Alcaline substrat-234",

      "Class":"A34",

      "Manufacturer":"AA123",

      "PartNo":"12347354",

      "Qty":2,

      "ExtCost":12.72,

      "ExtPrice":19.10,

      "ExtTax":1.80,

      "Comment":"Some comment... Could be long...",

      Serials: [

        "AAAA1234",

        "BBBB2222"

        ]

   },

   {

      "OrderId":3,

      "Line":2,

      "ItemId":"0056",

      "Description":"Bee pulsating epox",

      "Class":"34",

      "Manufacturer":"ZB83",

      "PartNo":"52234623",

      "Qty":1,

      "ExtCost":252.31,

      "ExtPrice":290.11,

      "ExtTax":20.10,

      "Comment":"Some other comment about this line...",

      Serials: [

        "AAAA1234",

        "BBBB2222"

        ]

   }

]

In the grid, I only display a few of the fields:
ItemNo, Description, Manufacturer, PartNo, Qty, ExtPrice

For adding and editing records, a custom pop-up form should display additional fields:

ItemNo (R/O):
Description (R/O):
Manufacturer (R/O):
PartNo (R/O):
Comment (not in grid):
Qty:
Price:
Serial Numbers (not in grid): (button which opens up S/N form)

There are two approaches that come to mind:
1) Do an additional json call to retrieve the edit-form fields (for editing) + another for saving the edits / new records. I would also reduce the fields in the json above to only include fields shown in the grid.
2) Use some kind of local caching to reduce the server round-trips. Perhaps Breeze (but I have never used it)? Need something simple, robust and AngularJS friendly.
3) ...?

Recommendations / advice would be appreciated!

A sample / JsFiddle or similar that shows how to use a custom edit form (preferably with some extra field [not in the grid]) with Kendo UI grid and AngularJs would also be very helpful.

Thanks,
Lars

Grid

answered on 02 Sep 2014

1 answer

756 views

Custom Create/Edit Popup for Scheduler

Hi,

we´re trying to start with kendo scheduler, but have some questions with customizing the create/edit popup form when double-clicking on the scheduler for creating an new entry.

We need to display a cascading dropdownlist in this form to select a value in order based on the first/second selection from a remote datasource.
1:1 like in your demo/example, examples/dropdownlist/cascadingdropdownlist.html

But I don´t know if it´s possible with kendo to customize like this? I made a few tests but had no success.

Can you help me with this? Maybe you have some examples codes for me?

Thank you,
Christoph

Scheduler

answered on 02 Sep 2014

3 answers

213 views

Display of calculated fields in treeview template

The following sample raises two issues which I struggle to sort out:

1) How to populate a HierarchicalDataSource and cast all items with a model derived from kendo.data.Node? In the following sample only nodes at the first level of the hierarchy (but none of the children) are cast; Accordingly calculated fields are undefined for all children.
2) How to display calculated fields in templates? In the following sample the function is actually printed in the resulting html by the template.

01.<!DOCTYPE html>

02.<html>

03.<head>

04. <meta charset="utf-8">

05. <title>Treeview</title>

06. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">

07. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">

08. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

09. <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>

10. <style>

11. .img-24 {

12. height: 24px;

13. width: 24px;

14. }

15. </style>

16.</head>

17.<body>

18.<ul data-role="treeview" data-bind="source:sample" data-template="my-template"></ul>

19.<script id="my-template" type="text/x-kendo-template">

20. <a href="#: item.hash$ #">

21. <img src="#: item.icon$ #" alt="#: item.name #" class="img-24">

22. <span>#: item.name #</span>

23. </a>

24.</script>

25.

26.<script>

27. /**

28. * Rummage model (displayed in treeview on find page)

29. * @type {kendo.data.Model}

30. */

31. var STRING = 'string',

32. NUMBER = 'number',

33. MyNode = kendo.data.Node.define({

34. id: 'id',

35. hasChildren: true,

36. children: {

37. schema: {

38. data: 'items',

39. model: MyNode

40. }

41. },

42. fields: {

43. id: {

44. type: NUMBER,

45. editable: false

46. },

47. name: {

48. type: STRING,

49. editable: false

50. },

51. icon: {

52. type: STRING,

53. editable: false

54. },

55. hash: {

56. type: STRING,

57. editable: false

58. }

59. },

60. icon$: function() {

61. return 'http://localhost/images/' + this.get('icon');

62. },

63. hash$: function() {

64. return 'http://localhost/find#!' + encodeURIComponent(this.get('hash'));

65. }

66. });

67.

68.

69. window.viewModel = kendo.observable({

70. sample: new kendo.data.HierarchicalDataSource({

71. transport: {

72. read: function(options) {

73. options.success([

74. { id: 1, name: 'node 1', icon: '1.png', hash:'1', items: [

75. { id: 4, name: 'node 1.1', icon: '1.1.png', hash:'1.1' },

76. { id: 5, name: 'node 1.2', icon: '1.2.png', hash:'1.2' }

77. ] },

78. { id: 2, name: 'node 2', icon: '2.png', hash:'2' },

79. { id: 3, name: 'node 3', icon: '3.png', hash:'3' }

80. ]);

81. }

82. },

83. schema: {

84. model: MyNode

85. }

86. })

87. });

88.

89. $(document).ready(function() {

90. kendo.bind('body', window.viewModel);

91. });

92.

93.</script>

94.</body>

95.</html>

TreeView

answered on 02 Sep 2014

3 answers

162 views

Kendo grid bug with filter row option

There is a bug with the Kendo grid component. If a grid that has filterable mode "row" and you place the grid inside a Kendo window, the result will be buggy. When you try to change the column widths by resizing the column by dragging the columns wider with mouse, the wrapping window component will behave in an unexpeted way. The window will just suddenly collapse and go very small.

Is there any quick fix for this problem?.

The attached zip archive's index.html demonstrates the bug.

Grid

answered on 02 Sep 2014

1 answer

162 views

Combobox Placeholder breaks page layout

I have an input element that I am using as a ComboBox, which works great:

<input id="imtSelect" name="IMT" required data-required-msg="IMT is required." data-bind="value: imt">

I have it configured down in the "function" part of the page I am working on:

var imtData = [ "US", "Canada", "Federal" ];

// create ComboBox for IMT...

$("#imtSelect").kendoComboBox({

dataSource : imtData,

index : 0

});

However, if I try to add the "placeholder" attribute to the combobox, it throws/breaks all formatting on the page. The TabStrip, the other comboboxes, date pickers --- basically the styles/classes are no longer in effect.

Here is what I change it to:

$("#imtSelect").kendoComboBox({

dataSource : imtData,

index : 0

placeholder : "Select..."

});

I have also tried to define this attribute in the input element itself (placeholder="Select..."), but it has no effect -- it does not appear in the combobox.

Not sure what I am doing incorrect.

Thanks!

ComboBox

answered on 02 Sep 2014