Knockout KoGrid - keine Daten angezeigt

Question

Ich habe eine ASP.Net MVC5 App, in die ich ein paar Ansichten hinzugefügt habe, die die hervorragende KnockoutJs KoGrid (http://knockout-contrib.github.io/KoGrid/#/examples) verwenden. Mein Problem ist, dass ich eine dritte Ansicht erstellt habe, die das KoGrid verwendet, und obwohl ich dem in den anderen Ansichten verwendeten Muster folge, kann ich KoGrid nicht überzeugen, die Daten anzuzeigen. Ich habe hier ein PLNKR für das Problem erstellt: http://plnkr.co/edit/0OaqD2?p=preview.

Die "echte" Ansicht hat ein paar Registerkarten, die erste, um Datenbankdetails anzuzeigen, die zweite sollte Workflow-Regeln in einem Ko-Raster anzuzeigen. Hier ist der Ansicht Modell, das ich von der Steuerung zurück:

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

Mein Knockout vm ist wie folgt (ich habe vorformulierten Paging Code entfernt prägnanter zu halten):

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 }, 
    ] 
}; 

};

Die wichtigsten Teile meiner Ansicht sind wie folgt:

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

Hier ist ein Bildschirm holen, wie Chrome zeigt die Ansicht:

Kann mir jemand sagen, wo ich habe falsch gegangen - warum keine Daten im Raster angezeigt werden?

Ich habe gerade festgestellt, dass, wenn ich die Größe des Browsers verkleinern, der das Kogrid anzeigt, dann erscheinen die Daten. Ich habe hier ein kurzes Video davon gemacht: http://biztalkers.com/video/kogridproblem.mp4

Answer 1

Ich war in der Lage, um dieses CSS-Problem zu umgehen, indem ich meine Registerkarte "Workflow-Regeln" als Standard festgelegt.

Später, auf einer anderen Website - Ich fand das gleiche Verhalten, wenn nur eine Reihe von Daten vom Controller zurückgegeben wurde. Wo zwei oder mehr Zeilen zurückgegeben wurden, wurden sie korrekt angezeigt.