Questions on Kendo UI for jQuery Forum

3 answers

406 views

Autosync + Remote Data = RangeError: Maximum call stack size exceeded

I have a treeview with a shared HierarchicalDataSource.
I'm using binding to remote data like in the demo http://demos.kendoui.com/web/treeview/remote-data.html
I've enabled checkboxes and set autoSync on the DataSource to true.

When I click open a node, I get RangeError: Maximum call stack size exceeded
and the node doesn't open.

As an alternative, I tried manual syncing, but then only the root nodes that changed are send to the server, not the child nodes.

Is there an explanation/example somewhere on how to persist (checkbox) data with a treeview?
All the demos I can find are working with readonly data.

TreeView

answered on 25 Dec 2012

2 answers

125 views

How to use the transport object with local/in-momory data?

Hi,

the datasource documentation (http://docs.kendoui.com/api/framework/datasource#filter) says, that the transport object can also be used with local / in-memory data.

All samples are based on transport objects with remote data.

Can anybody show a small sample which uses the transport object with local data und implements methods for create, read and update to see how data is manipulated and made persistent in the local data store.

Thanks
Florian

Data Source

answered on 24 Dec 2012

1 answer

137 views

Failed to retrieve attributes in a Json response

This is my first time using Kendo UI and I want to get a Json object from a Json file.

The Json string from Java controller looks like
{"model": "Contract","rules": [{"initValues": ["5000"],"applyToFields" :["name","number"],"name": "MaxLengthRule"},{"name": "StartDateEndDateRule","applyToFields" :["startDate","endDate"]},{"name": "HierarchyValidationRule","applyToFields" :["hierarchy"]},{"name": "MasterContractValidationRule","applyToFields" :["hierarchy", "master"]},{"name": "JudgeDuplicatedRule","applyToFields" :["number"]},{"name": "ContractTypeRule","applyToFields" :["type"]}]}

And below is the script code. I want to get the rule attribute one by one. Now the alert with "Success!!!!!!!" is shown,
but I can only see some "undefined" in page after that. Could you help me on how to convert the Json string? Thanks a lot.

<script>
// document ready function
$(document).ready(function() {

var $validation = $("#validation");

// make an ajax call
// to retrieve a JSON response
$.ajax({
// the url to the service
url: "validation.do",
contentType: "json",
success: function(data) {
alert("success!!!!!!!!!");
$.each(data, function(index, item){
$validation.append("<tr><td>" + item.model + "</td>" +
"<td>" + item.rules + "</td></tr>");
});
}
});
});
</script>

Thanks
Best regards
Arnold

General Discussions

answered on 24 Dec 2012

2 answers

436 views

Starting a listview in edit mode?

Can a ListView use an edit type template (with two-way data-bind attributes), so that when the listview is bound to its data all its items are immediately editable on first display? This would be weird if there were a lot of items (multiple pages) in the listview, but it is not so strange with just one or two. Or does the two way binding only happen when a call to listview.edit() (or its declarative alternative) is made to invoke the use of that template? The editing listview demo requires the user to click an edit button, and thus requires there to be both a display template and separate edit template.

ListView

answered on 24 Dec 2012

1 answer

301 views

Inline editing buttons without create command.

Hi,

I have a grid that has a column with a destroy button but no create button. I want the user to be able to delete or add new records but not change them. The problem is the grid won't create the update and cancel buttons because it is looking for a create button in my command column. I fixed it by changing the line looking for the create column to this:

command = getCommand(column.command, "edit") || getCommand(column.command, "destroy");

Is there a better way to do this without modifying the kendo code? Or could this be added in an upcoming release so I don't have to modify the code again when updating?

Thanks!

Grid

answered on 24 Dec 2012

1 answer

198 views

Best practice for modeling collection properties

Hello all,

I am struggling with the best way to model collection properties for a kendo.data.Model used in a kendo.data.DataSource, and configure it is such a way that data-bind attributes understand. For example, say my view model looks like this:

var entityModel = kendo.data.Model.define({

id: 'Id',

fields: {

Id: { editable: false, defaultValue: '00000000' },

Name: {},

Created: { type: 'date' },

Contract: {

StartDate: { type: 'date' },

EndDate: { type: 'date' },

Received: { type: 'date' }

},

Vendor: {

Name: {},

Street: {},

City: {},

State: {},

Zip: {},

Phone: {},

Email: {}

},

Invoices: []

}

});

var entityDataSource = new kendo.data.DataSource({

schema: {

model: entityModel

},

transport: {

...

}

});

As you can see, the Invoices property is an array - a collection of invoices. How do I get the DataSource to understand this, and how would I bind Invoices to the view? Would this work?

<div data-template="invoiceTemplate" data-bind="source: Invoices"></div>

What if I wanted to represent this collection of Invoices as a kendoGrid which I could add, edit, and delete from? Is this functionality supported out-of-the-box or will I need to create a separate Invoice DataSource?

Thanks for any assistance you can provide.

Data Source

answered on 24 Dec 2012

1 answer

150 views

Window Error: Microsoft JScript runtime error: Invalid template

i have a error in window .
my solution:

Person:

@{

ViewBag.Title = "Index";

}

<script src="@Url.Content("~/scripts/models/personModel.js")" type="text/javascript"></script>

<script src="@Url.Content("~/scripts/stores/personStore.js")" type="text/javascript"></script>

<script src="@Url.Content("~/scripts/views/personView.js")" type="text/javascript"></script>

<script id="PersonDetail" type="text/x-kendo-template">

@Html.Partial("PersonDetail")

</script>

<div class="k-rtl">

<div id="PersonGrid"></div>

</div>

and PersonDetail:

@*

@(Html.Kendo().TimePicker()

.Name("timepicker")

.Value("10:00 AM")

)

*@

and PersonView.js:

$(function () {

$("#PersonGrid").kendoGrid({

dataSource: personStore,

height: "600px",

sortable: {

mode: "multiple",

allowUnsort: true

},

pageable: true,

//groupable: true,

scrollable: true,

selectable: "row",

filterable: true,

columns: [

{ command: [{ name: "edit", text: "edit" }, { name: "destroy", text: "del" }], title: "", width: 150 },

{ field: "FName", title: "First Name", width: 50 },

{ field: "LName", title: "Last Name", width: 100 }

],

editable: { mode: "popup",confirmation: "Are you sure?", template: kendo.template($("#PersonDetail").html()) },

edit: function (e) {

var title = $(e.container).parent().find(".k-window-title");

var update = $(e.container).parent().find(".k-grid-update");

var cancel = $(e.container).parent().find(".k-grid-cancel");

$(title).html('<div>Edit</div>');

$(update).html('<span class="k-icon k-update"></span>Save');

$(cancel).html('<span class="k-icon k-cancel"></span>Cancel');

},

toolbar: [{ name: "create", text: "Add"}]

});

after click edit button in grid, i see this error:

Microsoft JScript runtime error: Invalid template:'

if remove this

@(Html.Kendo().TimePicker()

.Name("timepicker")

.Value("10:00 AM")

)

in persiondetail is working!

please help me.

Window

answered on 24 Dec 2012

3 answers

413 views

Replace Tab HTML

Hello,

Is there a way to replace Tab's HTML? So far, the only solution I have is to remove the existing tab and then create a new tab with the updated HTML.

Best regards,

Simon

TabStrip

answered on 24 Dec 2012

5 answers

601 views

Datepicker not working at all in Chrome

Hey there,

I'm having a problem with the datepicker in google chrome. It builds the input and calendar icon, but if I click the calendar icon, nothing happens. It's even a problem on the demo page on the KendoUI website: http://demos.kendoui.com/web/datepicker/index.html

The version of Chrome i'm using is: Version 23.0.1271.64 m

Has anyone else got this problem?

Cheers,
Ben

DatePicker

answered on 24 Dec 2012

1 answer

137 views

Not able to bind dynamic json data to Kendo UI

I tried the same thing explained in other thread. But I am not able to bind the json data to Kendo UI grid.
<div id="grid"></div>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="../../Scripts/kendo/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var jData = new kendo.data.DataSource({
transport: {
read: {
url: "/Test/IndexTest",
dataType: "json"
}
},
});

$("#grid").kendoGrid({
dataSource: jData,
columns: [
{
field: "TestDe",
title: "Description"
},
{
field: "Url",
title: "TestStr"

}],
height: 200,
scrollable: true,
pageable: true,
sortable: {
mode: "multiple"
}
});
});
</script>

Json format is {"TestDe":null,"TestList":[],"Url":"dsgyuddufgufh"}

Code behind Controller
public JsonResult IndexTest()
{
TestTableSql t = new TestTableSql();
var a=t.GetTestTableList();
return Json(a, JsonRequestBehavior.AllowGet);
}

Grid

answered on 24 Dec 2012