Questions on Kendo UI for jQuery Forum

1 answer

116 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

400 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

253 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

133 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

120 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

344 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

557 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

127 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

1 answer

106 views

Dragging splitter causes screen to be dark

Hi I"m using the basic splitter and I am wondering why when I drag to resize there is a dark overlay over the entire viewport. This does not happen in the demos and I've done nothing to implement this? Am i dong something wrong?

<div id="splitter" style="min-height:700px">

<div class="left-panel" style="width:100px">

<div id="cashPanel" class="left-panel"></div>

</div>

<div >

<div id="offsetPanel" class=""></div>

</div>

<div>

<div id="premiumList" style="height:100%">

<div id="searchPremMatchList"></div>

</div>

$("#splitter").kendoSplitter({

orientation: "horizontal",

panes: [

{ collapsible: false, size: "250px" },

{ collapsible: false, size: "700px" },

{ collapsible: false }

]

});

Splitter

answered on 24 Dec 2012

1 answer

253 views

ModalView with input text field, closing on Android when keyboard appears.

Hi There,

I have a ModalView with an input text field, which closes on Android as soon as the onscreen keyboard appears.

In the browser (Chrome) it works ok, here's the source.

<div data-role="modalview" id="modalview-add-to-cart" style="width: 95%; height: 270px;">

<div data-role="header">

<div data-role="navbar">

<span>Add to order</span>