Questions on Kendo UI for jQuery Forum

0 answers

138 views

kendo.mobile.min.js with scheduler issue

Hi I an downloaded new js file from "kendoui.complete.2013.3.1324.trial" in this i found one issue regarding kendo mobile scheduler if i am using kendo.mobile.min.js from this download. if we try to scroll then the page is disapearing else we didnt use new released kendo.mobile.min.js file then schedular control now working its functionality. when using schedular control with drawer control also not working fine some times drawer control page not showing login page showing for clarification i am attaching the screens also. thank you for providing inbuilt functionaly your service is very nice. screen1 and screen2 is my estimate result. with new kendo.mobile.min.js i am getting this result fine but am getting two issues 1) in screen4 you can see the textbox and label when scroll or touch the mobile then see screen5 there is no controls. 2) screen6 drawer control with head and wrong data showing login page. not getting my estimated data. if i use old version then drawer control not working you can see this in screen3.

General Discussions

asked on 03 Feb 2014

1 answer

106 views

Programmatically Zooming, is it possible?

I have a few divs with a different size in zoomable view, lets say that my viewport size is 10k x 10k and my div's size is 100x100, and left position is 600, top position is 1000. I can using animatedScrollTo() function to scroll to the top, left position in my viewport to see my div box, but i need to zoom it programmatically to make the div's size fit in my browser size. Any idea?

This is my example to programatically scrolling to div position, but i really need to zoom it to make div's size fit in my browser size. Thank you.

01.<!DOCTYPE html>

02.<html>

03. <head>

04. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

05. <style>

06. #container {

07. width: 10000px;

08. height: 10000px;

09. position: relative;

10. }

11.

12. #myBox {

13. position: absolute;

14. top: 600px;

15. left: 1000px;

16. height: 100px;

17. width: 100px;

18. padding: 10px;

19. background: red;

20. }

21. </style>

22. </head>

23. <body>

24. <div data-role="view" id="myViewport" data-zoom="true" data-init="initHome">

25. <div id="container">

26. <div id="myBox">Foo</div>

27. </div>

28. </div>

29.

30. <script>

31. function initHome(e)

32. {

33. var scroller = e.view.scroller;

34. var bTop = $("#myBox").position().top;

35. var bLeft = $("#myBox").position().left;

36. scroller.animatedScrollTo(-(bLeft), -(bTop));

37. }

38.

39. new kendo.mobile.Application();

40. </script>

41. </body>

42.</html>

General Discussions

answered on 03 Feb 2014

4 answers

216 views

Obserable objects and JS Inheritance

I was trying to define some reusable code but then ran into problems because methods/properties in the MVVM observable object weren't there.

Take this code for example:

var editableModel = function ()

{

this.isEditing = false;

};

editableModel.prototype.toggleEditMode = function (e)

{

this.set("isEditing", !this.isEditing);

e.stopPropagation();

};

var individualClient = function ()

{

this.clientCode = "";

this.initials = "";

this.title = "";

this.dateOfBirth = "";

this.language = "";

};

individualClient.prototype = new editableModel();

Now if I were to try and use this as an observable object in the following way:

var viewModel = new individualClient();

viewModel.clientCode = "ABS";

viewModel.initials = "JA";

... //set the rest of the properties

kendo.bind($(".binding-container"),viewModel);

and if I had some HTML that made use of the isEditing, or toggleEditMode property/method:

<a href="#" onclick="viewModel.toggleEditMode()">Edit</a>

<!--NOTE: This hyperlink is not located inside the binding-container which is why I'm calling it as I am, using the onclick event and the qualified object name -->

<span data-bind="text: clientCode, invisible: isEditing">@Model.ClientCode</span>

it wouldn't work, or rather isn't working.

Is this because kendo is replacing my Object's prototype with it's own ObservableObject?

Regards,
Jacques

MVVM

answered on 03 Feb 2014

1 answer

172 views

Map clicking and panning events

When the user clicks an area on a map, I want to record the lat/long and create a marker where the click occurred.
I use the 'click' event to achieve this. This works fine, except that when the user pans the map (holds the mouse button and moves the map), I don't want to record the lat/long and create a marker. I basically want to ignore panning.

Inside the click event, is there a way to differentiate between a regular click and a click that occurs as part of the panning? I also tried attaching to the 'panEnd' event, but haven't found anything to achieve what I want, such as some sort of offset value indicating if the map moved.

I'm using Kendo UI Complete v2013.3.1119 with IE10.

