Question

使用以下内容。

1）Visual Studio 2012。 2）热毛巾模板。 3）下载了ko grid和它的css。

home.html的

<section id="alerts-view" class="view">
 <header>
        <a class="btn btn-info btn-force-refresh pull-right" 
            data-bind="click: refresh" href="#"><i class="icon-refresh"></i> Refresh</a>
        <h3 class="page-title" data-bind="text: title"></h3>
        <div class="article-counter">
            <address data-bind="text: alerts().length"></address>
            <address>found</address>
        </div>
    </header>
    <div  data-bind="koGrid: gridOptions"></div>
  </section>

home.js

define(['services/datacontext', 'durandal/plugins/router'],
    function (datacontext, router) {

        var alerts = ko.observableArray();
        isAttachedToView = ko.observable(false);

        var activate = function (routeData) {
            if (routeData.id == undefined)
                return datacontext.getAlerts(alerts);
        };

        var deactivate = function () {
            isAttachedToView(false);
            alerts([]);
        };

        var refresh = function () {
            return datacontext.getAlerts(alerts);
        };


       var vm = {
            activate: activate,
            deactivate: deactivate,
            refresh: refresh,
            alerts: alerts,
            gridOptions: {
                            data: alerts,
                            canSelectRows: true,
                            enableColumnResize: true,
                            footerVisible: true,
                            displaySelectionCheckbox: true,
                            enableSorting: ko.observable(true),
                            columnDefs: [
                                            { field: 'efficency', displayName: 'Green or C02 Bus' } ......................

                                        ]

                           },
            isAttachedToView: isAttachedToView,
            title: 'Current Alerts'
        };
       return vm;


       function viewAttached() {
           isAttachedToView(true);
           return true;
       }
    });

捆绑配置。

bundles.Add(
new StyleBundle("~/Content/css")

//.Include("~/Content/ie10mobile.css")
//.Include("~/Content/bootstrap.css")
//.Include("~/Content/bootstrap-responsive.css")
//.Include("~/Content/font-awesome.css")
//.Include("~/Content/durandal.css")
.Include("~/Content/toastr.css")
//  .Include("~/Content/app.css")
.Include("~/Content/KoGrid.css")
//  .Include("~/Content/jquery-ui-1.9.1.custom.css")

);

first Picure

第二张照片 second picture only one row. 我不知道出了什么问题或我在这里做错了什么，但看起来像下面两张图片。

首先看不到任何网格。调整窗口大小，但只能看到一行。尝试在G green buss上进行分组，然后当你想让col更大时，第二个col开始移动而不是第一个col。

是否有一些可以使用Hottowel模板和kogrid工作的例子或者我可以下载和使用的kogrid？

看起来像一个小学生错误，但很难找到和推理。

Answer 1

我也面临着这个问题。奇怪的是，似乎视口div（由kogrid生成的类名为kgViewport的）被设置为20 px的固定高度。

作为一种解决方法，我为我修了jQuery（我的viewmodel中的最后一行）：

$("div.kgViewport").css("height", "inherit");

Answer 2

第二张图片中问题的解决方案是设置div的高度。这应该有效：

<div style="border: 2px solid gray; height: 500px;" data-bind="koGrid: gridOptions"></div>

Answer 3

您应该在绑定的元素上设置显式的宽度和高度。

<div class="myGrid" data-bind="koGrid: gridOptions"></div>

然后在你的样式表中

.myGrid {
    width: 700px;
    height: 300px;
}

KO网格显示问题，在调整大小网格时显示一行。图像也包括在内

3 个答案: