[QUESTION] how to : cell render with button without row selection on click

[devildantParticipant]

hello,

i add a button on the cell (with cellrender) and i would like the line not to be selected when I click on the button, but I want to keep the line selection system.
how to do this ?

i try to use :
event.preventDefault();
event.stopPropagation();

without success.

[HristoParticipant]

Hello devildant,

I would suggest you use this example as a base:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light
Please, take a look at this approach:

 $("#grid").jqxGrid(
            {
                width: 600,
                source: dataAdapter,
                rowsheight: 90,
                selectionmode: 'multiplerows',
                columns: [
                  {
                      text: 'Picture', datafield: 'firstname', width: 100,
                      createwidget: function (row, column, value, htmlElement) {
                          var datarecord = value;
                          var imgurl = '../../images/' + value.toLowerCase() + '.png';
                          var img = '<img style="margin-top: 8px;" height="50" width="40" src="' + imgurl + '"/>';
                          var button = $("<div style='border:none;'>" + img + "<div class='buttonValue'>" + value + "</div></div>");
                          $(htmlElement).append(button);
                          button.jqxButton({ template: "success", height: '100%', width: '100%' });
                          button.click(function (event) {
                              var clickedButton = button.find(".buttonValue")[0].innerHTML;

                              var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
                              console.log(rowindexes);
                          });
                      },
                      initwidget: function (row, column, value, htmlElement) {
                          var imgurl = '../../images/' + value.toLowerCase() + '.png';
                          $(htmlElement).find('.buttonValue')[0].innerHTML = value;
                          $(htmlElement).find('img')[0].src = imgurl;
                      }
                  },
                  { text: 'Name', datafield: 'name', width: 200 },
                  { text: 'Title', datafield: 'title', width: 200 },
                  { text: 'Country', datafield: 'country' }
                ]
            });

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[devildantParticipant]

hello,

ok thx i will try this.
another question,
is there a complete documentation of all possible options for column, source …?
i search but i don’t found

[HristoParticipant]

Hello devildant,

Please, take a look at the API Documentation section for that particular property, event or method:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=grid
When you expand them it will show detailed information about each one.
Maybe if you write me what you want to achieve I will try to provide you a solution.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts