Knockout KoGrid - 無數據顯示

我有一個ASP.Net MVC5應用程序，我添加了一些使用KnockoutJs KoGrid優秀KnockoutJs（http://knockout-contrib.github.io/KoGrid/#/examples）的視圖。我的問題是我創建了使用KoGrid的第三個視圖，儘管遵循了其他視圖上使用的模式，我無法說服KoGrid顯示數據。我在這裏爲這個問題創建了一個plnkr：http://plnkr.co/edit/0OaqD2?p=preview。Knockout KoGrid - 無數據顯示

「真實」視圖有幾個選項卡，第一個顯示數據庫詳細信息，第二個選項卡應顯示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瀏覽器如何顯示視圖的屏幕抓取：

誰能告訴我，我已經出錯了 - 爲什麼沒有數據顯示在網格中？

我剛剛意識到，如果我減小顯示kogrid的瀏覽器的大小，那麼數據就會出現。我在此做了一個簡短的視頻：http://biztalkers.com/video/kogridproblem.mp4

來源

2016-03-24 Rob Bowman

我在你的plnkr例子中添加了一些缺失的資源：http://plnkr.co/edit/ZZ2QZw4ZqfIOVFX7vTBc?p=preview你能用這個例子解釋什麼是錯的嗎？ – user3297291

您的腳本添加的腳本很好，但我已經在我的解決方案中添加了這些腳本，但我沒有顯示KoGrid。實際上，我確實看到了下拉箭頭 - 請參閱我添加到問題 –

的屏幕截圖Chrome的開發人員工具控制檯是否記錄任何錯誤？ – user3297291

我能夠通過將我的「工作流規則」選項卡設置爲默認值來解決此CSS問題。

後來，在另一個網站上 - 如果從控制器返回一行數據，我發現相同的行爲。在返回兩行或多行的情況下，它們顯示正確。

來源

2016-03-29 10:10:26

Knockout KoGrid - 無數據顯示

回答

相關問題