Kendo UI Grid Custom Edit Button

Question

Im trying to give a custom pop up modal when user click on the Edit button of the row.

 { title: "", width: "50px", template: '<button id="zoneEdit" onclick="" class="btn default blue-stripe" data-toggle="modal" href="#myModal1"><span class="k-icon k-edit"></span> Edit</button> <button id="deleteZone" onclick="deleteZone(#=Zone_Id#)" class="btn default red-stripe"><span class="k-icon k-delete"></span>Delete</button>' },

but when i load the page there is a error showing on the fire bug saying "Error: Invalid template" when i remove the data-toggle="modal" href="#myModal1" attributes from the edit button the grid loads fine. there is nothing wrong in the delete button.itz works fine.

Is there any way to fulfill this need rather than my approach???

Answer 1

That happens because you have to escape the literals # . Read this doc to know how.

Your template should be:

template: '<button id="zoneEdit" onclick="" class="btn default blue-stripe" data-toggle="modal" href="\\\\#myModal1"><span class="k-icon k-edit"></span> Edit</button> <button id="deleteZone" onclick="deleteZone(#=Zone_Id#)" class="btn default red-stripe"><span class="k-icon k-delete"></span>Delete</button>'

I have changed #myModal1 to \\\\\\\\#myModal1 .

Demo