[FlexGrid] PDF

by KirillMetrik

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.cs.min.js"></script>
<div class="container">
    
  <button id="btnExport" class="btn btn-default">
    PDF
  </button>
  
  <div id="theGrid"></div>
  
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin: 12px 0;
}
body {
  margin-bottom: 20px;
}

JavaScript

// show the data in a grid
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  columns: [
    { header: 'Umístění', binding: 'place' },
    { header: 'Řidič', binding: 'driver', width: '*' }
  ],
  itemsSource: [{place: "A", driver: "aaaaa"},
  							{place: "B", driver: "bbbbb"}]
});

// add a filter to show that it works while exporting
var f = new wijmo.grid.filter.FlexGridFilter(theGrid);

// export grid to PDF
document.getElementById('btnExport').addEventListener('click', function() {
  wijmo.grid.pdf.FlexGridPdfConverter.export(theGrid, 'FlexGrid.pdf');
});