Data not being loaded in kendo ui grid, this is MVC project and url of read is returning proper object array in json format. There is no error in console but no grid visible on page.
$(document).ready(function () {
var viewModel = kendo.observable(
{
isVisible: true,
Professions: new kendo.data.DataSource({
schema: {
model: {
id: "ProfessionKey"
}
},
batch: true,
transport: {
read: {
url: "Default/GetAllProfessionsJson",
dataType: "Json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
}
);
kendo.bind($("#grid"), viewModel);
});
and html is
<div data-role="grid"
data-toolbar="['create', 'save']"
data-columns='["ProfessionKey", ProfessionEnglish", "ProfessionFrench", "ProfessionGerman"]'
data-bind="source: Professions">
</div>
and following files are referenced
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2012.2.710/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/angular.min.js")"></script>
Scope of
var viewModel
should be global/outside the function.