Integrate the koGrid with the Durandal/HotTowel template

Question

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.

Answer 1

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.

Answer 2

The previous solution will ensure the grid displays, however, sorting does not work for me at least. As mikekidder commented above 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);
    logger.log('viewAttached');
    $(window).trigger('resize');
    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 3

This update applies to Durandal 2.x

Starting with Durandal 2.0, there is a way to specify bindings that should be deferred until the composition complete.

For kogrid to work correctly, all that's needed is to execute this line of code as part of the Durandal framework initialization:

composition.addBindingHandler('koGrid');

The composition variable in this example is a reference to the Durandal composition module.

See the documentation for more information: http://durandaljs.com/documentation/Interacting-with-the-DOM.html