Html Grid

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

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"></div>
		<button id="openPopup">open</button>

CSS

.vertical {
    position:absolute;
    background: red;
    width: 15px;
    height: 100%;
}

JavaScript

$(document).ready(function ()
{
    var source = {
      datatype: "json",
      datafields: [
        { name: 'version' },
        { name: 'id' }
      ],
      id: 'id',
      localdata: [{
          version: '',
          id: '99<br>77',
      }, {
          version: '',
          id: 5
      }],
    };

    var $newsList = $('#news');
  
    $newsList.jqxGrid({
      width: '100%',
      source: source,
      showheader: false,
      rowsheight: 20,
      autorowheight: true,
      autoheight: true,
      columns: [{
        text: 'version',
        datafield: 'version',
        cellclassnamefren: 'vertical',
        cellsrenderer : function(row, columnfield, value) {
          return '<div >'+value+'</div>';
        },
        width: 15
      }, {
        text: 'id',
        datafield: 'id',
        width: 15
      }]
    });
    
    $('#openPopup').click(function() {
        var win = $('<div><div>title</div><div>cont</div></div>');
        win.appendTo($('body'));
        win.jqxWindow();
    })
});