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

Question

Using the following.

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

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; } }); 

Package configuration.

 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 image I have no idea what is going wrong or what I am doing wrong here, but it looks like the following 2 photos.

at first I do not see any grid. Resize the window in which you see the grid, but only one row. try and group on G the green bus, and then when you want to make col bigger, the second col starts to shift, not into a fist.

is there something that works or an example that works with a hottowel and kogrid template that i can download and use?

Looks like a student’s mistake, but hard to find and justify.

Answer 1

I also ran into this problem. Strange, it seems that the viewport div (the one generated by the kogrid with the class name kgViewport ) is set to a fixed height of 20 pixels.

As a workaround, I had jQuery fixed for me (last line in my view model):

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

Answer 2

The solution to the problem in the second image sets the height for the div. This should work:

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

Answer 3

You must set the explicit width and height for the element to which you are snapping.

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

and then in the stylesheet

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