How to render button inside grid?

[emoticonParticipant]

I need to render buttons inside grid with, but I don’t know how
This is my snippet on Column render:

 COLUMNS = [
              {
                text: 'SPV', datafield: 'confirm_spv', width: 80, cellsrenderer: function (row, column, value) 
                {      
                  var cell_value = '';
                  var division = '"spv"';

                  var dataRecord = $("#grid").jqxGrid('getrowdata', row);
                  var id = dataRecord.id;
                 
                  cell_value = "<button class='confirm' onclick='doConfirm(" + division + ',' + id + ")'>Confirm</button>";   
                  $('.confirm.).jqxButton({ width: 120, imgPosition: "left", textPosition: "left", imgSrc: "img/icons/check.png' });     

                  return "<div style='text-align: center; width: 100%; top:7px; position: relative'>" + cell_value + "</div>";
              
                },
              ]

[emoticonParticipant]

When I put this line:
$('.confirm.).jqxButton({ width: 120, imgPosition: "left", textPosition: "left", imgSrc: "img/icons/check.png' });
On Document Ready, after Grid render,
It says: Uncaught Error: Invalid Selector – .confirm! Please, check whether the used ID or CSS Class name is correct.

[MartinParticipant]

Hello emoticon,

You are getting the above error because the element is not yet created when you are trying to select it.
Instead, you could move this line: $('.confirm.).jqxButton({ width: 120, imgPosition: "left", textPosition: "left", imgSrc: "img/icons/check.png' }); in the ready callback of the grid.

Here is an Example.

I would also suggest you to check the following Demo.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[pmatuskiParticipant]

Still, this does not work.
It gets rendered when the grid is shown, everything is okay with that, but when you scroll down the grid, everything gets back to default

[MartinParticipant]

Hello pmatuski,

You could use the createwidget callback of the column. It sets a custom function which is called when a widget in a cell is created. The grid passes 4 parameters to it – row, column, cell value and the cell’s element.

You could check this Demo about Widget Column.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts