Create another toolbar in kendo grid

Question

I am using Kendo library for grid. I want to have a toolbar in that grid.

I have followed this link -
http://demos.kendoui.com/web/grid/toolbar-template.html
and created a toolbar at the top

I also want to add another toolbar at the bottom of grid. Below or above pagination bar. I could not find any way to create this extra toolbar. Please help.

Answer 1

There are two ways of getting it:

1. You let Kendo UI generate in the top and then you move it to the bottom
2. You generate it to the bottom.

The first approach is fast and if you don't need header toolbar is the best. Just add the following code:

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

See it here : http://jsfiddle.net/OnaBai/WsRqP/1/

The second approach -using as base the example that you mention in your original question- would be something like this:

Step 1: Define a template, you might use the same than in the example:

<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>

Step 2: Initialize the grid, as you are doing now (in my case I will not include the toolbar as header but only as footer):

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");

Step 3: Add a dataBound handler for creating the footer after the grid has been initialized. We have to do it on dataBound otherwise the Grid is still not correctly formatted and the footer will look wrong. I've implemented creating the footer toolbar in a separate function to do not mess dataBound in case you do more stuff here.

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

Step 4: Implement this 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
        ... 
    }
}

What initFooterToolbar does is first check that it has not already been initialized otherwise if you do pagination of refresh the data you might end-up with multiple footer toolbars.

Finally append the toolbar to grid.wrapper .

So the important part for creating a footer toolbar is invoking grid.wrapper.append(...) and doing it when the grid is already created.

The original example modified here : http://jsfiddle.net/OnaBai/WsRqP/

Answer 2

I avoid using kendo toolbars and just make an external 1 which you can then tweak with greater control.

For example,

@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()
            });
        });

Then in my controller,

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

Last

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

This should cover all the core code needed but means you can keep adding as many toolbars/dropdowns/datepickers/text searchs or etc and just alter each stage to include the additional data.

Answer 3

Here is another hack which uses column footertemplate. When databound is triggered, footertemplate table is arranged to have one column with colspan equals to the number of grid columns.

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();
  }
});