Hiding and unhiding a koGrid element

Question

I've started working with the koGrid recently, and I really like almost everything about it - except for the fact that if it's hidden when the page first loads, you're going to be in huge trouble.

I've put together a jsfiddle that demonstrates what I'm talking about:

http://jsfiddle.net/smithkl42/L5uGT/3/

<div>
    <div data-bind="visible:visible">
        <div id="grid1" style="width: 50%; height: 200px;"
        data-bind = "koGrid: { data: myObsArray, footerVisible:false }" > </div>
    </div>
    <br/>
    <div>
        <div style="width: 50%; height: 200px;"
        data-bind = "koGrid: { data: myObsArray, footerVisible:false }" > </div>
    </div>
    <button data-bind="click:toggleFirstGrid">Toggle First Grid Visibility</button>
</div>

And:

$(function () {
    function vm() {
        var self = this;
        self.myObsArray = ko.observableArray([{
            firstName: 'John',
            lastName: 'Doe'
        }, {
            firstName: 'Jane',
            lastName: 'Doe'
        }]);

        self.visible = ko.observable(false);
        self.toggleFirstGrid = function(){
            self.visible(!self.visible());
        }
    };
    ko.applyBindings(new vm());
});

If I setup two grids exactly the same, but hide the first one when the page loads, it looks massively wonky when it gets unhidden.

From what I can tell, this is a known issue:

https://groups.google.com/forum/#!msg/knockoutjs/wHpGSUi_Nfo/3i4LY1CMLfkJ

But the workaround that's mentioned on the thread above doesn't work for this particular issue, as you can see from this jsfiddle:

http://jsfiddle.net/smithkl42/L5uGT/4/

Has anybody figured out a decent workaround for it?

Answer 1

Try moving the visible binding to the koGrid DIV tag itself. That seems to work.

<div>
  <div style="width: 50%; height: 200px;" data-bind="visible:visible, koGrid: { data: myObsArray, footerVisible:false }"></div>
  <br/>
  <div style="width: 50%; height: 200px;" data-bind="koGrid: { data: myObsArray, footerVisible:false }"></div>
  <button data-bind="click:toggleFirstGrid">Toggle First Grid Visibility</button>
</div>

http://jsfiddle.net/6abwy/