Questions on Kendo UI for jQuery Forum

6 answers

643 views

Hello.

I have some parent container which is bind to ViewModel#1. This container contains other child container that is bind to ViewModel#2.

I’m not sure yet, but it looks like whole content of child container is bind to ViewModel#1 ONLY.

Is it possible to have such type of binding (having nested views) in Kendo? Would it have some potential issues with binding in that case? (Ambiguous bindings, issues when perform binding, etc.)

If it is not possible, what approach would you recommend?

Thanks ahead,

Andriyan.

MVVM

answered on 26 Feb 2013

1 answer

634 views

How to catch timeout and errors from a get in DataSource?

Hi

I've got the following code, but it's not clear to me how I respond to errors when the get fails (e.g. server down). It's also not clear to me how I should handle a request time out condition?

Are there methods I can hook into (like the click: handler) to help catch these conditions?

Here's the code.

return new kendo.data.DataSource({

serverFiltering:true,

serverPaging:true,

serverSorting:true,

pageSize:20,

transport:{

read:{

url:getContentsListURL() // returns a URL of course!

}

},

schema:{

data:"items",

total:"total_results"

}

});

Thanks.
--
John Clayton

General Discussions

answered on 26 Feb 2013

10 answers

455 views

Can't click on editor fields if selectable is turned on

I am running into very odd issues with a kendo grid when selectable is turned on with inline editing.
If selectable is turned off the grid functions without issue but as soon as I turn it on I have multiple odd issues.

1 - When editing a row I am unable to click on the items - I can tab between them but clicking has no impact.
2 - they don't data bind correctly - I have to tab off the last item I edit or it is discarded when clicking update.

Is this a known issue? It has become a major issue - I either need to fix it or drop a feature the client wanted.

Grid

answered on 26 Feb 2013

1 answer

423 views

DataSource.sync() doesn't call create after adding a model to a dataSource generated by ASP.NET MVC ListView Helper

Hi Kendo,

I tried this on http://jsfiddle.net/rusev/E3vYH/ and it works fine. Now I have a listView generated by ListView Kendo Helper and I add a model by calling DataSource.add() method, but when I call DataSource.sync() it doesn't call create and I don't see any http activity on my browser's network tab. I copied the code generated by the kendo helper and pasted it into a test html file and it doesn't work neither. It did add the model to the listView but never calls create. Here is my test file:

<!DOCTYPE html>
<html>
<head>
<title>Testing Kendoui dataSource</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/x-kendo-tmpl" id="template">
<div data-id = ${CountryCode}>
<p>${CountryName}</p>
</div >
</script>
<script>
$(function () {
$("#target").kendoListView ({
"dataSource": {
"transport": {
"prefix": "",
"read": function () {
alert("reading...");
},
"create": function () {
alert("creating...");
},
"destroy": function () {
alert("destroying...");
},
"update": function () {
alert("updating...");
}
},
"type": "aspnetmvc-ajax",
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "SubaccountId",
"fields": {
"SubaccountId": {
"type": "number"
},
"CountryCode": {
"type": "string"
},
"CountryName": {
"type": "string"
}
}
}
}
},
"template": kendo.template($('#template').html()),
"selectable": "single"
});
$('#addButton').bind("click", function () {
var ds = $('#target').data('kendoListView').dataSource;
ds.add({

SubaccountId: 1,
CountryCode: 'US',
CountryName: 'United States'

});
ds.sync();
});
});
</script>
</head>
<body>
<div>
<button id="addButton">Add Country</button>
</div>
<div id="target"></div>
</body>
</html>

I tried with different jquery and kendo version too. No luck.

How do I make this work.

Thanks

Data Source

answered on 26 Feb 2013

1 answer

127 views

Autocomplete not loading items (when using MVVM)

I am getting the response back from the server, and everything looks good, but for some reason items are not been displayed for the autocomplete widget. If someone could point out what I'm doing wrong, that would be much appreciated.

Response from the server when I type something in the autocomplete box:

{"d":[{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":0,"Name":"Name0"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":1,"Name":"Name1"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":2,"Name":"Name2"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":3,"Name":"Name3"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":4,"Name":"Name4"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":5,"Name":"Name5"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":6,"Name":"Name6"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":7,"Name":"Name7"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":8,"Name":"Name8"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":9,"Name":"Name9"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":10,"Name":"Name10"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":11,"Name":"Name11"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":12,"Name":"Name12"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":13,"Name":"Name13"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":14,"Name":"Name14"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":15,"Name":"Name15"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":16,"Name":"Name16"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":17,"Name":"Name17"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":18,"Name":"Name18"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":19,"Name":"Name19"}]}

Autocomplete definition and binding:

<input id="acMedications" data-role="autocomplete" data-text-field="Name" data-bind="source: dsMedication, value: SelectedMedication"

