I am trying to put a button in the cells of one of the columns and do something when it's clicked.

For example I add these lines to the SlickGrid example 1 (.html)

First to the column array I add:

    {id: "Report", name: "Report", field: "Report", width: 40, sortable: true, formatter:reportFormatter}

then I add:

      function reportFormatter(row, cell, value, columnDef, dataContext) {
          return "<input type='button' value='show' id='reportBtn'/>";
      }

      $('#reportBtn').click(function() {
          alert("hello");
      });

The buttons appear in the cells but the click event is not being called ! I must be doing something wrong but can't for the life of me figure it out can anyone help ? Thanks!

I am trying to put a button in the cells of one of the columns and do something when it's clicked.

For example I add these lines to the SlickGrid example 1 (http://mleibman.github.io/SlickGrid/examples/example1-simple.html)

First to the column array I add:

    {id: "Report", name: "Report", field: "Report", width: 40, sortable: true, formatter:reportFormatter}

then I add:

      function reportFormatter(row, cell, value, columnDef, dataContext) {
          return "<input type='button' value='show' id='reportBtn'/>";
      }

      $('#reportBtn').click(function() {
          alert("hello");
      });

The buttons appear in the cells but the click event is not being called ! I must be doing something wrong but can't for the life of me figure it out can anyone help ? Thanks!

• javascript
• slickgrid

• You could try passing the function as an onclick argument. I think the issue may be in the order of execution, maybe it's trying to assign the click event to a button not yet created? – Hktrm Commented Apr 9, 2013 at 3:24

3 Answers 3

slick.formatters.js

...
"btnForm": buttonsFormatter // add Slick.Formatters
..
  function buttonsFormatter(row, cell, value, columnDef, dataContext) {
      return  "<input type='button' value='"+value+"' id='btnForm' value2='"+row+"' value3='"+cell+"' onClick='fnBtnClick(this);'/>";
  }

add your html Script

function fnBtnClick( objBtn ){
 alert( "row::[" + objBtn.value2 + "]\n\ncell::[" + objBtn.value3 + "]" );      
}

you should use the grid events not button event like below ,

1. will call the onclick event of the grid ,
2. check if the clicked field is your button one

3. do your action

   grid.onClick.subscribe(function (e, args) {
     //check if your button was clicked  
     if ($(e.target).hasClass("btn")) {
           var item = dataView.getItem(args.row);
           ///do your action
       }
   
   });
   

Use the prepiled template slick grid example. Add the property eg. ImageTrial, and in the data structure fill the property with the dynamic input button.

<script type=" " id="testtemplate">
<div class="test">
    <b><%=ImageTrial%></b>
     <b><%=ImageTrial2%></b>
</div>

dataForCell["ImageTrial"] = "<button type=\"button\" onclick=\"alert('a " + 1 + "')\">s</button>";

dataForCell["ImageTrial2"] = "<button type=\"button\" onclick=\"alert('b " + 2 + "')\">b</button>";

Good Luck