Using KoGrid in HotTowel template - knockout-mvc

Question

I am trying to use KoGrid in a HTML view within the HotTowel SPA template. I created a simple view:
<section>
<h2 class="page-title" data-bind="text: title"></h2>
<div class="gridStyle" data-bind="koGrid: gridOptions"></div>
</section>
and added the model data in the JS:
define(['services/logger'], function (logger) {
var vm = {
activate: activate,
title: 'My Grid'
};
return vm;
//#region Internal Methods
function activate() {
var self = this;
this.myData = ko.observableArray([{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 }]);
this.gridOptions = { data: self.myData };
return true;
}
//#endregion
});
The grid is on the page, but the styling seems to be rendering widths and positions completely wrong so that columns are on top of each other and most data is not visibly correct. The KoGrid.css file is being referenced correctly.
Thanks for any help.

Answer 1

The core of the problem is that "when KOGrid does its binding in Durandal/HotTowel, the KOGrid element is not yet part of the DOM". You need to ensure that KOGrid does not do its binding until after the view is attached. This can be achieved as follows:
1) Add a new observable to the viewmodel to hold a boolean value for whether the view has been attached or not by durandal:
isAttachedToView = ko.observable(false)
and expose it
isAttachedToView: isAttachedToView
2) Up date it to be true when the viewAttached function callback is invoked:
function viewAttached() {
isAttachedToView(true);
return true;
}
3) Surround your HTML with a ko if statement to ensure that bit of HTML is not evaluated (i.e. kogrid does not do its binding) until after the view is attached:
<!-- ko if: isAttachedToView() -->
<div data-bind="koGrid: { data: ...
<!-- /ko -->
4) Reset isAttachedToView to be false on deactivating view
function deactivate() {
isAttachedToView(false);
}
And expose this:
deactivate: deactivate

Answer 2

You have probably already figured this one out but was also faced with the same problem today. A quick look at the chrome inspector told me that koGrid dimensional properties have not registered correctly and this tells me its a timing issue. I found an answered question relating to the same problem here.
I did try this solution but there is still some work to do to make it play ball nicely. I have decided to give koGrid a miss since I don't really want all it's functionality anywayz :)