I have an ASP.Net MVC5 app into which I have added a couple of views that use the excellent KnockoutJs KoGrid (http://knockout-contrib.github.io/KoGrid/#/examples). My problem is I have created a third view that uses the KoGrid and despite following the pattern used on the other views I cannot convince KoGrid to display the data. I have created a plnkr for the problem here:http://plnkr.co/edit/0OaqD2?p=preview.
The "real" view has a couple of tabs, the first to display database details, the second should display Workflow Rules in a ko grid. Here's the view model I return from the controller:
public class AdminViewModel
{
public DatabaseDetails DatabaseDetails { get; set; }
public List<WorkflowRule> WorkflowRules { get; set; }
}
public class WorkflowRule
{
public int WorkflowRuleId { get; set; }
public string ReceivePortName { get; set; }
public string MessageType { get; set; }
public string TriggerSource { get; set; }
public string TargetEmailAddress { get; set; }
public int AssignedToId { get; set; }
public string AssignedToName { get; set; }
}
public class DatabaseDetails
{...
My knockout vm is as follows (I have removed boilerplate paging code to keep more concise):
function ViewModel(vm) {
var self = this;
this.workflowRules = ko.observableArray(vm.WorkflowRules);
this.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) {
data = returnedPayload.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
self.setPagingData(data,page,pageSize);
});
} else {
$.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) {
self.setPagingData(returnedPayload, page, pageSize);
});
}
}, 100);
};
this.gridOptions = {
afterSelectionChange: function () { return true; },
data: self.workflowRules,
enablePaging: true,
pagingOptions: self.pagingOptions,
filterOptions: self.filterOptions,
selectWithCheckboxOnly: true,
selectedItems: self.selected,
canSelectRows: true,
displaySelectionCheckbox: true,
columnDefs: [{ field: 'ReceivePortName', displayName: 'Receive Port', width: 130 },
{ field: 'MessageType', displayName: 'Message Type', width: 200 },
{ field: 'TriggerSource', displayName: 'Source', width: 60 },
{ field: 'TargetEmailAddress', displayName: 'Email', width: 130 },
{ field: 'AssignedToName', displayName: 'Assigned To', width: 140 },
]
};
};
The key parts of my view are as follows:
@model TVS.ESB.BamPortal.Website.Models.AdminViewModel
@using System.Web.Script.Serialization
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{ string data = new JavaScriptSerializer().Serialize(Model); }
<div class="tab-pane" id="WorkflowRules">
<h4>Workflow Rules</h4>
<div id="KoGrid" data-bind="koGrid: gridOptions"></div>
</div>
@section Scripts {
<script src="~/KnockoutVM/WorkflowRules.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
<script type="text/javascript">
var vm = new ViewModel(@Html.Raw(data));
ko.applyBindings(vm, document.getElementById("KoGrid"));
</script>
}
Here's a screen grab of how Chrome displays the view:
Could anyone please tell me where I've gone wrong - why no data is displayed in the grid?
I've just realised that if I reduce the size of the browser displaying the kogrid then the data appears. I've made a short video of this here: http://biztalkers.com/video/kogridproblem.mp4
