How do I add a custom Button inside a cell in handsontable?

Question

I am trying to add a custom save button at the end of each row in handsontable. I am using handsontable package in laravel 4.

The button shows up like this:

<button>Save</button>

Uncovered

what code are you using? what have you tried? – Obeded

Answer 1

I found an answer to my own question.. I used "renderer" in handsontable to render the cell into HTML

columns: [
                    {data: "unique_no"},
                    {data: "title"},
                    {data: "subject"},
                    {data: "year"},
                    {data: "duration"},
                    {data: "color"},
                    {data: "language"},
                    {data: "synopsis"},
                    {data: "director"},
                    {data: "basic_format"},
                    {data: "created_at"},
                    {data: "updated_at"},
                    {data: "action", renderer: "html",readOnly: true}

                  ],

This is where I found it http://handsontable.com/demo/renderers_html.html#dropdown

Uncovered

This should be marked as the right answer. Thanks for sharing! – Alkaline

Answer 2

Try using htmlRenderer

Demo: http://docs.handsontable.com/0.19.0/demo-custom-renderers.html

var actionRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  var $button = $('<button>');
  $button.html(value)
  $(td).empty().append($button); //empty is needed because you are rendering to an existing cell
};

var $container = $("#example1");
$container.handsontable({
  /*....*/
  columns: [
    /*....*/
    {data: "action", renderer: actionRenderer}
  ]
});

For better performance, the renderer could be written in pure JavaScript

Touchmenot

Thanks. This is the process I am using because I want to add custom event listeners to the "value". – Leadwort

Answer 3

you can simply do this custom renderer.

columns: [
    { data: 'basicFormat', renderer: 'text'},
    { data: 'createdAt', renderer: 'text'},
    { data: 'updatedAt', renderer: 'text'},
    { data: 'action', renderer: 'html'},    
]

Adenectomy

Answer 4

document.addEventListener("DOMContentLoaded", function() {

  var
    data = [{}, {},
      {
        title: createNew()
      }
    ],
    container1,
    hot1;
  
  container1 = document.getElementById('example1');
  hot1 = new Handsontable(container1, {
    data: data,
    colWidths: 220,
    colHeaders: true,
    columns: [
      {data: "title", renderer: "html"}
    ]
  });

  
 function createNew(){
    return "<div class='new'>button</div>"
 };

var button = document.querySelector('.new');
button.addEventListener('click', function(){
    alert('button')
})

});

Least