淘汰赛 KoGrid - 无数据显示

Question

我有一个 ASP.Net MVC5 应用程序，我在其中添加了几个使用出色的 KnockoutJs KoGrid 的视图（http://knockout-contrib.github.io/KoGrid/#/examples). My problem is I have created a third view that uses the KoGrid and despite following the pattern used on the other views I cannot convince KoGrid to display the data. I have created a plnkr for the problem here:http://plnkr.co/edit/0OaqD2?p=preview。

"real" 视图有几个选项卡，第一个显示数据库详细信息，第二个应该在 ko 网格中显示工作流规则。这是我 return 来自控制器的视图模型：

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

我的knockout 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 如何显示视图的屏幕截图：

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

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

Answer 1

我可以通过将 "Workflow Rules" 选项卡设置为默认选项卡来解决这个 CSS 问题。

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

淘汰赛 KoGrid - 无数据显示

Knockout KoGrid - no data displayed

javascript

knockout.js

kogrid