Questions on Kendo UI for jQuery Forum

1 answer

83 views

Hi ,
I developed a single page application using kendo splitter for the whole page layout (one horizontal splitter on the top and two vertical on the middle).
I have a kendoGrid inside one of my splitter too (since maybe its related to Grid ,however I disabled scroll for grid scrollable: false). Although I get the scroll for my whole page and also inside splitters on PC , I don't get them on iPad.
I read most of the threads about scroll in iPad and I included all these files too but no success. (I managed to get scroll on android chrome browser but its too slower than normal pages)

.Include("~/scripts/kendoui/kendo.web.min.js")
.Include("~/scripts/kendoui/kendo.mobile.min.js")
.Include("~/scripts/kendoui/kendo.mobile.core.min.js")
.Include("~/scripts/kendoui/kendo.mobile.scroller.min.js")

I would appreciate any help on this issue,
Regards,
Atiyeh

Splitter

answered on 30 Jul 2013

1 answer

232 views

How to update and delete current array item

Hi,
I have a master/detail scenario where I am trying to access the "current" array item and either update or delete it. The update/delete buttons are outside of the template so I am not sure how to accomplish this.

I have prepared a jsbin that has an array of names that can be added to and edited, but I cant update or delete. Any help would be appreciated!

http://jsbin.com/aligem/241/edit

Thank you,
David A.

MVVM

answered on 30 Jul 2013

2 answers

206 views

Connect to a JSON Web Service

Hello,
I am trying to connect to ASMX Web Service that returns JSON. Service receives strUser and strPassword as a parameter, and returns array of SomeEvents. SomeEvent has two fields: eventID and eventName.
I am getting internal server error, and I believe it has something to do with the format of the data I'm sending/receiving. I would be grateful if you take a look and tell me how to solve this:

var eventsModel = (function () {

var eventModel = {

id: 'eventID',
fields: {
Text: {
field: 'eventName',
defaultValue: ''
}
}
};
var eventsDataSource = new kendo.data.DataSource({
schema: {
model: eventModel
},
transport: {
read: {
url: ASMX + "GetOrganizerEventsJSON",
type: "POST",
data: { strUser: "someUsername", strPasswort: "somePassword" },
contentType: "application/json; charset=utf-8",
dataType: "json",
}
}
});
return {
events: eventsDataSource,
};
}());

Web method looks like this:
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.JSON)> _
Public Function getOrganizerEventsJSON(ByVal strUser As String, ByVal strPasswort As String) As SomeEvent()

General Discussions

answered on 30 Jul 2013

5 answers

655 views

Grid DetailExpand on selection

I've implemented a way to expand the detail view of a grid by selecting a row in the grid, but in doing so I noticed the expand arrow no longer works. Note that if the details are already expanded, the arrow will still cause the details to collapse. I've created a jsfiddle illustrating the problem here:

http://jsfiddle.net/RaRXg/

Is there another way to achieve the desired effect (expand by row selection) which still allows the arrow to expand the selection?

Thanks.

Grid

answered on 30 Jul 2013

8 answers

271 views

TabStrip cut off on latest version of PhoneGap in iOS simulator

I was going through Burke's example for building your first PhoneGap app with Kendo. After some tweaking to the code (that tutorial doesn't work anymore with the current version of PhoneGap) I got the app to load the Kendo Mobile resources and the TabStrip appears, yet it's cut off. It almost looks like the status bar of the iPhone is pushing the entire window down.

Any idea what I can do to fix this? See the attached screen shot.

TabStrip (Mobile)

answered on 30 Jul 2013

1 answer

368 views

Using existing WCF Services for data source

Hello,
I've a quite-huge SL5 application that uses WCF services to retrieve data... I've been asked to create a subset of that project that uses kendo UI for web/mobile enviorment where SL5 cant be used.... I was wondering if all my BO and WCF services can be re-used...I think I'll use ASP.NET MVC4 with it's kendo ui package...thanks

Data Source

answered on 30 Jul 2013

1 answer

159 views

Expand icon disappears since update from v2013.1.319 to v2013.2.716

In our application we use treeviews on multiple places. We use an array as initial data.

treeview = new kendo.ui.TreeView(element, {

dataSource: new kendo.data.HierarchicalDataSource({ data: [rootModel] })

});

Rather then using the transport / read and schema functionality we hook to the expand event and do our own async (ajax) requests. This was all fine in v2013.1.319 but since we updated to v2013.2.716 what happens is the following.

- The initial data is represented in the tree view, including expand icons when the node has children available.
- We click an expand icon to load new data
- A ajax request is sent to our back-end
- The expand icon disappears completely
- Ajax request completes
- Current children are removed and the loaded children are inserted into the loaded node.
- The collapse icon appears

This only happens the first time a node is expanded. When expanding a node that was expanded before the icon does not disappears.

Is this by design? Can we somehow prevent the expand icon from disappear?.

On a side note: Is it possible to set a loading icon programmatically (similar to the "Binding to remote data" demo) during the ajax request?

TreeView

answered on 30 Jul 2013

5 answers

211 views

TypeError thrown when trying to do drag and drop on treeview

I am getting the following error when I enable drag and drop on the treeview:

Uncaught TypeError: Cannot read property 'nextSibling' of undefined

This happens when I try and drag an item in the tree.

I am using Google Chrome but have also observed the same behavior in Firefox.

Here's the code I'm using to create the treeview:

this.dataSource = new kendo.data.HierarchicalDataSource({

schema: {

model: { id : "id", hasChildren: true, children: "layers" }

}

});

// treeview for navigation]

this._treeViewSelector = uiElement;

$(uiElement).kendoTreeView({

dragAndDrop: true,

checkboxes: {

checkChildren: true

},

dataSource: this.dataSource

});

And then to add data to the model I am using:

this.dataSource.add({id: id, text: name, expanded: true, checked: true, children: []});

Thanks for the help!

TreeView

answered on 30 Jul 2013

1 answer

78 views

modelview close tap event passed to underlying widget

kendoui mobile version 2013.2.716, test on ipad mini with package with phonegap 2.9.0

(1) listview

<ul data-role="listview" data-type="group" id="itemListView" data-click="listViewClick" data-style="inset">

<li><label class="km-listview-label"><textarea id=${idval} onfocus="clearArea(this);" style="width:100%;height: 100px;" maxlength="150">input answer</textarea></label></li>

</ul>

(2) modelview

<div data-role="modalview" id="submitDialog" style="width: 40%; height: 13em;">

<div data-role="header" class="navbarStyle">

<div data-role="navbar"><h3>info</h3></div>

</div>

<div style="margin:.5em auto; text-align: center;font-size: 1.6em;" id="subcontent">submit ok</div>

<div style="margin:0 auto; text-align: center;font-size: 1.3em; padding-top:0.5em;">

<a data-click="closeSubmitDialog" type="button" data-role="button"

style="width:8em;background-color:#06b375;color:#ffffff;">Enter</a>

</div>

(3) javascript

function openSubmitDailog(msg){

if(MYAPP.dialogOPEN==false){

MYAPP.dialogOPEN=true;

var modalView=$("#submitDialog").data("kendoMobileModalView");

modalView.open();

if(msg)

$("#subcontent").html(msg);

}

function closeSubmitDialog(){

//setTimeout(function(){

var modalView=$("#submitDialog").data("kendoMobileModalView");

modalView.close();

MYAPP.dialogOPEN=false;

if(MYAPP.status==8){

init();

}

else if(MYAPP.status==4){

MYAPP.app.navigate("#loginpage");

}

//return;

//},100);

}

process :
openSubmitDailog -----> modelview popup in midled of view ------> press "Enter" in modelview --------> closeSubmitDialog ----------> modelview close
-----------> the underlying widget in listview can receive tap event when close modelview

for example , when close modelview , textarea in listview can receive tap event ,so keyboard will be shown up! I think this a bug in new version

ModalView

answered on 30 Jul 2013

2 answers

103 views

grid Transport: pass just 1 param to Update (not the whole line)

Hi guys,
I'm working with a Read/Update trasport on kendo grid.
On Update I'd like to pass just 1 param to my server handler.

here is my grid:

$("#userGrid").data("kendoGrid").setDataSource(new kendo.data.DataSource({

//data: userList,

transport: {

read: {

url: MyAxitea_Config.baseURL + "Services/UserHandler.ashx/GetUserListByCurrentUser",

type: "POST"

},

update: {

url: MyAxitea_Config.baseURL + "Services/UserHandler.ashx/UpdateUserAuthById",

dataType: "json",

type: "POST"/*,

data: function (options) {

return {

id: options.IdUtente,

abilitato: options.Abilitato

}

}*/

}

},

schema: {

model: {

id: "IdUtente",

fields: {

Nome: { type: "string", editable: false },

Cognome: { type: "string", editable: false },

Alias: { type: "string", editable: false },

IdPrivilegio: { type: "int", editable: false },

Email: { type: "string", editable: false },

Abilitato: { type: "boolean" },

DataDisattivazione: { type: "date", editable: false },

}

},

pageSize: 10,

sort: { field: "IdPrivilegio", dir: "asc" }

}));

as you can see, in this case, only 1 param is editable ("Abilitato")
To update this field I only need tha updated value and the id.

With the current code, serverside, I get the whole line and since the object is quite big (for example it also contains a encoded string of the user picture),
I need to reduce the transported data.
Is that possible?

side question:
is it possible to implement transport only for update? using as dataSource a local list? I tried but I got only errors!
Thanks
Fabio!

Grid

answered on 30 Jul 2013