Questions on Kendo UI for jQuery Forum

10 answers

575 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

466 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

157 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

424 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

433 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

328 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

155 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

788 views

[Solved] 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

2 answers

359 views

[Solved] Kendo Grid selected row grid to form control

Hi,

I am trying to load a html form just below the kendo grid for edit from the selected Kendo Grid row. I am able to get the selected grid row using events and dataitem. ( var dataItem = this.dataItem($(e.currentTarget).closest("tr"));)

How do we bind it to the editable html form? Do we have any functionality like gridtoform? Is there any demo related to this?

Grid

answered on 25 Feb 2013

1 answer

107 views

ListView doesn't work properly on navigating to other external pages

Hello Kendo Admin,

            Scenario;
                          I'm using a listview and after it loads the page on my android 2.3.3. I have noticed that the ">" on the grid sometimes shows up and sometimes DOESN'T shows up.

             Problem:
                        I've notice that when the ">" sign on the grid doesn't shows up. The listview is LOCK and I can't navigate to other pages. But, when it shows up. I can navigate to othere pages and works smoothly. I have NO CONTROL on why is this happend?

             I have attached the screen shot and it's in listview.zip. The source code is in index1.zip.

   Please help..

Thanks

ListView (Mobile)

answered on 25 Feb 2013