Dynamic column in Ignite UI Grid
dynamic column in Ignite UI Grid and styling (right align numeric columns) - for http://stackoverflow.com/questions/19902864/right-align-dynamic-column-of-datatype-number-in-iggrid
HTML
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.1/jquery.mockjax.min.js"></script>
<p>There's a mock'd remote endpoint (via mockjax.js) that replies to that post for column definitions.</p>
<button onclick="gridSetup()"> Swap columns </button>
<div id="grid1"></div>
<div id="log" style="overflow:auto; height:200px; background-color:#f2f2f2; padding:5px"></div>
CSS
.rightAlign {
text-align:right;
background: rgba(0, 170, 222, 0.1);
color:red;
}
JavaScript
var swap = 0;
$.ig.loader({
scriptPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/js/',
cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
theme: 'metro'
});
$.ig.loader("igGrid.Paging.ColumnMoving", function () {
gridSetup();
});
function gridSetup(){
$.post('/Main/GetColumns', function (data) {
if ($("#grid1").data('igGrid')) $("#grid1").igGrid("destroy");
$("#grid1").igGrid({
columns: data,
width: "100%",
height: "400px",
autoGenerateColumns: false,
autoGenerateLayouts: false,
dataSource: [{
'id': 0,
'fullname': '',
'fname': 'John',
'lname': 'Doe',
'username': 'jdoe',
'userLevel': 'master',
'userGroupId': '34567890oj6789f',
'email': '[email protected]',
'status': true
}, {
'id': 1,
'fullname': '',
'fname': 'Jane',
'lname': 'Doe',
'username': 'janedoe',
'userLevel': 'user',
'userGroupId': '345fhth66789f',
'email': '[email protected]',
'status': false
}, {
'id': 2,
'fullname': '',
'fname': 'John',
'lname': 'Doe',
'username': 'jdoe',
'userLevel': 'master',
'userGroupId': '34567890oj6789f',
'email': '[email protected]',
'status': true
}, {
'id': 3,
'fullname': '',
'fname': 'Jane',
'lname': 'Doe',
'username': 'janedoe',
'userLevel': 'user',
...