KO網格顯示Isseues，On resize Gird顯示一行。圖像也包括在內

使用以下內容。KO網格顯示Isseues，On resize Gird顯示一行。圖像也包括在內

1）Visual Studio 2012. 2）熱毛巾模板。 3）下載ko grid和它的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; 
     } 
    });

捆綁配置。

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") 

);

first Picure

第二張照片 second picture only one row. 我有什麼錯誤或我在做什麼錯在這裏不知道，但看起來像下面的兩張圖片。

首先沒有看到任何網格。調整您看到網格但只有一行的窗口的大小。嘗試和G組綠色巴斯然後當你想讓col更大第二個col開始移動而不是第一個拳頭。

有什麼工作或例子與Hottowel模板和kogrid，我可以下載和使用的作品？

看起來像一個小學生的錯誤，但很難找到和原因。

來源

2013-07-19 bhushanvinay

上加載任何JavaScript錯誤？看起來有些東西沒有正確加載。 –

沒有404的整數的流量，所以假設沒有JavaScript錯誤。也試圖控制檯日誌沒有錯誤在那裏。 – bhushanvinay

在第二張圖片中解決問題的方法是將高度設置爲div。這應該工作：

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

來源

2013-07-21 03:27:23

感謝Sanjeev，這也沒有工作，只是在調整它的工作。但沒有顯示數據。瘋狂的問題。 – bhushanvinay

如果您嘗試將標籤之外的koGrid div全部自行放置，會發生什麼情況？ –

還是一樣的，奇怪。它適用於所有，但不適用於這一個。很多Durandal谷歌組織的網格問題。我希望有些人會幫助解答。 – bhushanvinay

我也遇到了這個問題。奇怪的是，它似乎是一個固定的高度爲20像素的視口div（由kogrid生成的類名稱爲kgViewport）。

作爲一種變通方法，我有jQuery的修復，對我（在我的viewmodel中最後一行）：

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

來源

2013-08-29 10:42:59 nkstr

你應該制定明確的寬度和高度綁定到元素上。

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

，然後在你的樣式表

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

來源

2015-04-21 11:25:55 dizarter

KO網格顯示Isseues，On resize Gird顯示一行。圖像也包括在內

回答

相關問題