Questions on Kendo UI for jQuery Forum

1 answer

142 views

Unbounded callbacks

If I declare a view as

<div data-role="view"

data-title="Form Unexpected but nice"

data-init="ns.viewA.init"

data-before-show="ns.viewA.beforeShow"

data-show="ns.viewA.show"

data-model="ns.viewA.viewModel">

...

<select data-bind="source:options,value:underlying.optionId"

data-text-field="display"

data-value-field="id"></select>

...

</div>

Then declare the js as

01.(function($, kendo, ns){

02. var model = {

03. options: [],

04. underlying: null

05. };

06.

07. model.bind('change', function (e) {

08. var t;

09. console.info('field %s changed.', e.field);

10. if (e.field === 'underlying.optionId') {

11. t = viewModel.options.singleOrDefault('id', model.underlying.optionId);

12. viewModel.set('model.underlying.derivedValue', t.someValue);

13. }

14. });

15.

16. ns.viewA = {

17. init: function(){

18. // populate options

19. ...

20. },

21. beforeShow:function(){

22. },

23. show: function(){

24. model.set('underlying', {

25. optionId: null,

26. derivedValue: 'Not Set'

27. });

28. },

29. viewModel: model

30. };

31.}(jQuery, kendo, myApp));

I've two issues, One if I properly instantiate the viewModel in the view.init, then the select source binding barfs because the array is not set when the binding is invoked. What can I do to have the viewmodel late bound? I've tried using kendo.bind(e.view.element, model) but this has the undesirable side-effect of destroying my

1.<ul data-role='listview'><li>static option/information</li></ul>

Two, when using SPA every visit to this view invokes another repetition of the 'change' event handler. Thus, the first time I visit this view, the change handler is accurately invoked only once. The second visit invokes the change handler twice. Third view yields three executions and so on. I'm assuming this has to do with the binding engine retaining a hook to the previous underlying object. What can I do to ensure the change is only fired the one time for the current underlying regardless of the view count?

MVVM

answered on 19 Sep 2013

1 answer

189 views

Tab strip text or badge icon not displaing in android with phonegap in kendo mobile ui

This is my index page, i am just trying to use some tabstrip example for my application in phonegap with kendo mobile

<!DOCTYPE html>
<html>
<head>
<title>My App</title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="customize.kendo.css" rel="stylesheet" />
</head>
<body>
<div id="home" data-role="view" data-layout="default">
Hello Mobile World!
</div>

<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home">Home</a>
<a href="about.html">About</a>
</div>
</footer>
</section>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application();
</script>
</body>
</html>

I have use some css which i found in kendo forum to enable the tabstrip title, i have written this css inside my customize.kendo.css

.km-android .km-tabstrip a
{
color: #a8a8a8;
}

Application

answered on 19 Sep 2013

3 answers

104 views

Can I temporarily disable dragging of kendoWindow?

When a user 'full screens' a kendoWindow I would like to disable its drag capabilities until it is 'restored'.

Can I do that?
I attempted to use setOptions but that didn't seem to work.

Window

answered on 19 Sep 2013

3 answers

46 views

UI Issue with windows-phone-7 project with kendo mobile and phonegap

Hi Guys,

I am using Kendo UI Trail Version "v2013.2.716" for mobile development with phonegap, currently we support Android/iOS/WP7. I am trying to run a basic demo with Phonegap and Kendo UI. Its running fine, but i can't see the UI theme its like a blank screen.

I check here in kendo ui forum, they told there is no support for WP7 because lack of CSS3 features in IE9 browsers. I want to know whether this kendo mobile ""v2013.2.716" version will support wp7.

If not, it will support WP8 latest one???

General Discussions

answered on 19 Sep 2013

3 answers

133 views

Opening several windows at once smoothness

Hi,

I have a site where it is possible up to 15 kendo windows could open all at once. And I have noticed a decrease in animation quality once we go past 5-6 windows.
I understand why this occurs, what I am wondering is if there is a better way for me to open these windows.

Mainly there is one time when so many windows will open at once, and once more when a user leaves (the windows close).

Is there something I can do to help keep this animation smoother when so many are coming on at once?

How could I open one at a time? Open 1, wait until its animation is completely finished, then open the next? I know that 'activate', according to the documentation, is called once the animation is complete but it does not seem that way, but maybe that is do to something else I am doing.

Thanks

Window

answered on 19 Sep 2013

2 answers

449 views

Group Header Template causing issues with other columns

I have a grid that I am binding to a server model. I use the .Ajax() so that I can group it by a column. I want to NOT display the column I am grouping by so I implemented the GroupHeaderFormat() and hide the column. When I do the ClientTemplate() formatting on a different column goes awry. I've attached screen shots that show the before and after. For "before" the code is this:

@(Html.Kendo().Grid(Model.listEvents)

.Name("Grid2")

.Columns(columns =>

{

columns.Bound(p => p.production_date)

.Title("Date")

.ClientTemplate("#= kendo.toString(production_date, \"MM/dd/yyyy\")#");

columns.Bound(p => p.shift_name).Title("Shift");

columns.Bound(p => p.timestamp).Title("Time").ClientTemplate("#= kendo.toString(timestamp, \"hh:mm:ss\")#");

columns.Bound(p => p.responsible).Title("Responsible");

columns.Bound(p => p.area_name)

.Title("Area")

;

columns.Bound(p => p.alarm_message).Title("Alarm Message");

columns.Bound(p => p.comment).Title("Comment");

columns.Bound(p => p.charged_seconds)

.Title("Charged Time (min)")

.ClientTemplate("#= kendo.toString(charged_seconds, \"n2\")#")

.ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");

})

.DataSource(dataSource => dataSource

.Ajax()

.Group(groups => groups

.Add(p => p.area_name))

)

.HtmlAttributes(new { style = "border: 3px solid #666666" })

)

For "after" it is this:

@(Html.Kendo().Grid(Model.listEvents)

.Name("Grid2")

.Columns(columns =>

{

columns.Bound(p => p.production_date)

.Title("Date")

.ClientTemplate("#= kendo.toString(production_date, \"MM/dd/yyyy\")#");

columns.Bound(p => p.shift_name).Title("Shift");

columns.Bound(p => p.timestamp).Title("Time").ClientTemplate("#= kendo.toString(timestamp, \"hh:mm:ss\")#");

columns.Bound(p => p.responsible).Title("Responsible");

columns.Bound(p => p.area_name)

.Title("Area")

.Hidden(true)

.GroupHeaderTemplate(@<text>Area: @item.Key</text>)

.ClientGroupHeaderTemplate("Fournd in Area: #= value")

;

columns.Bound(p => p.alarm_message).Title("Alarm Message");

columns.Bound(p => p.comment).Title("Comment");

columns.Bound(p => p.charged_seconds)

.Title("Charged Time (min)")

.ClientTemplate("#= kendo.toString(charged_seconds, \"n2\")#")

.ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");

})

.DataSource(dataSource => dataSource

.Ajax()

.Group(groups => groups

.Add(p => p.area_name))

)

.HtmlAttributes(new { style = "border: 3px solid #666666" })

)

Grid

answered on 18 Sep 2013

1 answer

85 views

Imagine something like this

in Kendo:

http://dobtco.github.io/formbuilder/

General Discussions

answered on 18 Sep 2013

1 answer

96 views

Inconsistent Select list binding values

In two seperate views I have similar code. The guts are the same yet the results of the binding framework differ. Could you please elaborate on the following discrepancy?
The first view is delcared as

<div data-role="view"

data-title="Form Unexpected but nice"

data-init="ns.viewA.init"

data-before-show="ns.viewA.beforeShow"

data-show="ns.viewA.show"

data-model="ns.viewA.viewModel">

...

<select data-bind="source:options,value:selectedOption"

data-text-field="display"

data-value-field="id"></select>

...

</div>

The second as

<div data-role="view"

data-title="Form Expected"

data-init="ns.viewB.init"

data-before-show="ns.viewB.beforeShow"

data-show="ns.viewB.show"

data-model="ns.viewB.viewModel">

...

<form>

...

<select data-bind="source:options,value:selectedOption"

data-text-field="display"

data-value-field="id"></select>

...

</form>

</div>

viewA is a read-only/navigational view for traversing a hierarchy and inspecting details of the current node.
viewB is an edit view for the one such node in viewA.

The discrepancy is that in viewA, when selectedOption changes, the value of selectedOption is the actual object, not the id of the object.
However, in viewB, value of selectedOption is properly set to the ID of the option selected from the drop down.

I've tried changing the markup around each to see if i could get matching behaviors from the two, however, I've not been able to replicate
identical behavior between the them. Any ideas why this occurs?

MVVM

answered on 18 Sep 2013

6 answers

86 views

using Razor & remote links?

Is there a way to use external links, equivalent to using the data-rel="external"?

I have this and I am trying to open the log out link outside my app so the # is not appended.
items.AddLink().Icon("settings").Url("Logout","Account").Text("Settings");

General Discussions

answered on 18 Sep 2013

3 answers

1.2K+ views

DataSource transport with function

Hi,

According to DataSource Transport API, I am using the following code for my transport:

01.var historyTransport = {

02. read: function (options) {

03. $.ajax({

04. url: "../../AppData/Batch/History.json",

05. dataType: "json",

06. success: function (response) {

07. // notify the data source that the request succeeded

08. console.log('successfully load History.json');

09. var rows = [];

10. $.map(response.rows, function (n,i) {

11. var obj = { status: n.cell[0] };

12. rows.push(obj);

13.

14. });

15. var historyData = {};

16. historyData.rows = rows;

17. options.success(historyData);

18.

19. },

20. error: function (response) {

21. // notify the data source that the request failed

22. console.log('failed to load History.json');

23. }

24. });

25. }

26.}

I am having a very strange problem with this options.success function. my json object from the ajax response looks like this

Object {rows: Array[7675], page: 1, total: 1, records: "1"}

options.success() has no problem to parse it. However, if i want to do some reformatting by creating a separate object historyData, i will have an error from options.success() saying TypeError: Cannot call method 'slice' of undefined, unless i name the array property of historyData - rows.

it almost feels like the DataSource options.success() function is expecting an array called rows. it was pure coincident that my original json contains this rows property.

can anyone help to explain whether my finding is true? and what exactly is this options parameter? there is no document about it.

Thanks
amp

Data Source

answered on 18 Sep 2013