KO Grid Display Isseues, On resize Gird shows one row. Images also included

Question

Using the following.

1) Visual Studio 2012. 2) Hot towel template. 3) downloaded ko grid and and its css.

home.html

<section id="alerts-view" class="view">
 <header>
        <a class="btn btn-info btn-force-refresh pull-right" 
            data-bind="click: refresh" href="#"><i class="icon-refresh"></i> Refresh</a>
        <h3 class="page-title" data-bind="text: title"></h3>
        <div class="article-counter">
            <address data-bind="text: alerts().length"></address>
            <address>found</address>
        </div>
    </header>
    <div  data-bind="koGrid: gridOptions"></div>
  </section>

home.js

define(['services/datacontext', 'durandal/plugins/router'],
    function (datacontext, router) {

        var alerts = ko.observableArray();
        isAttachedToView = ko.observable(false);

        var activate = function (routeData) {
            if (routeData.id == undefined)
                return datacontext.getAlerts(alerts);
        };

        var deactivate = function () {
            isAttachedToView(false);
            alerts([]);
        };

        var refresh = function () {
            return datacontext.getAlerts(alerts);
        };


       var vm = {
            activate: activate,
            deactivate: deactivate,
            refresh: refresh,
            alerts: alerts,
            gridOptions: {
                            data: alerts,
                            canSelectRows: true,
                            enableColumnResize: true,
                            footerVisible: true,
                            displaySelectionCheckbox: true,
                            enableSorting: ko.observable(true),
                            columnDefs: [
                                            { field: 'efficency', displayName: 'Green or C02 Bus' } ......................

                                        ]

                           },
            isAttachedToView: isAttachedToView,
            title: 'Current Alerts'
        };
       return vm;


       function viewAttached() {
           isAttachedToView(true);
           return true;
       }
    });

Bundle config.

bundles.Add(
new StyleBundle("~/Content/css")

//.Include("~/Content/ie10mobile.css")
//.Include("~/Content/bootstrap.css")
//.Include("~/Content/bootstrap-responsive.css")
//.Include("~/Content/font-awesome.css")
//.Include("~/Content/durandal.css")
.Include("~/Content/toastr.css")
//  .Include("~/Content/app.css")
.Include("~/Content/KoGrid.css")
//  .Include("~/Content/jquery-ui-1.9.1.custom.css")

);

Second Picture

I have no idea on what's going wrong or what i am doing wrong here, but looks like the following 2 pictures.

first dont see any grid. Resize the window you see the grid but only one row. try and group on the G green buss then when you want to make the col bigger the second col starts to shift rather than the fist one.

is there some thing which works or example which works with Hottowel template and kogrid which i can download and use?

Looks like a schoolboy error, but difficult to find and reason.

Answer 1

I'm faced with that problem as well. Strangely, it seems viewport div (the one generated by kogrid with a classname of kgViewport) is set to a fixed height of 20 px.

As a workaround, I had jQuery fix that for me (last line in my viewmodel):

$("div.kgViewport").css("height", "inherit");

Answer 2

The solution to the issue in your second picture is setting a height to the div. This should work:

<div style="border: 2px solid gray; height: 500px;" data-bind="koGrid: gridOptions"></div>

Answer 3

You should set explicit width and height on the element you bind to.

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

and then in your stylesheet

.myGrid {
    width: 700px;
    height: 300px;
}