Kendo button data click inside kendo grid template not working

Question

I have a kendo grid like this. Inside this template I'm using data-click attribute to the button but event is not firing at all. I don't know what went wrong.

Here is my code. Can anyone help.

    $("#defect_grid_general").kendoGrid({
        dataSource: ELQApp.GeneralDefectStore,
        columns: [
                { field: "Name", title: "Component" },
                { field: "Opname", title: "Operation" },
                { field: "DefectDescription", title: "Defect" },               
                { field: "qty", title: "Qty", template: "<input type='text' readonly='readonly' id=#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.LaunchKeyPad(this.id,&quot;gen_defect&quot;)'  style='width:60px' value='#=DefectQty#' readonly=readonly/> <a id='decrement_qty' name='-' data-role='button' onmousedown = 'ELQApp.ELQViewModel.IncrementDecrementValuesBtn1(this.name,&quot;#:ELQGeneralDefectInfoId#&quot;,&quot;update&quot;)' class='km-button minusBtn'></a><a  data-role='button' data-name='+'  data-type=#=ELQGeneralDefectInfoId#  data-flag='update' id='increment_qty' data-click='ELQApp.ELQViewModel.IncrementDecrementValuesBtn' class='km-button plusBtn'></a>", width: "155px" },
                { field: "", title: "", template: "<button  data-click='ELQApp.ELQViewModel.RemoveGeneralDefect'>Delete</button>" },
                { field: "", title: "", template: "<input type='button' value='More Info' name=#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.OpenModal(&quot;more_info_popup&quot;,this.name,this)' id='rem'/>", width: "110px" },
                { field: "", title: "", template: "<a id =#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.RemoveGeneralDefect(this.id)' class='deleteBtn'></a>", width: "50px" }
        ],
        height: 220,
    });

Answer 1

Hey Chinthaka,

     <div id="test-grid" data-role="grid"  data-bind="source: testDataSource" 
     data-columns='[
            { 
                field: "Site",
                title: "Site"
            } , 
            { 
                title: "Action",
                template: kendo.template($("#conditional-action-template").html())

            }

        ]'></div>

<div id="log"></div>

  <script id="conditional-action-template" type="text/x-kendo-template">
# if(FirstActionEnabled) { #
<div class='action circle' data-bind="click: firstActionClick"></div>
# } #
# if(SecondActionEnabled) { #
<div class='action square' data-bind="click: secondActionClick"></div>
# } #
</script>

I am giving you fiddle link..

Link- http://jsfiddle.net/falafelsoftware/B8ynX/

I hope you like it..

if you like then don't forget to vote me...