Javascript 淘汰KoGrid-未显示任何数据

我有一个ASP.NETMVC5应用程序，我在其中添加了几个使用优秀的KnockoutJs KoGrid（）的视图。我的问题是我创建了第三个使用KoGrid的视图，尽管遵循了其他视图上使用的模式，但我无法说服KoGrid显示数据。我已在此处为问题创建了plnkr:

“real”视图有两个选项卡，第一个选项卡显示数据库详细信息，第二个选项卡应在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
{...

})

我的主要观点如下：

    @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>
}

@model TVS.ESB.BamPortal.Website.Models.AdminViewModel
@使用System.Web.Script.Serialization
@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
@{string data=new JavaScriptSerializer（）.Serialize（Model）；}
工作流规则
@节脚本{
var vm=newviewmodel（@Html.Raw（data））；
applyBindings（vm，document.getElementById（“KoGrid”）；
}

以下是Chrome如何显示视图的屏幕抓图：

谁能告诉我哪里出了问题-为什么网格中没有显示数据

---

我刚刚意识到，如果我缩小显示kogrid的浏览器的大小，那么数据就会出现。我在这里制作了一个简短的视频：

我可以通过将“工作流规则”选项卡设置为默认值来解决这个CSS问题

---

后来，在另一个网站上，我发现如果控制器只返回一行数据，就会出现同样的行为。如果返回了两行或多行，则它们会正确显示。

我在plnkr示例中添加了一些缺少的资源：您能解释一下使用此示例的错误吗？添加了脚本的plnk效果很好，但我的解决方案中已经添加了这些脚本，但我没有显示KoGrid。事实上，我确实看到了下拉箭头-请看我添加到问题中的屏幕抓图Chrome的开发者工具控制台是否记录了任何错误？恐怕没有错误。我可以看到网格中的数据也可以通过Chrome来显示。我刚刚注意到，如果我缩小显示网格的浏览器窗口的大小，那么网格数据就会出现。我在这里做了一个简短的视频：

    @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>
}