Создайте еще одну панель инструментов в сетке кендо

Есть два способа его получить:

1. Вы позволяете пользовательскому интерфейсу Kendo генерироваться вверху, а затем перемещаете его вниз.
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)); });

Это должно охватывать весь необходимый основной код, но это означает, что вы можете продолжать добавлять столько панелей инструментов/выпадающих списков/датчиков/текстового поиска и т. д. и просто изменять каждый этап, чтобы включить дополнительные данные.

Вот еще один хак, который использует шаблон нижнего колонтитула столбца. Когда срабатывает привязка данных, таблица 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();
  }
});