Questions on Kendo UI for jQuery Forum

1 answer

77 views

Hi.
I have a problem, I'm using a list data kendoDropDownList and my app are fine but when I select an item that has a very long name overlaps the label. How I can fix this?.

Attached pictures. Thanks

General Discussions

answered on 26 Feb 2013

1 answer

62 views

Dropdown not populating in grid

When i used this method http://demos.kendoui.com/web/grid/foreignkeycolumn.html, to show the dropdown it fails

This i my structure
var dataAction = eval("(" + Jsondata+ ")");

function BindEquipmentGrid() {
//Create equipment grid
$("#EquipmentGrid").kendoGrid({ // create Grid from div HTML element Kendo
selectable: "row",
sortable: {
mode: "multiple", // enables multi-column sorting
allowUnsort: true
},
resizable: true,
columns: [
{
field: "Feild1",
title: "Feild1",
width: 160
},
{
field: "Feild2",
title: "Feild2",
width: 180
},
{ title: 'Action', field: 'ActionId', width: 200, values: dataAction },
],
editable: true
});
}

But the result it shows is [object][object] on cell select

General Discussions

answered on 26 Feb 2013

6 answers

657 views

Nested views bindings

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

642 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

479 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

433 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

131 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

383 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

410 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