剔除KoGrid -没有显示数据

Question

我有一个ASP.Net MVC5应用程序，我在其中添加了几个使用优秀的KnockoutJs KoGrid (http://knockout-contrib.github.io/KoGrid/#/examples)的视图。我的问题是，我已经创建了第三个使用KoGrid的视图，尽管遵循了在其他视图上使用的模式，但我无法说服KoGrid显示数据。我已经为这个问题创建了一个plnkr：http://plnkr.co/edit/0OaqD2?p=preview。

"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
{...

我的剔除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>
}

下面是Chrome显示视图的屏幕抓取：

​

​

有人能告诉我我哪里出了问题吗?为什么网格中没有显示任何数据？

我刚刚意识到，如果我缩小浏览器的大小显示科格，那么数据就会出现。我在这里做了一个简短的视频：http://biztalkers.com/video/kogridproblem.mp4

Answer 1

通过将“工作流规则”选项卡设置为默认选项，我能够解决这个CSS问题。

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