This is a migrated thread and some comments may be shown as answers.

Buttons inside a row template not working

4 Answers 636 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anica
Top achievements
Rank 1
Anica asked on 14 Sep 2012, 10:09 AM

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.

4 Answers, 1 is accepted

Sort by
0
Nohinn
Top achievements
Rank 1
answered on 14 Sep 2012, 10:55 AM
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
0
Anica
Top achievements
Rank 1
answered on 15 Sep 2012, 12:17 PM

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"}                    
                }
            }
        }
});

0
Accepted
Nohinn
Top achievements
Rank 1
answered on 15 Sep 2012, 03:09 PM

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() {
    ....
});
0
Anica
Top achievements
Rank 1
answered on 16 Sep 2012, 08:10 AM

Option 2 works perfectly!

Thank you for your time. I really appreciate it!

Tags
Grid
Asked by
Anica
Top achievements
Rank 1
Answers by
Nohinn
Top achievements
Rank 1
Anica
Top achievements
Rank 1
Share this question
or