Knockout-Kendo.js editableTemplate - asp.net

Question

I am using Knockout-Kendo.js in Durundal.js
How do I bind Custom editable.template or call custom HTML when click on Edit and Add buttons.
I have tried the below code but not working
<div data-bind="kendoGrid: { data: items, editableTemplate: 'editTemplate', useKOTemplates: true }"> </div>
<script id="editTemplate" type="text/html">
<h3>Edit User</h3>
<p>
<label>User Name:<input data-bind="text:username" /></label>
</p>
</script>
Viewmodel.js file for knockout binding
define(['services/logger', 'config', 'services/dataservice'], function (logger, config, dataservice) {
var title = 'Users';
var items = ko.observableArray();
var vm = {
items: items,
activate: activate,
title: title
};
return vm;
//#region Internal Methods
function activate() {
dataservice.getUsers(vm.items);
ko.bindingHandlers.kendoGrid.options = {
dataSource: {
schema: {
model: {
fields: {
firstName: { type: "string" },
lastName: { type: "string" },
username: { type: "string" },
company: { type: "string" },
addressLine1: { type: "string" },
addressLine2: { type: "string" },
city: { type: "string" },
state: { type: "string" },
postCode: { type: "string" },
phoneNumber: { type: "string" },
website: { type: "string" },
vatNumber: { type: "string" },
registrationNumber: { type: "string" },
creadtedBy: { type: "string", editable: false, nullable: true, hidden: true },
createdOn: { type: "date", editable: false, nullable: true, hidden: true },
modifiedBy: { type: "string", editable: false, nullable: true, hidden: true },
modifiedOn: { type: "date", editable: false, nullable: true, hidden: true },
}
}
},
pageSize: config.gridPageSize
},
toolbar: config.gridToolbar,
height: config.gridHeight,
columns: [
{ field: "firstName", title: "First Name", width: "90px" },
{ field: "lastName", title: "Last Name", width: "90px" },
{ field: "company", title: "Company", width: "90px" },
{ field: "username", title: "User Name", width: "90px" },
{ field: "addressLine1", title: "Address Line1", width: "90px" },
{ field: "addressLine2", title: "Address Line2", width: "90px" },
{ field: "city", title: "City", width: "90px" },
{ field: "state", title: "State", width: "90px" },
{ field: "postCode", title: "Post Code", width: "90px" },
{ field: "phoneNumber", title: "Phone Number", width: "90px" },
{ field: "website", title: "Website", width: "90px" },
{ field: "vatNumber", title: "Vat Number", width: "90px" },
{ field: "registrationNumber", title: "Registration Number", width: "90px" },
{ field: "creadtedBy", title: "Created By", width: "130px" },
{
field: "createdOn",
title: "Created On",
width: "130px",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: {
ui: "datetimepicker"
}
},
{ field: "modifiedBy", title: "Modified By", width: "130px" },
{
field: "modifiedOn",
title: "Modified On",
width: "130px",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: {
ui: "datetimepicker"
}
},
{ command: ["edit", "destroy"], title: " ", width: "160px" }
],
editable: config.gridEditableType
};
}
//#endregion
});