jqxGrid button format

Question

I wish to use the cellsrender to render my own button using something like the following code:

 $("#jqxgrid").jqxGrid(
        {
            width: 850,
            source: dataAdapter,
            columnsresize: true,
            columns: [
              { text: 'Name', datafield: 'firstname', width: 120 },
              { text: 'Last Name', datafield: 'lastname', width: 120 },
              { text: 'Product', datafield: 'productname', width: 180 },
              { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
              { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
              { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' },
              {
                  text: 'Edit', width: 100, height: '100%', datafield: 'Name', columntype: 'button',
                  cellsrenderer: function (cellvalue, options, rowObject) {
                      return '<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="">Edit</button>';
                  },
                  buttonclick: function (row) {
                      var data = $('#jqxgrid').jqxGrid('getrowdata', row);
                      alert(data.firstname);
                  }
              }
            ]
        });

As you can see I am trying to render a button in the cellsrender so that I can make a modal form appear.

You should create an example in http://fiddle.jshell.net/ or take an image. — Rong Nguyen, Jul 17 '15 at 00:48

score 0 · Answer 1 · answered Jul 28 '15 at 16:50

You can't use a cellsrenderer like that with the button columntype and buttonclick handler. You can only return the text to be displayed in the button. Your cellsrenderer would look like the following:

cellsrenderer: function() {
  return 'Edit';
}

As far as including your bindings to make the modal work, you'll have to do it another way

jqxGrid button format

1 Answers1