[karimyafiMember]

Did you face the problem of only having the first row affected and not the others?
I want to render a combo box in all the cells of a column. I’m doing this:

1- The function used for cells rendering:

var cellRenderer = function (row, columnfield, value, defaulthtml, columnproperties){
  var result = '<div id="listingridcell"></div>';
  fillCell("#listingridcell");
  return result;
 }

2- Filling the cell with the combo:

function fillCell(divName){
  var source = [
		"Affogato",
                "Americano",
                "Bicerin",
                "Breve",
                "Café Bombón",
                "Café au lait",
                "Caffé Corretto",
                "Café Crema",
                "Caffé Latte",
  ];
  // Create a jqxComboBox
  $(divName).jqxComboBox({ source: source, selectedIndex: 0, width: '200px', height: '25px' });
}

3- Finally, the grid (somewhere in the $(document).ready(function(){…}):

$("#grid").jqxGrid({
  source: dataSource,
  theme: 'energyblue',
  width: 920,
  columns: [
		{ text: 'Name', datafield: 'name', width: 250, cellsrenderer: cellRenderer},
		{ text: 'Beverage Type', datafield: 'type', width: 250 },
		{ text: 'Calories', datafield: 'calories', width: 180 },
		{ text: 'Total Fat', datafield: 'totalfat', width: 120 },
		{ text: 'Protein', datafield: 'protein', width: 120 }
  ]
});

The problem is that I only get the first row rendered properly with the. I tried to change the div id in cell renderer function by dynamically creating id’s, something like the following but no success..

// row is the row number parameter in the rendering function..
var result = '<div id="listingridcell_' + row + '"></div>';

[Author]

Posts