Integrate the koGrid with the Durandal/HotTowel template

I work on an asp.net solution with the Durandal template.

I try to use the koGrid (https://github.com/Knockout-Contrib/KoGrid) which is compatible with knockout. When inserting this grid in a test page managed by Durandal, it doesn't work: the grid seems to be there but not correctly displayed.

We noticed that if we resize the window, then the grid adjust correctly.

Does anyone already succeed integrate this koGrid in a Durandal/HotTowel template?

Steps to reproduce the problem:

Create a new ASP.NET MVC project and choose the Durandal template
Add the koGrid in the project (available in Nuget)
Place this grid on a view and add dummy data
Run and display the view containing the grid

Here is a zip containing a little ASP.NET MVC project to reproduce the problem: https://www.dropbox.com/s/15rphyhkqp1h8py/KOGrid-HotTowelTemplate.zip

Thanks for your help.

Solution

This should be considered a workaround only! Applies to Durandal.Core 1.2 with koGrid-2.1.1.js. If either changes to fix this behavior, I will update the post.

Add a viewAttached() function in your viewmodel (and be sure to add it to your object literal) like so:

function viewAttached() {
    logger.log('Home View Attached', null, 'home', true);
    $(window).trigger('resize');
    return true;
}

The viewAttached function occurs after the composition binding, and the trigger will cause the koGrid to update its width/height observables. koGrid listens for this event.

NOTE: There are still CSS conflicts with the HotTowel template that you will need to resolve. The SPA uses a font-size of 18px on the body tag. Also the panel checkboxes should be hidden, a possible conflict with the Bootstrap CSS.