My grid keeps on coming up empty. What could I be doing wrong?
HTML
<head>
<title></title>
<script src="include/libraries/jquery/jquery-1.12.3.min.js"></script>
<link href="include/libraries/kendo/css/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="include/libraries/kendo/css/kendo.common-bootstrap.min.css" rel="stylesheet" />
<script src="include/libraries/kendo/js/kendo.all.js"></script>
<script src="include/libraries/kendo/js/kendo.all.min.js"></script>
<script src="include/libraries/kendo/js/kendo.aspnetmvc.min.js"></script>
<script src="include/libraries/kendo/js/kendo.custom.min.js"></script>
<script src="include/libraries/kendo/js/kendo.timezones.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="grid">
<div class="demo-section k-content wide">
<div>
<h4>Add or update a record</h4>
<div data-role="grid"
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="[
{ 'field': 'CourseID' },
{ 'field': 'CourseName' },
{ 'field': 'IsActive' },
]"
data-bind="source: courses,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
</div>
</div>
<script>
var viewModel = kendo.observable( {
isVisible: true,
onSave: function(e) {
kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
},
courses: new kendo.data.DataSource({
schema: {
model: {
id: "CourseID",
fields: {
CourseID: { type: "number" },
CourseName: { type: "string" },
IsActive:{type:"boolean"}
}
}
},
batch: true,
transport: {
read: {
type:"GET",
url: "http://localhost:51447/api/Courses",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
})
});
kendo.bind($("#grid"), viewModel);
</script>
</div>
</body>
Controller Code
// GET: api/Courses
public IQueryable<object> GetCourses()
{
return db.Courses.Select(
o => new
{
CourseID = o.CourseID,
CourseName = o.CourseName,
IsActive = o.IsActive
});
//}).Where(l => l.IsActive == false);
}
JSON returned
[{"CourseID":1,"CourseName":"Beauty Therapy","IsActive":true},{"CourseID":2,"CourseName":"Software Development","IsActive":true},{"CourseID":3,"CourseName":"Bookkeeping and Accounting","IsActive":true}]
2 Answers, 1 is accepted
Hello Simpson,
Are there any JavaScript errors on the page? Looking at the pasted code snippets I have noticed that the type of the read configuration is set to be JSONP, however it does not seems like the server method is returning the result as JSONP. Thus, you should set it to be JSON instead if the service is in the same domain as the consumer. Otherwise, you should enable the CORS for WebAPI.
Regards,Rosen
Telerik
Rank 1