How to get row data from the createwidget column's callback function?

[tryingParticipant]

I’m trying to create a jqxButton inside a jqxGrid cell in the following way:

source: new $.jqx.dataAdapter({
  ...
  datafields: [
    { name: "id",        type: "int"    },
    { name: "firstName", type: "string" },
    ...
  ]
...
columns: [
{
  text: "Actions",
  datafield: "actions",
  width: 100,
  createwidget: function (row, column, value, htmlElement) {
    var button = $("<button>Show data</button>");
    $(htmlElement).append(button);
    button.jqxButton({});
    button.click(function () {
      var rowdata = $("#grid").jqxGrid("getrowdata", ???);
      // or $("#grid").jqxGrid("getrowdatabyid", ???);
      alert("id = " + rowdata.id + ", first name = " + rowdata.firstName);
    });
  },
  initwidget: function (row, column, value, htmlElement) {

  }
}

But I have no idea of how to pass the required arguments to the getrowdata function. Is it even possible?

[Ivo ZhulevParticipant]

Hi trying,

Here you can see how to do that:
https://www.jseditor.io/?key=createwidget-button-callback

Best Regards,
Ivo

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

[tryingParticipant]

Hi Ivo,

Your solution doesn’t work. You have used ‘row.boundindex’ in your example, but this value is duplicated for different rows. So it shows wrong data.
Try to click ‘Show data’ in your example on some row which index is 17 for example:
https://www.jseditor.io/?key=createwidget-button-callback

[tryingParticipant]

Maybe there is another function which I can use to create a widget with access to row data? It is very bad that I can’t create even a simple jqxButton in such a way.
Your ‘cellsrenderer’ function doesn’t allow that because it expects a raw markup to be returned.

[Ivo ZhulevParticipant]

Hi trying,

You will find my demo link updated. Create the button directly in another column (columntype: ‘button’).

Best Regards,
Ivo
jQWidgets Team
http://www.jqwidgets.com/

[tryingParticipant]

Hi Ivo,

But what about two or three buttons (or some complex widget containing few more widgets, etc.)?
I have simplified my example to make my question cleaner. It’s not about how to create a button, which can handle click events, but how to get row data when creating custom widgets in jqxGrid cells (in my case there may be different widgets, or no widgets at all, depending on the value of the row).
Why there is no access to the row at widget creation time? Why ‘cellsrenderer’ has this parameter and ‘createwidget’ has not?

[Ivo ZhulevParticipant]

Hi trying,

Please take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light

Best Regards,
Ivo

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

[tryingParticipant]

Hi Ivo,

There is access to the only one field per column in that demo:

columns: [
  {
    text: 'Picture', datafield: 'firstname', width: 100,
    createwidget: function (row, column, value, htmlElement) {
      // 'value' is the value of the 'firstname' field

There is no means to access the whole row.

[Ivo ZhulevParticipant]

Hi trying,

You can get the row identifier from the row argument. Then use ‘getrowdata’.

Best Regards,
Ivo

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

[Author]

Posts