adamalex/index.html

## index.html
<!DOCTYPE html>
<html class="fuelux">
<head>
    <title>Datagrid Example</title>
    <link href="https://fuelcdn.com/fuelux/2.2/css/fuelux.min.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://fuelcdn.com/fuelux/2.2/loader.min.js"></script>
    <script>

    // SETCOLUMNWIDTHS OVERRIDE
    $.fn.datagrid.Constructor.prototype.setColumnWidths = function () {
         if (!this.$sizingHeader) return;

         this.$element.prepend(this.$sizingHeader);

         var $sizingCells = this.$sizingHeader.find('th');
         var columnCount = $sizingCells.length;
         var tableWidth = $sizingCells.parent().width(); // Used to calculate the width percent

         function matchSizingCellWidth(i, el) {
             // if (i === columnCount - 1) return; // Shouldn't every cell change width when resized?
             var width = $sizingCells.eq(i).width();
             $(el).width((width/tableWidth)*100 + "%"); // Using percentage of table width
         }

         this.$colheader.find('th').each(matchSizingCellWidth);

         // Add the header row to the tbody
         var headerRow = this.$colheader.clone();
         headerRow.find('i').remove(); //Remove the sort icon
         this.$tbody.prepend(headerRow);
         // Hide the header row
         headerRow.find('th').each(function(i,e) {
             $(e).css({'height':'0px',
                 'line-height':'0px',
                 'overflow':'hidden',
                 'padding':'0px',
                 'border':'none'});
         });

         this.$tbody.find('tr:first > td').each(matchSizingCellWidth);
         // Fix border issue
         this.$tbody.find('tr:not(tr:first):first td').each(function(i, el) {
             $(el).css('border-top', 'none');
         });

         this.$sizingHeader.detach();
    }

    // DATASOURCE FOR TESTING (CONTAINS LONG VALUES)
    var dataSource = {
        columns: function() {
            return [{property: 'USER_FIRSTFIELD',label: 'USER_FIRSTFIELD',sortable: true},{property: 'VALUE_ONE',label: 'LONG_VALUE_ONE',sortable: true},{property: 'CUSTOMER_ID',label: 'CUSTOMER_ID',sortable: true},{property: 'FIRST_NAME',label: 'FIRST_NAME',sortable: true},{property: 'SITE_GROUP',label: 'SITE_GROUP',sortable: true},{property: 'CURRENT_STATUS',label: 'CURRENT_STATUS',sortable: true},{property: 'SOURCE_CODE',label: 'SOURCE_CODE',sortable: true},{property: 'LIST_DATE',label: 'LIST_DATE',sortable: true},{property: 'PERS_DATA',label: 'PERS_DATA',sortable: true}];
        },
        data: (function() {
            var count = 0;
            return function(options, callback) {
                    setTimeout(function () {
                        callback({
                        data:[{"USER_FIRSTFIELD":"1","VALUE_ONE":"1","CUSTOMER_ID":"1","FIRST_NAME":"1","SITE_GROUP":"1","CURRENT_STATUS":"1","SOURCE_CODE":"1","LIST_DATE":"1/1/2001 12:00:00 AM","PERS_DATA":"1"}],
                        start: 1,
                        end: 1,
                        count: 1,
                        pages: 1,
                        page: 1
                    });
                }, 200);
            };
        })()
    };

    // INITIALIZATION
    $(function () {
        $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });

        $('#ReloadButton').on('click', function() {
            $('#MyGrid').datagrid('reload');
        });

        $(window).on('resize', function () {
            $('#MyGrid').datagrid('setColumnWidths');
        });
    });

    </script>
</head>
<body style="padding:5px;">
    <div style="height:250px;">
        <table id="MyGrid" class="table table-bordered datagrid">
            <thead>
                <tr>
                    <th>
                        <span class="datagrid-header-title">Column Width Example</span>
                        <div class="datagrid-header-left">

                        </div>
                        <div class="datagrid-header-right">
                        <div class="input-append search">
                            <input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button>
                        </div>
                        </div>
                    </th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <th>
                        <div class="datagrid-footer-left" style="display:none;">
                            <div class="grid-controls">
                                <span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span>
                                <select class="grid-pagesize"><option>10</option><option>20</option><option>50</option><option>100</option></select>
                                <span>Per Page</span>
                            </div>
                        </div>
                        <div class="datagrid-footer-right" style="display:none;">
                            <div class="grid-pager">
                                <button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
                                <span>Page</span>
                                <div class="input-append dropdown combobox">
                                    <input class="span1" type="text"><button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
                                    <ul class="dropdown-menu"></ul>
                                </div>
                                <span>of <span class="grid-pages"></span></span>
                                <button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
                            </div>
                        </div>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
    <p style="padding-top:10px;"><button class="btn" id="ReloadButton">Reload</button>
