CODEWITHSUNDEEP
c#asp.net-mvc-4slickgrid
Bill Blankenship
Bill Blankenship

Reputation: 3366

How do I create two images in same column within a slickgrid?

I am attempting to have a select and delete image in one column of my slickgrid and have been unable to do so. I understand how to do a single image button like so. :

var column = {id:delCol, field:'del', name:'Delete', width:250, formatter:buttonFormatter}

//Now define your buttonFormatter function
function buttonFormatter(row,cell,value,columnDef,dataContext){  
    var button = "<input class='del' type='button' id='"+ dataContext.id +"' />";
    //the id is so that you can identify the row when the particular button is clicked
    return button;
    //Now the row will display your button
}

Any ideas on how this can be done?

Upvotes: 0

Views: 658

Answers (1)

TheSisb
TheSisb

Reputation: 56

The data for that cell should include whatever you need for both images/buttons either as an array or {} (object).

Then create one formatter for when you want both in a cell:

// if value is [dataContext.delete.id, dataContext.add.id] for example
function twoButtonFormatter(row, cell, value, columnDef, dataContext) {
  var str = ''; // initialize a string

  // First button
  str += "<input class='del' type='button' id='"+ value[0] +"' /> ";

  // second button
  str += "<button data-id='"+value[1]+"' class='add'>Add</button>";

  // return the html string of both buttons
  return str;
}

Upvotes: 1

Related Questions