[Solved] Buttons inside a row template not working

[Anica]

I'm using a row template defined as:

<script type="text/x-kendo-template" id="rowTemp" >

                      

<tr id="tr_#= id #" >

    <td>#= id #</td>

    <td>#= simbol #</td>

                                  

             <td><input type="checkbox" name="add_#= id #" value="#= id #" id="add_#= id #" class="add"  /></td>

                      

    <td align="center"><input type="button" class="info  k-button k-button-icontext" name="info" value="Info" id="info_#= id #" style="height: 26px; margin: 0px 2px; min-width: 64px;" /></td>

  

</tr>

</script>

 This button when clicked should open a new window. 

$(" .info ").click(function (e) { 

                     

     var infowindow = $("#info_win")

                      .kendoWindow({ 

                            title: "Info",

                            modal: false,

                            visible: false,

                            resizable: true,

                            width: 300,

          content: "someContent"

                        }).data("kendoWindow");

                                          

        infowindow.center.open();

                      

  });

In this post states that template should be defined also in the column definition. So my grid looks something like that:

$("#grid").kendoGrid({

         dataSource: {

                data: data,

                schema: {

                    model: {

                        fields:{

                             id: { type:"number"},

                             simbol: { },

                           add:{}                       

                           info:{},                     

                       }

                     }

               }

                columns: [{

                     field: "add",

                     template:'><input type="checkbox" name="add_#= id #" value="#= id #" id="add_#= id #" class="add"  />',

                    title: "Add",

                     },                     

                      { 

                 field:"info", 

                  template: '<input type="button" class="info  k-button k-button-icontext" name="info" value="Info" id="info_#= id #" style="height: 26px; margin: 0px 2px; min-width: 64px;" />',

                  title: "",                        

                  }],

                  rowTemplate: kendo.template($("#rowTemp").html()),

});

But buttons are still not working.

Am I missing something? Please help.

[Nohinn]

I have changed some of your code, in the kendo window part I don't have any url, in your case if you're trying to load the content from another page then use the content option like you first posted.
http://jsbin.com/awiron/1

[Anica]

Thank you for your answer but my buttons are still not working.

Everything is fine with local data (I tried playing with your example) but the problem is with remote data returned as JSON.

This works fine.

var localData=new kendo.data.DataSource({

    data: data,

     schema: {

            model: {

                id: 'id',

                fields:{

                    id: {type:"number"},

                    simbol: {type:"string"},

                    add:{type:"boolean"} , 

                    info:{type:"string"}                    

                      

                }

            }

        }

});

This doesn't. Data is shown but buttons don't work. They work only if I'm not using a template.

var remoteData=new kendo.data.DataSource({

    transport: {

  

                  read: "somefile.php"

     },

    error: function(e) {

                alert(e.responseText);

    },

     schema: {

            data:"data", 

            model: {

                id: 'id',

                fields:{

                    id: {ype:"number"},

                    simbol: {type:"string"},

      

                    add:{type:"boolean"} ,                      

                    info:{type:"string"}                    

                }

            }

        }

});

[Nohinn]

As you're getting the data from remote, the click binding should be applied in the dataBound grid event, or via html or with the on jquery method.

The problem you may be having is that you're trying to bind a click handler to an element that does not exist yet when the grid is created, as you're fetching the data from a remote server. So when your bind function gets applied the input button is not found and then when you get the data from server it is like the button is not working.

If you apply it with any of these options, you will know for sure that the button input is already in the dom tree and then when you bind the function it will find the element and it will work.

P.S: I have updated the jsbin code using the second option. http://jsbin.com/awiron/2/edit

// Option 1

dataBound: function(e) {

    $('#grid').data('kendoGrid').tbody.find('.info').click(function() {

        ....

    });

}

  

  

// Option 2

<input type="button" class="info" value="Info" onclick="myFunction();" />

  

function myFunction() {

    ...

}

  

// Option 3 

$('.info').on("click", function() {

    ....

});

[Anica]

Option 2 works perfectly!

Thank you for your time. I really appreciate it!