Add image controls to toolbar via Kendo - kendo-ui

Question

I would like to add some button-like images (which when clicked will manipulate the data below) called update, delete and add column to the top right of the top toolbar. Again these would be images that would call forth events onclick.
Is this the best way to do that?
Would this be done via templates? Not quite sure I understand those yet. Are there other dependencies with templates?
$("#grid").kendoGrid({
columns: [{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }],
//toolbar: [
//{"name": "create"},
// {"name": "save"},
// {"name": "cancel"}
// ],
dataSource: {
data:people
},
height:300,
scrollable:true,
pageable: true,
pageSize: 2,
sortable: true
});

Answer 1

You might use toolbar.template and do something as:
$("#grid").kendoGrid({
columns : [
{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }
],
toolbar : [
{"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
{"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
{"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
],
dataSource: {
data : people,
pageSize: 2
},
editable : true,
scrollable: true,
pageable : true,
sortable : true
});
The class values are important since this is what Kendo UI uses for binding the standard handlers to this image click event.
In addition pageSize needs to be define inside the dataSource.
For aligning the icons to the right you should define the following style:
#grid .k-toolbar {
text-align: right;
}
Where #grid is the id of your grid.
See a running example here: http://jsfiddle.net/OnaBai/Y9vhE/ The only question is that since the images are not loaded you will see it as missing images but they are still fully functional.