Map

answered on 03 Feb 2014

1 answer

55 views

Grid with Pop Up Editor - Cascading ComboBox posts old selected value on Update

Hi,

I have a problem with the ComboBox in a Grid Editor Template. The options in the ComboBox are filled by cascading from a DropDownList in the Editor Template which works great. However, if I Update one of the rows I've already added, and choose an option in the DropDownList that results in zero options for the ComboBox and click Update from the pop up without typing anything, the Update event of the Grid posts the old selected value. How can I ensure that the Update event will post the new empty value from the ComboBox?

ComboBox

answered on 03 Feb 2014

3 answers

180 views

Bug with kendo editor, hidden element not removing

This bug is to the refrence to the
http://www.kendoui.com/forums/kendo-ui-web/editor/odd-behavior-with-'select-all---delete---paste'.aspx

I am having same issue in my kendo editor.
I could not recreated the cause of the problem (happened multiple times) but i can show you the problem.

Go to:
http://demos.telerik.com/kendo-ui/web/editor/api.html

on the set value textbox put
<p class="k-paste-container">test</p>
and click set value.
now when this is set then, the editor layout is unusable. Whatever you then type is there, but is hidden. You cannot remove the <p> element. Select all -> delete doesn't work.
when you see the value of the editor it is "<p class="k-paste-container">test</p>"
More problem lies when you save the value in database. When you load the same content to the editor, it is not usable to tell the least.
I am using 2013.3.1119 version of the kendo

Hope to fix this problem asap.

Editor

answered on 03 Feb 2014

2 answers

139 views

Guidance Needed: Child Collection on Create View

I have a general question.
I'm new to Kendo and have a need to build a single page data entry view which will create a new object, it's properties, and a couple of child collections of objects. For example:

Retailer.<various properties>
Retailer.PhoneNumbers.PhoneNumber
Retailer.PaymentsAccepted.PaymentType

My question is this: When I create the new retailer (ie: Create action on the Retailer controller) will I have an issue using a grid to create my phone numbers? Does the grid want to post back with each update of a new line or can I post the collection of phone numbers back when the form is submitted?

Functionality similar to the inline editing grid sample: Grid sample

My stack is MVC 5, EF 6 and Kendo UI Complete w/MVC Wrappers

Thank you for any guidance!

Grid

answered on 03 Feb 2014

3 answers

256 views

Change color of Navigation Calendar and Formatted Date?

How do I change/override font color of Calendar icon and formattedDate in the top navigation bar?

Scheduler

answered on 03 Feb 2014

2 answers

120 views

SPA but only some S and error handling

I'm creating my first SPA using Kendo and working through the examples. Everything is working great.

I am very interested with the concept that some 'views' do not have to be part of the SPA and can be 'fetched' from a remote resource and a quick test it works lovely. BUT as a v experienced C++ programmer of 20 years+ I am
used to thinking in the negative i.e. what could go wrong and how can I make the app seeminglessly continue for the
user. So my big concern is that the remote view.html will not be reachable (ether missing, bad url, network down etc).

A quick test, by setting the href in the tabstrip <a> to a bad URL, and when I can click on the button the app then hangs. Not good! See:

http://jsbin.com/iQUSuMI/1/edit

I would like to be able to catch/detect the error and show a message to the user or ideally show an alternative default View that I do have in the SPA already.

(FYI my app has to support branding and I am proposing that the 'About, Help and 'News' pages are fetched from my clients web servers as HTML, so my clients can update this information without having to go back to me to release app updates etc. I could use a datasource instead but was interested in the error handling anyway)

SPA

answered on 03 Feb 2014

1 answer

119 views

TypeScript modules / AMD / require.js

I am new to Kendo UI Mobile. I am familiar with building Kendo UI SPA applications using TypeScript modules. In debug configuration require.js is used to load the modules. In release configuration all modules are compiled into a single minified file. I typically use a bootstrapper module to create the kendo.Router, kendo.Layout, kendo.View and my view model instances. My view models are TypeScript classes that inherit from kendo.data.ObservableObject.

I am curious how I would go about creating a Kendo UI Mobile app using TypeScript modules. From reading the documentation on Kendo UI Mobile it appears the views are hooked of to their view models declaratively using data-model assuming the view model instances are global variables. Is there an imperative way of hooking up the views to their view models inside a TypeScript module so that the view model instances are not required to be global variables?

many thanks,

Remco

General Discussions

answered on 02 Feb 2014