Html Grid

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

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div class='main'>

</div>

CSS

.brtc-va-editors-sheet-controls-propertycontrol-group{
  border:1px solid;
  width:200px;
  height:auto;
  position : relative;
}
.brtc-va-editors-sheet-controls-propertycontrol-table
{
  width:100%;
  border:1px solid;
}
td > input{
  width:98%;
}
.label{
  width:98%;
  text-overflow: ellipsis; 
  overflow: hidden;
}

JavaScript

this.$contents  = $('<div class="brtc-va-editors-sheet-controls-propertycontrol-contents">');
$('.main').append(this.$contents);
this.$addButton = $('<input type="button" value="+ Add Condtion" style="border:1px dashed #86BFA0; margin-top: 5px"/>');
this.$removeButton = $('<input type="button" value="- Remove Condtion" style="border:1px dashed #86BFA0; margin-top: 5px"/>');
this.$addColumn = $('<input type="button" value="addColumn Condtion" style="border:1px dashed #86BFA0; margin-top: 5px"/>');
this.$removeColumn = $('<input type="button" value="removeColumn Condtion" style="border:1px dashed #86BFA0; margin-top: 5px"/>');
this.$contents.append(this.$addButton);
this.$contents.append(this.$removeButton);
this.$contents.append(this.$addColumn);
this.$contents.append(this.$removeColumn);
var cnt=0;

function createGroupByControl()
{
  this.$inputControl = this.$contents.find('.brtc-va-editors-sheet-controls-propertycontrol-group');
  if(this.$inputControl.is('div'))
  {
    this.$contents.prepend(this.$inputControl.last().clone());
  }else
  {
    this.$inputControl = $('<div class="brtc-va-editors-sheet-controls-propertycontrol-group"/>');
    this.$table = $( '<table class="brtc-va-editors-sheet-controls-propertycontrol-table">'
                    +'<tr>'
                    +'<td><div class="label">Fraction</div></td>'
                    +'<td><input class="aa"/></td>'
                    +'</table>'
                   );
    this.$inputControl.append(this.$table);
    this.$contents.prepend(this.$inputControl);
  }

}

function removeGruopByControl()
{
  this.$inputControl = this.$contents.find('.brtc-va-editors-sheet-controls-propertycontrol-group');
  this.$inputControl.last().remove();
}

function addColumnControl()
{
  cnt++;
  this.$columnControl =$('<tr>'
                         +'<td><div class="label">'+cnt+'</div></td>'
                         +'<td><input class="aa"/></td>'
                         +'</tr>');
  this.$table =...