Custom Toolbar Buttons and Commands

[Eoin]

Hey,

I am trying to insert custom toolbar buttons (and actions) for our kendo grid. I would like to keep the existing functionality the same (i.e. the create and export to excel functions) but add additonal custom buttons by means of a toolbar template. Below is the existing code.

01.<div id="emailgroupgrid" style="height: 100%"
02.                   data-role="grid"
03.                   data-resizable="true"
04.                   data-reorderable="true"
05.                   data-sortable="true"
06.                   data-editable="popup"
07.                   data-scrollable="true"
08.                   data-toolbar="['create', 'excel']"
09.                   data-excel="{'fileName': 'file.xlsx', 'filterable': 'true'}"
10.                   data-columns="[{'field': 'firstName', 'title':'First Name', 'editable': 'true'}, {'field': 'surname', 'title':'Surname', 'editable': 'true'},{'field': 'email', 'title':'Email', 'editable': 'true'},{'command' : ['destroy', 'edit' ], 'width' : '25%'}]"
11.                   data-bind="source: users, events: {change: onGridChange}">
12.                 </div>

 

I have seen posts where the recommend hard coding the new buttons in data-toolbar parameter, and also via a template and calling

1.data-toolbar="['create', 'excel', {'template': '$(\'#toolbartemplate\').html()'}]"

1.<script id="toolbartemplate" type="text/x-kendo-template">
2.  <div id="toolbar"
3.         data-role="toolbar"
4.          data-bind="events:{click: onActionsClick}">
5.            <input type="button" class="k-button" onClick="create"/>
6.      </div>
7.  </script>

And other such variations, nothing seems to work as of yet. Everything returns either an invalid template error or simple prints out the string literal that was inputted.

As I said ideally I wouldn't have to reimplement the functionality of the existing create and excel buttons but add additional buttons with will call my own functions.

Any help would be great.

[Stephen]

Check out this: http://dojo.telerik.com/esOKI

It is the documentation example from http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-toolbar.name with your template added in.

Although I'm not sure your template is %100 correct, I did get the button to display with the built-in commands.

There are 2 changes I made to do so:

1. the correct syntax to use the template is { template: kendo.template($('#toolbartemplate').html()) }  you have to wrap the template selector with kendo.template() to convert it to a template otherwise is is just text.

2. the declaration of the <script> block that defines the template must appear before the grid init, otherwise the template does not yet exist when the grid tries to use it.

 

[Eoin]

Apologies for the late reply Stephen,

 

That helped a bunch, it seems to have worked now. You were also right about my syntax for the template being wrong. Thanks for the help :)