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

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: