在kendo网格中创建另一个工具栏

Question

我正在使用Kendo库进行网格化。 我希望在该网格中有一个工具栏。

我已经关注此链接 -
http://demos.kendoui.c​​om/web/grid/toolbar-template.html
并在顶部创建了一个工具栏

我还想在网格底部添加另一个工具栏。 分页栏下方或上方。 我找不到任何方法来创建这个额外的工具栏。 请帮忙。

Answer 1

有两种方法可以获得它：

1. 您让Kendo UI生成在顶部，然后将其移动到底部
2. 你生成它到底部。

第一种方法很快，如果你不需要标题工具栏是最好的。 只需添加以下代码：

$("#grid).data("kendoGrid").wrapper.append($(".k-toolbar"));

在这里看到： http ： //jsfiddle.net/OnaBai/WsRqP/1/

第二种方法 - 以您在原始问题中提到的示例为基础 - 将是这样的：

第1步：定义模板，您可能使用与示例相同的模板：

<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <label class="category-label" for="category">Show products by category:</label>
        <input type="search" id="category" style="width: 150px"/>
    </div>
</script>

第2步：初始化网格，正如您现在所做的那样（在我的情况下，我不会将工具栏包含为标题，而只是作为页脚）：

var grid = $("#grid").kendoGrid({
    dataSource: {
        type           : "odata",
        transport      : {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        },
        pageSize       : 20,
        serverPaging   : true,
        serverSorting  : true,
        serverFiltering: true
    },
    height    : 430,
    sortable  : true,
    pageable  : true,
    columns   : [
        { field: "ProductID", title: "Product ID", width: 100 },
        { field: "ProductName", title: "Product Name" },
        { field: "UnitPrice", title: "Unit Price", width: 100 },
        { field: "QuantityPerUnit", title: "Quantity Per Unit" }
    ]
}).data("kendoGrid");

步骤3：添加一个dataBound处理程序，用于在初始化网格后创建页脚。 我们必须在dataBound上执行它，否则Grid仍然没有正确格式化，页脚看起来会出错。 我已经在一个单独的函数中实现了创建页脚工具栏， dataBound万一你在这里做了更多的东西。

dataBound : function () {
    initFooterToolbar(this, kendo.template($("#template").html()));
}

第4步：实现此initFooterToolbar ：

function initFooterToolbar(grid, template) {
    if (!this._footer) {
        this._footer = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>")
                           .append(template);
        grid.wrapper.append(this._footer);
        // Other code for initializing your template
        ... 
    }
}

initFooterToolbar执行的操作首先检查它是否尚未初始化，否则如果您使用多个页脚工具栏刷新数据，则最终可能会结束。

最后将工具栏附加到grid.wrapper 。

因此，创建页脚工具栏的重要部分是调用grid.wrapper.append(...)并在已创建网格时执行此操作。

这里修改了原始示例： http ： //jsfiddle.net/OnaBai/WsRqP/

Answer 2

我避免使用kendo工具栏，只需创建一个外部1，然后你可以通过更好的控制进行调整。

例如，

@Html.DropDownList("Year", (SelectList)ViewBag.YearList, "All years")

transport: {
                    read: {
                        url: '@Url.Action("_List", "Applications")',
                        data: refreshGridParams,
                        type: 'POST'
                    },
function refreshGridParams() {
        return {
            Year: $('#Year').val()
        };
    }

        $('#Year').change(function () {
            theGrid.dataSource.read({
                Year: $('#Year').val()
            });
        });

然后在我的控制器中，

[HttpPost]
    public JsonResult _List(int? Year, int skip, int take)
    {

持续

_db.Blargh.Where(w => w.Year== Year).Skip(skip).Take(take).ToList().ForEach(x => { waList.Add(new WAListDTO(x)); });

这应该涵盖所需的所有核心代码，但意味着您可以继续添加任意数量的工具栏/下拉列表/日期选择器/文本搜索等，并且只需更改每个阶段以包含其他数据。

Answer 3

这是另一个使用footertemplate列的hack。 当数据绑定被触发时，footertemplate表被安排为具有一列colspan等于网格列的数量。

http://plnkr.co/edit/1BvMqSC7tTUEiuw4hWZp

$("#grid").kendoGrid({
  columns:[{
      field:'name',
      footerTemplate : "Row Count: #= data.name.count #" 
    },{
      field:'age'
    }],
  dataSource: new kendo.data.DataSource({
    aggregate: [{
      field:"name",
      aggregate: "count"
    }],

    data: [{
      name: "Jane", 
      age: 31
    }, {
      name: "John",
      age: 33
    }]
  }),
  dataBound: function() {
    var footer = this.wrapper.find('.k-footer-template');
    footer.children(":first").attr('colspan', this.columns.length);
    footer.children().not(':first').remove();
  }
});