ノックアウトKoGrid - データが表示されない

Question

優れたKnockoutJs KoGrid（http://knockout-contrib.github.io/KoGrid/#/examples）を使用するビューを2つ追加したASP.Net MVC5アプリがあります。私の問題は、KoGridを使用する第3のビューを作成したことです。他のビューで使用されているパターンに従っても、KoGridにデータを表示させることはできません。私はここに問題のplnkrを作成しました：http://plnkr.co/edit/0OaqD2?p=preview。

「実際の」ビューには、最初にデータベースの詳細を表示するタブが2つあり、にはのワークフロールールをkoグリッドで表示する必要があります。ここでは、コントローラからの復帰ビューモデルの次のよう

public class AdminViewModel 
{ 
    public DatabaseDetails DatabaseDetails { get; set; } 
    public List<WorkflowRule> WorkflowRules { get; set; } 
} 

public class WorkflowRule 
{ 
    public int WorkflowRuleId { get; set; } 
    public string ReceivePortName { get; set; } 
    public string MessageType { get; set; } 
    public string TriggerSource { get; set; } 
    public string TargetEmailAddress { get; set; } 
    public int AssignedToId { get; set; } 
    public string AssignedToName { get; set; } 
} 

public class DatabaseDetails 
{... 

マイノックアウトVMがある（私はより簡潔に保つために定型ページングコードを削除しました）：

function ViewModel(vm) { 
var self = this; 
this.workflowRules = ko.observableArray(vm.WorkflowRules); 


this.getPagedDataAsync = function (pageSize, page, searchText) { 
    setTimeout(function() { 
     var data; 
     if (searchText) { 
      var ft = searchText.toLowerCase(); 
      $.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) { 
       data = returnedPayload.filter(function (item) { 
        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; 
       }); 
       self.setPagingData(data,page,pageSize); 
      });   
     } else { 
      $.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) { 
       self.setPagingData(returnedPayload, page, pageSize); 
      }); 
     } 
    }, 100); 
}; 


this.gridOptions = { 
    afterSelectionChange: function() { return true; }, 
    data: self.workflowRules, 
    enablePaging: true, 
    pagingOptions: self.pagingOptions, 
    filterOptions: self.filterOptions, 
    selectWithCheckboxOnly: true, 
    selectedItems: self.selected, 
    canSelectRows: true, 
    displaySelectionCheckbox: true, 
    columnDefs: [{ field: 'ReceivePortName', displayName: 'Receive Port', width: 130 }, 
       { field: 'MessageType', displayName: 'Message Type', width: 200 }, 
       { field: 'TriggerSource', displayName: 'Source', width: 60 }, 
       { field: 'TargetEmailAddress', displayName: 'Email', width: 130 }, 
       { field: 'AssignedToName', displayName: 'Assigned To', width: 140 }, 
    ] 
}; 

}。次のように

私の見解の重要な部分は、以下のとおりです。ここで

@model TVS.ESB.BamPortal.Website.Models.AdminViewModel 
@using System.Web.Script.Serialization 
@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
@{ string data = new JavaScriptSerializer().Serialize(Model); } 

<div class="tab-pane" id="WorkflowRules"> 
       <h4>Workflow Rules</h4> 
       <div id="KoGrid" data-bind="koGrid: gridOptions"></div> 
      </div> 

@section Scripts { 
    <script src="~/KnockoutVM/WorkflowRules.js"></script> 
    <link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css"> 
    <script type="text/javascript"> 
     var vm = new ViewModel(@Html.Raw(data)); 
     ko.applyBindings(vm, document.getElementById("KoGrid")); 
    </script> 
} 

はクロームビューの表示方法の画面のグラブです：私はきたところ

誰も私に教えてもらえます間違っている - データがグリッドに表示されない理由

私はちょうど私がkogridを表示しているブラウザのサイズを小さくすると、データが表示されることに気付きました。 http://biztalkers.com/video/kogridproblem.mp4

Answer 1

「ワークフロールール」タブをデフォルトとして設定することで、このCSSの問題を回避することができました。

後で、別のWebサイトで、コントローラから1行のデータしか返されなかった場合、同じ動作が検出されました。 2つ以上の行が戻された場合、それらは正しく表示されます。