title: KO Grid Display Isseues, On resize Gird shows one row. Images also included
body: <p>Using the following.</p>
  
  <p>1) Visual Studio 2012.
  2) Hot towel template.
  3) downloaded ko grid and and its css.</p>
  
  <p>home.html</p>
  
  <pre><code>&lt;section id="alerts-view" class="view"&gt;
   &lt;header&gt;
          &lt;a class="btn btn-info btn-force-refresh pull-right" 
              data-bind="click: refresh" href="#"&gt;&lt;i class="icon-refresh"&gt;&lt;/i&gt; Refresh&lt;/a&gt;
          &lt;h3 class="page-title" data-bind="text: title"&gt;&lt;/h3&gt;
          &lt;div class="article-counter"&gt;
              &lt;address data-bind="text: alerts().length"&gt;&lt;/address&gt;
              &lt;address&gt;found&lt;/address&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;div  data-bind="koGrid: gridOptions"&gt;&lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p>home.js</p>
  
  <pre><code>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;
         }
      });
  </code></pre>
  
  <p>Bundle config.</p>
  
  <pre><code>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")
  
  );
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/jTSLH.png" alt="first Picure"></p>
  
  <p>Second Picture
  <img src="https://i.stack.imgur.com/GqEI7.png" alt="second picture only one row.">
  I have no idea on what's going wrong or what i am doing wrong here, but  looks like the following 2 pictures.</p>
  
  <p>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.</p>
  
  <p>is there some thing which works or example which works with Hottowel template and kogrid which i can download and use?</p>
  
  <p>Looks like a schoolboy error, but difficult to find and reason.</p>