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 in

Answer 1

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

Answer 2

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 3

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