var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost/apartment/data.php?api=profile",
dataType: "json",
type: "GET"
}
}
});
var viewModel = kendo.observable({
datasource: dataSource
});
var listView = new kendo.View("profile-template", {
model: viewModel
});
var listHtml = listView.render();
$("#profile-view table").html(listHtml);
My TEMPLATE:
<script id="profile-template" type="text/x-kendo-template">
<tr>
<td>Name</td><td> <span>#= datasource.name #</span></td>
</tr>
<tr>
<td>Email</td><td>#= name #</td>
</tr>
<tr>
<td>Mobile Number</td><td>9629014027</td>
</tr>
<tr>
<td>Apartment</td><td>Green Age</td>
</tr>
</script>
transport: {
read: {
url: "http://localhost/apartment/data.php?api=profile",
dataType: "json",
type: "GET"
}
}
});
var viewModel = kendo.observable({
datasource: dataSource
});
var listView = new kendo.View("profile-template", {
model: viewModel
});
var listHtml = listView.render();
$("#profile-view table").html(listHtml);
My TEMPLATE:
<script id="profile-template" type="text/x-kendo-template">
<tr>
<td>Name</td><td> <span>#= datasource.name #</span></td>
</tr>
<tr>
<td>Email</td><td>#= name #</td>
</tr>
<tr>
<td>Mobile Number</td><td>9629014027</td>
</tr>
<tr>
<td>Apartment</td><td>Green Age</td>
</tr>
</script>
6 Answers, 1 is accepted
0
0

Parag
Top achievements
Rank 1
answered on 09 Oct 2013, 07:26 AM
Hi,
I am getting this error:
Uncaught TypeError: Object #<Object> has no method 'slice'
I am working on mobile app. I followed your instructions and modified according to mobile events like this..
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost/apartment/data.php?api=profile",
dataType: "json"
}
}
});
$("#profileList").kendoMobileListView({
dataSource: dataSource,
template: $("#profile-template").text()
});
I am getting this error:
Uncaught TypeError: Object #<Object> has no method 'slice'
I am working on mobile app. I followed your instructions and modified according to mobile events like this..
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost/apartment/data.php?api=profile",
dataType: "json"
}
}
});
$("#profileList").kendoMobileListView({
dataSource: dataSource,
template: $("#profile-template").text()
});
0

Parag
Top achievements
Rank 1
answered on 09 Oct 2013, 08:13 AM
Hi,
I fixed this issue by changing the response format . Initially i was getting JSON object in reponse. Now i changed into JSON ARRAY. Its working fine.
But i would like to know how to append JSON OBJECT into HTML?
I fixed this issue by changing the response format . Initially i was getting JSON object in reponse. Now i changed into JSON ARRAY. Its working fine.
But i would like to know how to append JSON OBJECT into HTML?
0

Ignacio
Top achievements
Rank 1
answered on 09 Oct 2013, 06:55 PM
So the way this works is that you assign a datasource to your html ListView.
And you assign a template to your ListView.
This template repeats itself for every element on the datasource.
So, to append elements to your html you just need to add those elements to your datasource.
Here is an example
And you assign a template to your ListView.
This template repeats itself for every element on the datasource.
So, to append elements to your html you just need to add those elements to your datasource.
Here is an example
0

Parag
Top achievements
Rank 1
answered on 09 Oct 2013, 10:45 PM
I believe list views works with a response of Collection type, but what if my response is not a collection. For example, I just want to append profile information which comes as a json object, and not a json array. What kind of view should be used in that case?
0

Parag
Top achievements
Rank 1
answered on 10 Oct 2013, 12:16 AM
OK. I finally figured it out. What you need is to specify the schema, and the model, and at least of field in your model
<div id="profile"></div>
<script type="text/x-kendo-template" id="template">
<div>Name : #:name#</div>
<div>Phone : #:phone#</div>
<div>Landmark : #:landmark#</div>
<div>City : #:city#</div>
</script>
<script>
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://54.254.164.98:8888/profile",
dataType: "jsonp"
}
},
schema: {
model: {
fields: {
user_id: { type: "string" },
name: { type: "string" },
phone: { type: "string" },
landmark: { type: "string" },
city: { type: "string" }
}
}
},
change: function() {
$("#profile").html(kendo.render(template, this.view()));
}
});
dataSource.read();
</script>
<div id="profile"></div>
<script type="text/x-kendo-template" id="template">
<div>Name : #:name#</div>
<div>Phone : #:phone#</div>
<div>Landmark : #:landmark#</div>
<div>City : #:city#</div>
</script>
<script>
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://54.254.164.98:8888/profile",
dataType: "jsonp"
}
},
schema: {
model: {
fields: {
user_id: { type: "string" },
name: { type: "string" },
phone: { type: "string" },
landmark: { type: "string" },
city: { type: "string" }
}
}
},
change: function() {
$("#profile").html(kendo.render(template, this.view()));
}
});
dataSource.read();
</script>