</body>
</html>
	<!DOCTYPE html>
	<html class="fuelux">
	<head>
	<title>Datagrid Example</title>
	<link href="https://fuelcdn.com/fuelux/2.2/css/fuelux.min.css" rel="stylesheet" type="text/css">
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://fuelcdn.com/fuelux/2.2/loader.min.js"></script>
	<script>

	// SETCOLUMNWIDTHS OVERRIDE
	$.fn.datagrid.Constructor.prototype.setColumnWidths = function () {
	if (!this.$sizingHeader) return;

	this.$element.prepend(this.$sizingHeader);

	var $sizingCells = this.$sizingHeader.find('th');
	var columnCount = $sizingCells.length;
	var tableWidth = $sizingCells.parent().width(); // Used to calculate the width percent

	function matchSizingCellWidth(i, el) {
	// if (i === columnCount - 1) return; // Shouldn't every cell change width when resized?
	var width = $sizingCells.eq(i).width();
	$(el).width((width/tableWidth)*100 + "%"); // Using percentage of table width
	}

	this.$colheader.find('th').each(matchSizingCellWidth);

	// Add the header row to the tbody
	var headerRow = this.$colheader.clone();
	headerRow.find('i').remove(); //Remove the sort icon
	this.$tbody.prepend(headerRow);
	// Hide the header row
	headerRow.find('th').each(function(i,e) {
	$(e).css({'height':'0px',
	'line-height':'0px',
	'overflow':'hidden',
	'padding':'0px',
	'border':'none'});
	});

	this.$tbody.find('tr:first > td').each(matchSizingCellWidth);
	// Fix border issue
	this.$tbody.find('tr:not(tr:first):first td').each(function(i, el) {
	$(el).css('border-top', 'none');
	});

	this.$sizingHeader.detach();
	}

	// DATASOURCE FOR TESTING (CONTAINS LONG VALUES)
	var dataSource = {
	columns: function() {
	return [{property: 'USER_FIRSTFIELD',label: 'USER_FIRSTFIELD',sortable: true},{property: 'VALUE_ONE',label: 'LONG_VALUE_ONE',sortable: true},{property: 'CUSTOMER_ID',label: 'CUSTOMER_ID',sortable: true},{property: 'FIRST_NAME',label: 'FIRST_NAME',sortable: true},{property: 'SITE_GROUP',label: 'SITE_GROUP',sortable: true},{property: 'CURRENT_STATUS',label: 'CURRENT_STATUS',sortable: true},{property: 'SOURCE_CODE',label: 'SOURCE_CODE',sortable: true},{property: 'LIST_DATE',label: 'LIST_DATE',sortable: true},{property: 'PERS_DATA',label: 'PERS_DATA',sortable: true}];
	},
	data: (function() {
	var count = 0;
	return function(options, callback) {
	setTimeout(function () {
	callback({
	data:[{"USER_FIRSTFIELD":"1","VALUE_ONE":"1","CUSTOMER_ID":"1","FIRST_NAME":"1","SITE_GROUP":"1","CURRENT_STATUS":"1","SOURCE_CODE":"1","LIST_DATE":"1/1/2001 12:00:00 AM","PERS_DATA":"1"}],
	start: 1,
	end: 1,
	count: 1,
	pages: 1,
	page: 1
	});
	}, 200);
	};
	})()
	};

	// INITIALIZATION
	$(function () {
	$('#MyGrid').datagrid({
	dataSource: dataSource,
	stretchHeight: true
	});

	$('#ReloadButton').on('click', function() {
	$('#MyGrid').datagrid('reload');
	});

	$(window).on('resize', function () {
	$('#MyGrid').datagrid('setColumnWidths');
	});
	});

	</script>
	</head>
	<body style="padding:5px;">
	<div style="height:250px;">
	<table id="MyGrid" class="table table-bordered datagrid">
	<thead>
	<tr>
	<th>
	<span class="datagrid-header-title">Column Width Example</span>
	<div class="datagrid-header-left">

	</div>
	<div class="datagrid-header-right">
	<div class="input-append search">
	<input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button>
	</div>
	</div>
	</th>
	</tr>
	</thead>

	<tfoot>
	<tr>
	<th>
	<div class="datagrid-footer-left" style="display:none;">
	<div class="grid-controls">
	<span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span>
	<select class="grid-pagesize"><option>10</option><option>20</option><option>50</option><option>100</option></select>
	<span>Per Page</span>
	</div>
	</div>
	<div class="datagrid-footer-right" style="display:none;">
	<div class="grid-pager">
	<button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
	<span>Page</span>
	<div class="input-append dropdown combobox">
	<input class="span1" type="text"><button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
	<ul class="dropdown-menu"></ul>
	</div>
	<span>of <span class="grid-pages"></span></span>
	<button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
	</div>
	</div>
	</th>
	</tr>
	</tfoot>
	</table>
	</div>
	<p style="padding-top:10px;"><button class="btn" id="ReloadButton">Reload</button>
	</body>
	</html>