KO 그리드 디스플레이 Isseues, On resize Gird는 한 행을 보여줍니다. 이미지도 포함

Question

다음을 사용하십시오.

1) Visual Studio 2012. 2) 뜨거운 수건 템플릿. 3) KO 그리드와 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") 

); 

두 번째 사진은 내가 잘못이야 아니면 내가 잘못 여기서 뭐하는 거지 무엇에 아무 생각이 없지만, 다음이 개 사진처럼 보인다.

먼저 눈금을 보지 마세요. 그리드가 보이지만 한 행만 보이는 창 크기를 조정하십시오. G 그린 버스에서 그룹을 시도하고 그룹화하면 칼을 크게 만들고 싶을 때 두 번째 칼이 주먹보다 이동하기 시작합니다.

다운로드 할 수있는 홋 토엘 템플릿이나 kogrid로 동작하는 것이나 동작하는 것이 있습니까?

모범생 오류처럼 보이지만 찾기 어렵습니다.

Answer 1

두 번째 그림에서 문제의 해결책은 div의 높이를 설정하는 것입니다. 이것은 작동해야합니다 :

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

Answer 2

나는 그 문제에 직면 해있다. 이상하게도 뷰포트 div (클래스 이름이 kgViewport 인 kogrid에서 생성 된 것)가 고정 높이 20px로 설정되어있는 것처럼 보입니다.

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

Answer 3

당신은 바인딩 요소에 명시적인 폭과 높이를 설정해야합니다

는이 문제를 해결 나는 JQuery와 (내 뷰 모델에서 마지막 줄) 나를 위해 그 문제를 해결했다. 스타일 시트

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