Kogrid: last column of grid is only partly visible

Question

In koGrid 2.1.1:

Somehow, the last column of a grid is only partly visible.

I reproduced this bug with an example using the default config of the grid.

HTML:

<div class="gridStyle" data-bind="koGrid: gridOptions"></div>

CSS:

.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 400px;
height: 300px;
}

Script:

function mainVm() {
    var self = this;
    this.myData = ko.observableArray([{
        name: "Moroni",
        age: 50
    }, {
        name: "Tiancum",
        age: 43
    }, {
        name: "Jacob",
        age: 27
    }, {
        name: "Nephi",
        age: 29
    }, {
        name: "Enos",
        age: 34
    }]);
    this.gridOptions = {
        data: self.myData
    };
};
ko.applyBindings(new mainVm());

Fiddle: http://jsfiddle.net/4hUcc/1/

I cannot find what is causing this. Got any clue??

Answer 1

Found it, in koGrid-2.1.1.debug.js, lines 2098 - 2114:

 var getWidths = function () {
        var $testContainer = $('');
        $testContainer.appendTo('body');
        // 1. Run all the following measurements on startup!
        //measure Scroll Bars
        $testContainer.height(100).width(100).css("position", "absolute").css("overflow", "scroll");
        $testContainer.append('');
        window.kg.domUtilityService.ScrollH = ($testContainer.height() - $testContainer[0].clientHeight);
        window.kg.domUtilityService.ScrollW = ($testContainer.width() - $testContainer[0].clientWidth);
        $testContainer.empty();
        //clear styles
        $testContainer.attr('style', '');
        //measure letter sizes using a pretty typical font size and fat font-family
        $testContainer.append('M');
        window.kg.domUtilityService.LetterW = $testContainer.children().first().width();
        $testContainer.remove();
    };

window.kg.domUtilityService.ScrollH and window.kg.domUtilityService.ScrollW are being calculated incorrectly. Fixed my problem by setting them both to 0. (zero)

Thanks!

Answer 2

In order to calculate the scrolling bars' width and height, koGrid adds a temporary div in your body once the javascript file is loaded.

Therefore if you add the koGrid-x.js in the head of your HTML, the body wont be load and the scrolling bars measure will fail.

On the other hand, if you add the koGrid-x.js file at the end of your body element, it will be already loaded and everything should work as expected.