style="width: 400px;" placeholder="Enter value..." />

ViewModel and DataSource definition:

$(document).ready(function() {

var viewModel = kendo.observable({

dsMedication: new kendo.data.DataSource({

transport: {

read: {

contentType: "application/json; charset=utf-8",

type: "POST",

url: "../Services/svcMedication.asmx/SearchMedication",

dataType: "json",

cache: false

},

update: {

contentType: "application/json; charset=utf-8",

type: "POST",

url: "../Services/svcMedication.asmx/SaveMedication",

dataType: "json",

cache: false

},

destroy: {

url: "../Services/svcMedication.asmx/DeleteMedication",

type: "DELETE",

dataType: "json",

cache: false

},

create: {

url: "../Services/svcMedication.asmx/SaveMedication",

type: "PUT",

cache: false

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {

models: kendo.stringify(options.models)

};

}

options.MedicationParam = $('#acMedications').val();

return kendo.stringify(options);

}

},

batch: true,

schema: {

data: "d",

model: {

id: "MedicationId",

fields: {

MedicationId: {

type: "number"

},

Name: {

type: "text"

}

}),

SelectedMedication: null,

HasChanges: false,

save: function() {

this.dsMedication.sync();

this.set("HasChanges", false);

},

remove: function() {

if (confirm("Are you sure you want to delete this record?")) {

this.dsMedication.remove(this.SelectedMedication);

this.set("SelectedMedication", this.dsMedication.view()[0]);

this.change();

}

},

showForm: function() {

return this.get("SelectedMedication") !== null;

},

change: function() {

this.set("HasChanges", true);

}

});

kendo.bind($("#fmMedication"), viewModel);

});

THANK YOU!!

AutoComplete

answered on 26 Feb 2013

3 answers

373 views

Load HTML from database to editor (PHP)

I'm using the Kendo UI Web Editor to allow the user to add formatted content.

I then save this content to a MySQL database.

What is the correct way to load such content to the editor again to allow for further editing?

I tried

editor.value("<?=$html;?>");

and

editor.paste("<?=$html;?>");

Where $html is the string with the HTML from the MySQL-database. However this causes the editor to be blank (no content) and for the editor widget to not initialize (it is only shown as a blank textarea).

Editor

answered on 26 Feb 2013

1 answer

404 views

TreeView append with nested data, children dataSources do not grow to get new ids

A treeview TV uses a remote hierarchical data source.

A button click on the page launches some ajax whose done() handles an array of node data that is returned.

nodes =

[ { id:101, text: "One", hasChildren: true }

, { id:201, text: "Two", hasChildren: true }

, { id:301, text: "Three", hasChildren: false }

]

The nodes are nested as follows

for (var i=1;i<nodes.length;i++) {

nodes[i-1].items = [ nodes[i] ];

}

and appended to a treeview

TV.append ( nodes[0] );

The treeview appends them correctly as

One

+- Two

+- Three

However, the problem is that the children dataSources for nodes One and Two do not get updated. The top level dataSource of TV does have get updated. I stepped through get() using developer tools and saw that the method was properly descending into the children dataSources to locate the target value... it just wasn't there :(

uid101 = TV.dataSource.get(101); // some uid

uid201 = TV.dataSource.get(201); // undefined

uid301 = TV.dataSource.get(301); // undefined

I have also tried doing a series of appends (using the original unnested data) and had a similar to worse problem (the TV nodes don't even get placed at the correct levels).

parent = null;

parent = TV.append ( nodes[0], parent );

parent = TV.append ( nodes[1], parent );

parent = TV.append ( nodes[2], parent );

Can you suggest a technique that works for adding a new 'path' of nested nodes to TV from with my done() handler ?

TreeView

answered on 26 Feb 2013

3 answers

284 views

Data Source Filter - Negation

Is negation in the filter supported?

I need to do something on the lines of:

dataSource.filter({ field: "firstname", operator: "not startswith", value: "foo" });

Data Source

answered on 26 Feb 2013

1 answer

133 views

Error Microsoft JScript runtime error: Object doesn't support property or method 'kendoDateTimePicker'

I have to follow all steups in documentation but its raise error while control is running i.e Microsoft JScript runtime error: Object doesn't support property or method 'kendoDateTimePicker'. reply ..

General Discussions

answered on 26 Feb 2013

2 answers

747 views

Dropdown on Grid using inline edit - MVC Wrappers

Hi I've been testing the ASP MVC and didnt find a way to use the grid edit inline with a field with dropdown list. is this possible? Even on the samples provided i've adapted the sample "Editing_Custom" to be Inline edit and get the same error which is "Uncaught ReferenceError: Employee is not defined "

Sorry, didnt mentioned initially, but the goal is to use the Inline edit, and i get the error when a new row is added to the grid.

Thanks in advance.
Congrats for your products.

Grid

answered on 26 Feb 2013