CODEWITHSUNDEEP
jqxgrid
user3129015
user3129015

Reputation:

jqxgrid print formatting and missing column

I have a jqxgrid that gets data from a DB. i have added a run time column call Serial number. This shows on the grid alright. Also on the grid is a print button. The print button when clicked opens a new window with the print preview, but in the preview it does not show the Sr. Numbers.

Pls have a look at the code below and if you can lead me in the right direction.

Thanks

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
<div style='margin-top: 20px;'>
    <div style='float: left;'>
        <input type="button" value="Print" id='Print' />
    </div>
</div>


var data = generatedata(100);
var source = {
  localdata: data,
  datatype: "array",
  datafields: [{
      name: 'firstname',
      type: 'string'
  }, {
      name: 'lastname',
      type: 'string'
  }, {
      name: 'productname',
      type: 'string'
  }, {
      name: 'available',
      type: 'bool'
  }, {
      name: 'quantity',
      type: 'number'
  }, {
      name: 'price',
      type: 'number'
  }],
  updaterow: function (rowid, rowdata) {
      // synchronize with the server - send update command   
  }
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid({
  width: 700,
  source: dataAdapter,
  theme: 'energyblue',
  editable: true,
  selectionmode: 'singlecell',
  columns: [
  {
       text: '#', sortable: false, filterable: false, editable: false,
       groupable: false, draggable: false, resizable: false,
       datafield: '', columntype: 'number', width: 30,
       cellsrenderer: function (row, column, value) {
       return "<div style='margin:4px;'>" + (value + 1) + "</div>";
       }
  },
  {
      text: 'First Name',
      columntype: 'textbox',
      datafield: 'firstname',
      width: 90
  }, {
      text: 'Last Name',
      datafield: 'lastname',
      columntype: 'textbox',
      width: 90
  }, {
      text: 'Product',
      datafield: 'productname',
      width: 170,

  }, {
      text: 'Price',
      datafield: 'price',
      cellsalign: 'right',
      cellsformat: 'c2',
      width: 100
  }]
});
$("#Print").jqxButton({
  theme: 'energyblue'
});
$("#Print").click(function () {
  var prnt = $("#jqxgrid").jqxGrid('exportdata', 'html');
  var newWindow = window.open('', '', 'width=800, height=500'),
      document = newWindow.document.open(),
      pageContent =
                    '<!DOCTYPE html>\n' + '<html>\n' + '<head>\n' + '<meta charset="utf-8" />\n' + '<title>Summary</title>\n' + '</head>\n' + '<body>\n' +
                    '<div>\n<div id="image1" style="position:absolute; overflow:hidden; left:3px; top:3px; width:160px; float:left;">\n' +
                    '</div>\n<div style="margin-left: 300px;float:left;top:5px;"><h2>Sums</h2></div>\n' +
                    '</div>\n<br /><br /><br /><br />' + prnt + '\n</body>\n</html>';
            document.write(pageContent);
  newWindow.print();
});
});

here is a working sample. But i am not sure how to make the button work.
https://jsfiddle.net/Vinod1/by6duep4/3/

Upvotes: 1

Views: 214

Answers (1)

Jefflee0915
Jefflee0915

Reputation: 183

The issue you’re facing is due to the fact that the Serial Number column is not a part of your data source but is generated at runtime. When you export the grid data using the exportdata method, it only exports the data that is present in the data source of the grid. To include the Serial Number in the print preview, you need to add the Serial Number data to your data source. Here’s how you can do it:

Added Serial Number to Data Source

for (var i = 0; i < data.length; i++) {
    data[i].serialNumber = i + 1;
}

Added Serial Number to Data Fields

datafields: [
    // ... your other data fields ...
    { name: 'serialNumber', type: 'number' }
]

Updated Columns to Include Serial Number

{
    text: '#',
    datafield: 'serialNumber', // Replace your current Serial Number column with this
    width: 30
}

Result

var data = generatedata(100);

// Add a 'serialNumber' property to each data item
for (var i = 0; i < data.length; i++) {
    data[i].serialNumber = i + 1;
}

var source = {
  localdata: data,
  datatype: "array",
  datafields: [
    { name: 'serialNumber', type: 'number' }, // Add a new field for 'serialNumber'
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'available', type: 'bool' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' }
  ],
  updaterow: function (rowid, rowdata) {
      // synchronize with the server - send update command   
  }
};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$("#jqxgrid").jqxGrid({
  width: 700,
  source: dataAdapter,
  theme: 'energyblue',
  editable: true,
  selectionmode: 'singlecell',
  columns: [
  {
    text: '#',
    datafield: 'serialNumber', // Replace your current Serial Number column with this
    width: 30
  },
  {
    text: 'First Name',
    columntype: 'textbox',
    datafield: 'firstname',
    width: 90
  }, 
  {
    text: 'Last Name',
    datafield: 'lastname',
    columntype: 'textbox',
    width: 90
  }, 
  {
    text: 'Product',
    datafield: 'productname',
    width: 170,
  }, 
  {
    text: 'Price',
    datafield: 'price',
    cellsalign: 'right',
    cellsformat: 'c2',
    width: 100
  }]
});

$("#Print").jqxButton({
  theme: 'energyblue'
});

$("#Print").click(function () {
  var prnt = $("#jqxgrid").jqxGrid('exportdata', 'html');
  var newWindow = window.open('', '', 'width=800, height=500'),
      document = newWindow.document.open(),
      pageContent =
                    '<!DOCTYPE html>\n' + '<html>\n' + '<head>\n' + '<meta charset="utf-8" />\n' + '<title>Summary</title>\n' + '</head>\n' + '<body>\n' +
                    '<div>\n<div id="image1" style="position:absolute; overflow:hidden; left:3px; top:3px; width:160px; float:left;">\n' +
                    '</div>\n<div style="margin-left: 300px;float:left;top:5px;"><h2>Sums</h2></div>\n' +
                    '</div>\n<br /><br /><br /><br />' + prnt + '\n</body>\n</html>';
            document.write(pageContent);

  var css = '@page { size: landscape; }',
                     head = document.head || document.getElementsByTagName('head')[0],
                     style = document.createElement('style');

  style.type = 'text/css';
  style.media = 'print';

  if (style.styleSheet){
      style.styleSheet.cssText = css;
  } else {
      style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);

  document.close();
  newWindow.print();
});

Upvotes: 0

Related Questions