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

有两种方法可以获得它：

1. 你让剑道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上这样做，否则网格的格式仍然不正确，页脚看起来也会错误。我已经在一个单独的函数中实现了创建页脚工具栏，以避免在这里做更多的事情时弄乱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/

我避免使用剑道工具栏，只制作一个外部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)); });

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

这里是另一个使用列页脚模板的破解方法。当触发数据绑定时，页脚模板表被安排为具有一列，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();
  }
});