Questions on Kendo UI for jQuery Forum

1 answer

57 views

using function for pageSize: behaves unexpected

I am trying to set the pageSize dynamically. If i do:
localStorage.getItem('pageSize') || 10,

i do not have a problem.

But if i do:
pageSize: function () {
return parseInt(localStorage.getItem('pageSize')) || 10;
},

the data-source gets reloaded multiple times and NaN appears on the bottom of the grid - page NaN of 100 instead of 1 of 100

Thanks

Grid

answered on 19 Sep 2013

3 answers

76 views

Cursor gets inserted before Zero with IE, leads to _many_ user errors

When tabbing into a numeric text box, on the webkit browsers when you 'tab' into a numeric text box (with default value of 0), the cursor gets inserted after the 0. Given a table with 3 columns of numeric boxes 3-tab-4-tab-5 yields 3,4,5 as the leading zero just gets dropped. In IE, because the cursor goes after the zero, 3-tab-4-tab-5 yields 30,40,50. I have tried the latest release and stable, and the bug persists.

I know I can select the text when focusing the numeric box using the hack here. But is there a way to make IE behave like the other browsers without selecting the text?

NumericTextBox

answered on 19 Sep 2013

1 answer

180 views

Binding a grid to html table RAZOR syntax

Does anyone know how to bind a kendo grid to a html table using Razor syntax? I have seen

$("#grid").kendoGrid({
height: 430,
sortable: true
});

put nothing for the Razor syntax.

Grid

answered on 19 Sep 2013

1 answer

146 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

195 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

107 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

52 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

143 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

456 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

90 views

Imagine something like this

in Kendo:

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

General Discussions

answered on 18 Sep 2013