Being very new to Kendo UI, I'm trying to populate a grid using the following code:
In the <body> of an ascx file (it is hosted inside another page):
<body>
<script src="jquery.min.js"></script>
<script src="kendo.web.min.js"></script>
<script src="knockout-2.2.1.js"></script>
<script src="knockout-kendo.min.js"></script>
<script src="Jobs.js"></script>
<div id="grdJobs" data-bind="kendoGrid: grdJobs"></div>
<script type="text/javascript">
initJobs('<%=GetRootUrl() %>');
</script>
</body>
In Jobs.js:
function JobViewModel() {
var self = this;
self.jobData = new ko.observableArray([]);
self.grdJobs = {
data: self.jobData,
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
resizable: true,
columns: [
{ title: "State", field: "State" },
{ title: "Job ID", field: "JOBID" },
{ title: "Owner", field: "Owner" },
{ title: "Description", field: "Description" },
{ title: "Run State", field: "RunState" },
{ title: "Start Time", field: "StartTime" },
{ title: "End Time", field: "EndTime" },
{ title: "Elapsed Time", field: "ElapsedTime" },
{ title: "Progress", field: "Progress" },
{ title: "Agent", field: "agent" },
{ title: "Last Action", field: "LastAction" }
],
selectable: "single"
};
};
var g_oJobViewModel = new JobViewModel();
var g_strRootUrl;
function initJobs(strRootUrl) {
g_strRootUrl = strRootUrl;
ko.applyBindings(g_oJobViewModel);
loadJobs();
}
function loadJobs() {
var strJobsHandler = g_strRootUrl + "/JobResultViewerHandler";
var joData = { Operation: "Load", Agent: "All Agents", DateRange: "Today", Owner: "My Jobs", FromDate: new Date().toString(), ToDate: new Date().toString() };
$.ajax({
url: strJobsHandler,
type: 'post',
dataType: 'json',
data: JSON.stringify(joData),
success: function (joResult) {
var realData = [];
if (joResult.Data.length > 0) {
$.each(joResult.Data, function (index, obj) {
var arrayElem = {};
$.each(obj, function (key, value) {
var strKey = joResult.Dictionary[key];
if (strKey.indexOf(" ") > -1)
strKey = strKey.replace(" ", "");
arrayElem[strKey] = joResult.Dictionary[value];
});
realData.push(arrayElem);
});
g_oJobViewModel.jobData.removeAll();
ko.utils.arrayPushAll(g_oJobViewModel.jobData(), realData);
g_oJobViewModel.jobData.valueHasMutated();
}
},
error: function(xhr, errorType, exception) {
//log? or display message?
}
});
}
Now the problem:
If I leave "data: self.jobData" in the view model, I see the grid column headers, but loadJobs() DOES NOT get called. If I comment out "data: self.jobData" in the view model, loadJobs DOES get called and the server returns the correct data and it maps correctly to the grid colum fields accoring to looking at the data in a debug session of Google Chrome. However, in BOTH cases, I DO NOT see ANY data in the grid! This is VERY frustrating and I have NO idea idea what I am doing wrong. :( It seems like something is going wrong in the binding, resulting in the data not being displayed in the grid. Except for some differences in how a page is constructed in another part of the application where that page uses a C# HTMLWriter on the server to create the HTML and uses $(document).ready(function() to declare the kendoGrid, the rest of the JS code is virtually identical to what I've described above. Is this enough difference that that page would display data in its grid and mine doesn't? I would think not, but at this point, I don't know. It's too much work to rework my code like the other page so I'd like to resolve my grid data display issue within the above Javascript if this is at all possible with the least amount of effort. I just hope I'm not asking for too much. TIA
In the <body> of an ascx file (it is hosted inside another page):
<body>
<script src="jquery.min.js"></script>
<script src="kendo.web.min.js"></script>
<script src="knockout-2.2.1.js"></script>
<script src="knockout-kendo.min.js"></script>
<script src="Jobs.js"></script>
<div id="grdJobs" data-bind="kendoGrid: grdJobs"></div>
<script type="text/javascript">
initJobs('<%=GetRootUrl() %>');
</script>
</body>
In Jobs.js:
function JobViewModel() {
var self = this;
self.jobData = new ko.observableArray([]);
self.grdJobs = {
data: self.jobData,
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
resizable: true,
columns: [
{ title: "State", field: "State" },
{ title: "Job ID", field: "JOBID" },
{ title: "Owner", field: "Owner" },
{ title: "Description", field: "Description" },
{ title: "Run State", field: "RunState" },
{ title: "Start Time", field: "StartTime" },
{ title: "End Time", field: "EndTime" },
{ title: "Elapsed Time", field: "ElapsedTime" },
{ title: "Progress", field: "Progress" },
{ title: "Agent", field: "agent" },
{ title: "Last Action", field: "LastAction" }
],
selectable: "single"
};
};
var g_oJobViewModel = new JobViewModel();
var g_strRootUrl;
function initJobs(strRootUrl) {
g_strRootUrl = strRootUrl;
ko.applyBindings(g_oJobViewModel);
loadJobs();
}
function loadJobs() {
var strJobsHandler = g_strRootUrl + "/JobResultViewerHandler";
var joData = { Operation: "Load", Agent: "All Agents", DateRange: "Today", Owner: "My Jobs", FromDate: new Date().toString(), ToDate: new Date().toString() };
$.ajax({
url: strJobsHandler,
type: 'post',
dataType: 'json',
data: JSON.stringify(joData),
success: function (joResult) {
var realData = [];
if (joResult.Data.length > 0) {
$.each(joResult.Data, function (index, obj) {
var arrayElem = {};
$.each(obj, function (key, value) {
var strKey = joResult.Dictionary[key];
if (strKey.indexOf(" ") > -1)
strKey = strKey.replace(" ", "");
arrayElem[strKey] = joResult.Dictionary[value];
});
realData.push(arrayElem);
});
g_oJobViewModel.jobData.removeAll();
ko.utils.arrayPushAll(g_oJobViewModel.jobData(), realData);
g_oJobViewModel.jobData.valueHasMutated();
}
},
error: function(xhr, errorType, exception) {
//log? or display message?
}
});
}
Now the problem:
If I leave "data: self.jobData" in the view model, I see the grid column headers, but loadJobs() DOES NOT get called. If I comment out "data: self.jobData" in the view model, loadJobs DOES get called and the server returns the correct data and it maps correctly to the grid colum fields accoring to looking at the data in a debug session of Google Chrome. However, in BOTH cases, I DO NOT see ANY data in the grid! This is VERY frustrating and I have NO idea idea what I am doing wrong. :( It seems like something is going wrong in the binding, resulting in the data not being displayed in the grid. Except for some differences in how a page is constructed in another part of the application where that page uses a C# HTMLWriter on the server to create the HTML and uses $(document).ready(function() to declare the kendoGrid, the rest of the JS code is virtually identical to what I've described above. Is this enough difference that that page would display data in its grid and mine doesn't? I would think not, but at this point, I don't know. It's too much work to rework my code like the other page so I'd like to resolve my grid data display issue within the above Javascript if this is at all possible with the least amount of effort. I just hope I'm not asking for too much. TIA
2 Answers, 1 is accepted
0
David
Top achievements
Rank 1
Rank 1
answered on 09 Mar 2013, 07:22 PM
Well, it seems the root of my issue may not be with the data attribute at all my rather with the columnMenu attribute because the data appeared when that attribute was commented out! Another developer on the project has been experienced several undefined columns even though only a static number of columns have been defined, with no explanation as to why this is happening other than removing this attribute seemed to "fix" the issue. If anyone has any thought on why columnMenu is causing us grief, any comments/suggestions are much appreciated.
0
Hello David,
Please note that Kendo-Knockout is not our product - it is an external library which is not part of the official KendoUI distribution. Because of this reason, assistance related to Kendo-Knockout is out of the scope of our standard support services.
KendoUI has its own MVVM implementation that is deeply integrated in all framework features and widgets. Our recommendation is to use Kendo MVVM - firstly the integration will be much easier and secondly you would be able to benefit from the support service.
The issue which you described in not a known one. If you believe that it is directly related to our product, please try to reproduce it only with standard HTML elements, jQuery and KendoUI. Provide us with a sample that demonstrates the behaviour and we will do our best to help.
Thank you in advance for the understanding and cooperation.
Regards,
Alexander Valchev
the Telerik team
Please note that Kendo-Knockout is not our product - it is an external library which is not part of the official KendoUI distribution. Because of this reason, assistance related to Kendo-Knockout is out of the scope of our standard support services.
KendoUI has its own MVVM implementation that is deeply integrated in all framework features and widgets. Our recommendation is to use Kendo MVVM - firstly the integration will be much easier and secondly you would be able to benefit from the support service.
The issue which you described in not a known one. If you believe that it is directly related to our product, please try to reproduce it only with standard HTML elements, jQuery and KendoUI. Provide us with a sample that demonstrates the behaviour and we will do our best to help.
Thank you in advance for the understanding and cooperation.
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!