hi all, new to kendo, new to json. Can't seem to get any data into a kendo.data.DataSource. Am using the new 2012 q1 mobile release and ASP.NET MVC 3. Here's my code:
js:
// create a template using the definition on the application page (the .cshtml file) var templateFundingSources = kendo.template($("#template-funding-sources").html()); dataSource = new kendo.data.DataSource({ transport: { read: { url: "/Home/GetCardFundings", // the remove service url dataType: "json", // JSONP (JSON with padding) is required for cross-domain AJAX data: { //additional parameters sent to the remote service _cardId: cardID } } }, schema: { data: "cardFunding", model: { id: "CardID", fields: { CardID: { type: "number", nullable: false }, RemainingBalance: { type: "number" } } } }, change: function () { // subscribe to the CHANGE event of the data source $("#listview-card-fundings").html(kendo.render(templateFundingSources, this.view())); } }); dataSource.read();
//test data source to see it's defined dataSource.add({ cardID: 4, remainingBalance: 34 });
and MVC code:public JsonResult GetCardFundings(int _cardId) { List<CardFunding> cfs = new List<CardFunding>(); CardFunding cf = new CardFunding(); cf.CardID = 1; cf.RemainingBalance = 3; cfs.Add(cf); CardFunding cf1 = new CardFunding(); cf1.CardID = 1; cf1.RemainingBalance = 3; cfs.Add(cf); return Json(cfs, JsonRequestBehavior.AllowGet); }
The server-side code gets called and returned, and no execptions are tripped anywhere there or in the .js.
Any help greatly appreciated.
Kendo team: Awesome job on the project. Looking forward to mastering your framework.
{
"country"
:[
{
"codeLong"
:
"AUT"
,
"codeShort"
:
"AT"
,
"name"
:
"Austria"
},
{
"codeLong"
:
"BEL"
,
"codeShort"
:
"BE"
,
"name"
:
"Belgium"
},
{
"codeLong"
:
"BGR"
,
"codeShort"
:
"BG"
,
"name"
:
"Bulgaria"
}
]}
var
ds =
new
kendo.data.DataSource({
transport: {
read: {
url:
"http://localhost:10040/.functions.portlets/services-rest/countriesservice/countriesuk"
,
dataType:
"json"
}
},
schema: {
data:
"country"
,
model: {
fields: {
codeLong: { type:
"string"
},
codeShort: { type:
"string"
},
name: { type:
"string"
}
}
}
}
});
$(
"#grid"
).kendoGrid({
dataSource: ds,
height: 280,
scrollable: {
virtual:
true
},
columns: [
{ field:
"codeLong"
, title:
"codeLong"
},
{ field:
"codeShort"
, title:
"codeShort"
},
{ field:
"name"
, title:
"name"
},
]
});
});
[{
"codeLong"
:
"AUT"
,
"codeShort"
:
"AT"
,
"name"
:
"Austria"
},
{
"codeLong"
:
"BEL"
,
"codeShort"
:
"BE"
,
"name"
:
"Belgium"
},
{
"codeLong"
:
"BGR"
,
"codeShort"
:
"BG"
,
"name"
:
"Bulgaria"
}]
<div id= "kendoChart" style="width:50%; float:right; height:450px; margin-top:-20"></div>
<script type="text/javascript">
//var rtData = [3, 15, 30, 45, 92];
var chartDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/DomainService/ContactedChartDomainService.svc/json/GetContactedChartViews",
dataType: "json"
},
schema:
{
data: "GetContactedChartViewsResult.RootResults"
}
}
});
$(function () {
$("#kendoChart").kendoChart({
dataSource: chartDataSource,
title: { text: "Stats" },
seriesDefault: {
type: "pie"
},
series: [
{
field: "Occurances",
categoryField: "ContactedName"
//type: "pie"
}],
tooltip: {
visible: true
}
});
});
</script>
</div>
my JSON out put is as follow
{"GetContactedChartViewsResult":{"TotalCount":3,"RootResults":[
{"ContactedID":1,"ContactedName":"No","Occurances":5},
{"ContactedID":2,"ContactedName":"Under Consideration","Occurances":1},
{"ContactedID":3,"ContactedName":"Follow Up","Occurances":11}]}}
Kind Regards,
Waseem
<
ul
id
=
"list"
data-template
=
"ul-template"
data-bind
=
"source: theView"
>
</
ul
>
<
script
id
=
"ul-template"
type
=
"text/x-kendo-template"
>
<
li
>
id: <
span
data-bind
=
"text: ID"
></
span
>
name: <
span
data-bind
=
"text: Name"
></
span
>
</
li
>
</
script
>
var
a = kendo.observable({
theList:
new
kendo.data.DataSource({
transport: {
read:
"/api/building"
},
change:
function
() {
a.theView =
this
.view();
kendo.bind($(
"#list"
), a);
},
schema: {
model: {
id:
"ID"
,
fields: {
ID: {
editable:
false
,
nullable:
false
},
Name: {
editable:
true
,
nullable:
true
}
}
}
}
}),
theView: {}
});
var
app = Sammy(
'#main'
,
function
() {
// define a 'get' route that will be triggered at '#/path'
this
.get(
'#/path'
,
function
() {
a.theList.read();
});
//default route, routes back to #/path
this
.get(
''
,
function
() {
this
.app.runRoute(
'get'
,
'#/path'
) });
});
$(document).ready(
function
() {
//starts sammy
app.run();
});
Hello,
I am trying to implement a scenario of swapping values between the list boxes using the drag & drop feature. A snap shot of what's to be done is displayed in the attachment "Task.jpg"
The Drag & Drop feature works perfectly fine in Firefox, but doesn’t works at all in Chrome & IE (7 & 8).
The key aspects here are:
To further provide you the details on the implementation, the created code is added to jsFiddle at the location http://jsfiddle.net/ravisingh/5B6mq/1/ . Also attached with the post are the images of Chrome & Firefox while debugging the issue.
Manoj Kapoor