Questions on Kendo UI for jQuery Forum

3 answers

158 views

Current Kendo + RequireJS = iOS 7 tabstrip bug

Current Kendo releases produce a display bug in iOS 7 when used together with RequireJS.

We have been searching for the root of this problem for quite some time now and found the following source after a lot of testing:

Affected Kendo UI versions we tested:

2013.3.1324 and 2013.3.1511

Version 2013.2.1021, which is still the default in the Telerik AppBuilder, is NOT affected. With this version, everything works fine (even with current RequireJS versions).

Affected RequireJS versions we tested:

2.1.8 and 2.1.11

As far as we tested, this affects iOS 7 only.

To reproduce this, take these steps from the default AppBuilder Kendo UI Mobile project:

- update kendo.mobile.min.js and kendo.mobile.all.min.css to the desired version

- change the JS includes in the header in index.html to:

<script src="cordova.js"></script>

<script data-main="scripts/main" src="scripts/require.js"></script>

- strip all views from index.html except "tabstrip-home" (keep the layout)

- add main.js to scripts-folder:

require.config({

paths: {

'jquery': "../kendo/js/jquery.min",

'kendo': "../kendo/js/kendo.mobile.min"

},

shim: {

'jquery': {

exports: "jquery"

},

'kendo': {

deps: ["jquery"],

exports: "kendo"

}

});

// Expose the app module to the global scope so Kendo can access it.

var app;

require(

[

"app"

],

function (

application

) {

app = application;

app.init();

}

);

- change app.js to:

define(["jquery", "kendo"], function ($, kendo) {

var _kendoApplication;

return {

init: function () {

_kendoApplication = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout"});

}

});

Thats it. Most basic version of the Test-Project with RequireJS.
As soon as you remove RequireJS, everything work fine again with iOS 7.

General Discussions

answered on 13 Mar 2014

7 answers

303 views

Data Schema for GeoJson data

I'm sorry, but after searching the DataSource API and this forum I am not finding out how to do the following:

I have a Node.JS server connected to a PostGIS database. It stores a number of rows that have a field called: outline that is a long GeoJSON object. In my model, I declare the simple fields (number, data, etc.) just fine. But is this correct for the JSON data. I will connect this to a KendoGrid, but I do not want the user to see it.

What I want him to do is sort, select, etc. based on the other fields, and then I will use the hidden GeoJSON outline (I will fetch it with the dataSource.data() method to get the values from it for map display.

But first, is this the "json" a correct type for the outline?

function buildDataModel() {

DataModel.data = new kendo.data.DataSource({

type:"json",

pageSize: 5000, //change to infinite when bug fixed.

transport:{

read:{

url:AppGlobals.serverURL + "Search",

dataType:"json"

}

},

schema:{

data:"results",

total:"count",

model:{

fields:{

pid:{ type:"number" },

size:{ type:"number" },

date:{ type:"date" },

type:{ type:"string" },

egpl_date:{ type:"date" },

cocom:{ type:"string" },

country:{ type:"string" },

product_name:{ type:"string" },

outline:{ type:"json" }

}

},

error:function (e) {

alert("DataMode.js datasource error: " +

"\nthrew: " + e.errorThrown +

"\nstatus: " + e.status +

"\nerrors:" + e.errors +

"\nurl: " + e.sender.transport.options.read.url);

},

change:function (e) {

newData(e);

}

});

}

Data Source

answered on 13 Mar 2014

3 answers

322 views

Dropdownlist inside Grid inside IFrame - Popup behind IFrame

I have a DropDownList I'm creating inside a KendoGrid - it binds fine, but it's inside of an IFrame. Under a specific set of circumstances (two rows of data), the popup direction is Down and the selection list is hiding "behind" or "inside" the IFrame. I need the PopUp list to either go Up or be brought forward over the IFrame.... thoughts?? I've tried this a few ways using z-index and setting the popup to append to the Form or IFrame better, but no luck...

DropDownList

answered on 13 Mar 2014

5 answers

170 views

[Solved] Setting pageSize when initializing from HTML

Is there a way to set the default pageSize on the dataSource for a grid when initializing from HTML? I'm using mostly the JavaScript widgets (hence posting in the web forum), but I also have licensed access to the JSP wrappers. I just have not gotten any experience or knowledge using the kendo taglib yet.

Goal: Increase performance.

Background: due to some legacy code, I have to initialize the grid from an HTML table. Most of the time it works just fine, but sometimes this page will have a large amount of data (thousand of rows), and so the grid is very slow, or locks up.

Documentation has suggested using virtual scrolling, and while setting the virtual scroll option on the widget "works" when initializing from HTML, it's still very slow. I see no noticeable difference in performance. My thought is that this could be because I'm not setting a pageSize on the dataSource. It would need to be done (I think) before initializing the grid, otherwise the page will still be very slow to load and could still lock up; I don't see how I can do that.

Is there a way to do this with the JSP wrappers/taglib? Or is there something I'm missing in the JavaScript side of things?

Grid

answered on 13 Mar 2014

3 answers

177 views

Kendo UI SPA Sushi Example

I have downloaded and extracted the Kendo UI examples to my local PC. I setup an IIS application and mapped it to the web examples folder. However, when I attempt to run the web examples such as SPA Sushi, the following page content is displayed:

Note:
Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol). If the demo is not working as expected, please host the Kendo folder on a web server.

I am running the app through IIS (e.g. http://localhost/KendoUI/web/spa/Sushi.html) on a PC using 64 bit Windows 7.

Any ideas on how to resolve this?

thanks

General Discussions

answered on 13 Mar 2014

6 answers

292 views

Markdown?

Is it possible to use Markdown within the Kendo editor? I have spent a few days trying to find this and cannot. I was under the impression that the parsing engine could be substituted.

Editor

answered on 13 Mar 2014

3 answers

159 views

Trouble with groupHeaderTemplate and MVVM

Hi,

I have the grid and the model below. Everything works but getSum, I get a "getSum is not defined" error. Any idea?

<div class="k-widget"
data-role="grid"
data-bind="source: nbh"
data-columns="[{title: 'Tâche', field: 'task'}, {title: 'Heures', field: 'hours', width: '125px', format: '{0} h', aggregates: ['sum'],
footerTemplate: 'Total: #= data.hours? data.hours.sum: 0 # h'}, {title: 'Personnelle', field: 'personal', hidden: true,
groupHeaderTemplate: '#= value? \'Projets\':\'Tâches personnelles\'# (#= getSum(value) # h)'}]">
</div>

bound to this model:

var model = kendo.observable({

nbh: new kendo.data.DataSource({
aggregate: [{ field: "hours", aggregate: "sum" }]
}),

getSum: function (value) {
var datasource = this.nbh;
var result;
//loops through the dataSource view
$(datasource.view()).each(function (index, element) {
//compares view value with the current template value
if (element.value === value) {
result = element.aggregates.hours.sum; //gets the aggregate value
}
});

return result;
}

});

Thanks,

Alexis

Grid

answered on 13 Mar 2014

1 answer

73 views

How can i prevent tabstrip moving with onscrenn keyboard

Hello,

i build a mobile web for our company using for our BlackBerry Z10.

When using a form with some inputs ... the tabstrip moves up when onscreen keyboard comes up.
Is there a way to prevent tabstrip moving with onscreen keyboard ?

I readed some threads here but the solutions there doesn`t work for me.

Regards

Jürgen

TabStrip (Mobile)

answered on 13 Mar 2014

1 answer

307 views

Treeview cancel drop event

I am creating folders in tree structure like we have windows explorer.My requirement is that if I am dropping a node into another node and the target node already contains a node with the same name as of source node then the source node should be placed back to its original position.The checking of same node name takes place in the controller and it returns false if it's duplicate.At this moment, I want to move the node at it's original position.I have tried e.setValid(false) and e.preventDefault() but it's not working. Please provide me the solution.

TreeView

answered on 13 Mar 2014

2 answers

154 views

Date formatting and schema isn't working

Hi,
I have this grid example:
http://plnkr.co/edit/Oh5wApcRePJqNv0F31HJ?p=preview
In it, I state that one field will be to type: "date".
In the array creation, every corresponding element is equal to "new Date()".
Nevertheless, in the grid itself, the value appears as a string.
Any idea why?

Grid

answered on 13 Mar 2014