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

Question

Я использую библиотеку Kendo для сетки. Я хочу иметь панель инструментов в этой сетке.

Я следовал этой ссылке -
http://demos.kendoui.com/web/grid/toolbar-template.html
и создал панель инструментов в верхнем

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

Answer 1

Я избегаю использовать панели инструментов 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)); }); 

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

Answer 2

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

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, иначе 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 3

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