Html Grid

Dynamically set the columns property of the jqxGrid. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="news" style="width: 400px; height: 200px;"></div>
<button id="openPopup">open</button>
<button id="jqxbutton">reload</button>
<button id="change">change</button>

CSS

.vertical {
    /* margin: 0 auto; */
    position:absolute;
    background: red;
    /* width: 15px; */
    /* height: 10px; */
}

JavaScript

var source = {
  datatype: "json",
  datafields: [
    { name: 'version' },
    { name: 'id' }
  ],
  id: 'id',
  localdata: [{
      version: '',
      id: '99<br>77',
  }, {
      version: '',
      id: 5
  }, {
      version: '',
      id: 1231331
  }, {
      version: '',
      id: '919<br>717'
  }],
};

var $newsList = $('#news');

$newsList.on('bindingcomplete', function() {
  console.log('bindingcomplete');
  // correct the height of vertical text
  $newsList.find('.col-module .vertical').each(function() {
    //console.log($(this).parent());
    var h = $(this).parent().height();
    //console.log(h);
      $(this).css({height: h+'px'});
    
    //if (h > 60) {
    //  $(this).css({height: h+'px', marginTop: h+'px'});
    //}
  });
});

$newsList.jqxGrid({
  width: '100%',
  source: source,
  showheader: false,
  rowsheight: 30,
  autorowheight: true,
  autoheight: true,
  columns: [{
    text: 'version',
    datafield: 'version',
    cellclassname: 'col-module vertical',
    //cellsrenderer : function(row, columnfield, value) {
    //  //console.log(value);
    //  return '<div class="vertical" >'+value+'</div>';
    //},
    width: 15
  }, {
    text: 'id',
    datafield: 'id',
    width: 15
  }],
  rendered: function (ev) {
    console.log('rendered');
    //var gridCells = $('#jqxgrid').find('.jqx-grid-cell');
    //console.log(gridCells);
  },
});

$('#openPopup').click(function() {
    var win = $('<div><div>title</div><div>cont</div></div>');
    win.appendTo($('body'));
    win.jqxWindow();
});
  
$('#jqxbutton').click(function () {
    $newsList.jqxGrid('updatebounddata');
});

$('#change').click(function () {
  var data = $newsList.jqxGrid('getrowboundindex', 2);
  var id = $newsList.jqxGrid('getrowid', 2);
  console.log(data);
  console.log(id);
    //$newsList.jqxGrid('updatebounddata');
});