This is example for JQuery Grid. I have created this demo for my project purpose. I think It may help some one else also.
Functionality of this grid is as follows:
1) Floating grid header when grid autoheight is true.
2) Column Filtering with drop down list checkbox
3) Custom Filtering on column
4) Modal Window
5) Drop down tree
6) Add hide column on run time
7) Code include browser detection function
8) Compatible with all browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example shows how to fit the jqxGrid to the browser window's size..</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.darkblue.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
<style>
body{width: 100%;
height: 100%;
overflow: hidden;
overflow-y: scroll;
overflow-x: hidden !important;
}
</style>
<script type="text/javascript">
function GetBrowser()
{
var userAgent = navigator.userAgent.toLowerCase();
$.browser.chrome = /chrome/.test(userAgent);
$.browser.safari= /webkit/.test(userAgent);
$.browser.opera=/opera/.test(userAgent);
$.browser.msie=/msie/.test( userAgent ) && !/opera/.test( userAgent );
$.browser.mozilla= /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) || /firefox/.test(userAgent);
if($.browser.chrome) return "chrome";
if($.browser.mozilla) return "mozilla";
if($.browser.opera) return "opera";
if($.browser.safari) return "safari";
if($.browser.msie) return "ie";
}
var basicDemo = (function () {
function _addEventListeners() {
$('#showWindowButton').click(function () {
$('#window').jqxWindow('open');
});
$('#window').bind('resizing', function (event) {
$('#tab').jqxTabs('height', $('#windowContent').height() - 3);
});
}
//Creating all page elements which are jqxWidgets
function _createElements() {
$('#showWindowButton').jqxButton({ theme: basicDemo.config.theme, height: '25px', width: '160px' });
$('#restrictParentCheckBox').jqxCheckBox({ theme: basicDemo.config.theme, height: '25px', width: '185px', checked: true });
$('#tab').jqxTabs({ height: 258, theme: basicDemo.config.theme });
};
//Creating the demo window
function _createWindow() {
$('#window').jqxWindow({
showCollapseButton: true,
maxHeight: 200,
maxWidth: 500,
minHeight: 100,
minWidth: 200,
height: 'auto',
width: 600,
theme: basicDemo.config.theme,
autoOpen : false,
isModal:false,
position:'top',
title:'Attributes',
resizable: true
});
};
return {
config: {
dragArea: null,
theme: null
},
init: function () {
//Creating all jqxWindgets except the window
_createElements();
//Attaching event listeners
_addEventListeners();
//Adding jqxWindow
_createWindow();
}
};
} ());
var customFilterDemo = (function () {
function _addEventListeners() {
$('#showCustomFilterWindowButton').click(function () {
$('#customWindowFilter').jqxWindow('open');
});
$('#customWindowFilter').bind('resizing', function (event) {
$('#filterTab').jqxTabs('height', $('#customWindowContentFilter').height() - 3);
});
}
//Creating all page elements which are jqxWidgets
function _createElements() {
$('#showCustomFilterWindowButton').jqxButton({
theme: basicDemo.config.theme,
height: '25px',
width: '170px'
});
$('#filterTab').jqxTabs({ height: 258, theme: basicDemo.config.theme });
};
//Creating the demo window
function _createWindow() {
$('#customWindowFilter').jqxWindow({
showCollapseButton: true,
maxHeight: 200,
maxWidth: 500,
minHeight: 100,
minWidth: 200,
height: 'auto',
width: 600,
theme: basicDemo.config.theme,
autoOpen : false,
isModal:false,
position:'top',
title:'Custom Filter',
resizable: true
});
};
return {
config: {
dragArea: null,
theme: null
},
init: function () {
//Creating all jqxWindgets except the window
_createElements();
//Attaching event listeners
_addEventListeners();
//Adding jqxWindow
_createWindow();
}
};
} ());
$(document).ready(function () {
var theme = getTheme();
//Setting windows theme
basicDemo.config.theme = theme;
//Initializing the demo for windows
basicDemo.init();
customFilterDemo.config.theme = theme;
customFilterDemo.init();
/*var loader = $("<img src='../../images/ajax-loader.gif' />");
var parentsLength = $("#jqxWidget").parents().length;
if (parentsLength > 3) {
//url = 'demos/jqxlistbox/jqxlistboxxmldata.xml';
loader = $("<img src='images/ajax-loader.gif' />");
}*/
//setTimeout(1000);
var numberOfRecords=200;
// prepare the data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 200; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
row["available"] = productindex % 2 == 0;
var date = new Date();
date.setFullYear(2012, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row["date"] = date;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: '96%',
//autowidth:true,
height:'100%',//'800,
autoheight: true,//check
//scrollbarsize:2,
showfilterrow: true,
filterable: true,
source: dataAdapter,
theme: theme,
columnsresize: true,
sortable: true,
selectionmode: 'singlerow',
showstatusbar: true,
statusbarheight: 50,
altrows: true,
showaggregates: true,
ready: function () {
$("#jqxgrid").jqxGrid('hidecolumn', 'date');
},
//groupable: true,//is not working properly grouping functionlity with filterable false on column
//groups: ['quantity','price'],
//pageable: true,
columns: [
{ text: 'First Name', dataField: 'firstname', width: 100,pinned: true,columntype: 'textbox',showfilterrow: false, filterable: false,filtertype: 'default',groupable:false },
{ text: 'Last Name', dataField: 'lastname', width: 100,columntype: 'textbox' },
{ text: 'Product', dataField: 'productname', width: 180,columntype: 'textbox',filtertype: 'checkedlist',
aggregates: ['count',
{ 'Cappuccino Items':
function (aggregatedValue, currentValue) {
if (currentValue == "Cappuccino") {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}
]
},
{ text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right',columntype: 'textbox',filtertype: 'checkedlist',
aggregatesrenderer: function (aggregates) {
var renderstring = "";
$.each(aggregates, function (key, value) {
var name = key == 'min' ? 'Min' : 'Max';
renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value +'</div>';
});
return renderstring;
}
},
{ text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2',columntype: 'textbox',filtertype: 'checkedlist',
aggregates: [{ '<b>Total</b>':
function (aggregatedValue, currentValue, column, record) {
var total = currentValue * parseInt(record['quantity']);
return aggregatedValue + total;
}
}]
},
{ text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2',filtertype: 'number' },
{ text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 100,cellsalign: 'right',
aggregates: [{ 'In Stock':
function (aggregatedValue, currentValue) {
if (currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
},
{ 'Not In Stock':
function (aggregatedValue, currentValue) {
if (!currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}
]
},
{ text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 180, cellsalign: 'right', cellsformat: 'd' }
]
});
var listSource = [{ label: 'Ship Date', value: 'date', checked: false },
{ label: 'Available', value: 'available', checked: false },
{ label: 'Total', value: 'total', checked: true },
{ label: 'Unit Price', value: 'price', checked: true },
{ label: 'Quantity', value: 'quantity', checked: true},
{ label: 'Product', value: 'productname', checked: true},
{ label: 'Last Name', value: 'lastname', checked: true},
{ label: 'First Name', value: 'firstname', checked: true}
];
//list box for column code
$("#jqxlistbox").jqxListBox({ source: listSource, theme: theme, checkboxes: true,allowDrop: true, allowDrag: true });
$("#jqxlistbox").bind('checkChange', function (event) {
if (event.args.checked) {
$("#jqxgrid").jqxGrid('showcolumn', event.args.value);
}
else {
$("#jqxgrid").jqxGrid('hidecolumn', event.args.value);
}
});
/*var offset = $("#jqxWidget").position();
$("#loading").css({ left: 75 + offset.left, top: -220 });
$("#loading").append(loader);*/
//excel export code
$("#excelExport").jqxButton({
theme: theme
});
$("#excelExport").click(function () {
$("#jqxgrid").jqxGrid(
'exportdata',
'xls',
'jqxGrid');
});
//drop down tree
$("#dropDownButton").jqxDropDownButton({ width: 150, height: 25, theme: theme });
$('#jqxTree').bind('select', function (event) {
var args = event.args;
var item = $('#jqxTree').jqxTree('getItem', args.element);
var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
$("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
});
$("#jqxTree").jqxTree({ width: 200, theme: theme });
// create buttons, listbox and the columns chooser dropdownlist.
$("#applyfilter").jqxButton({ theme: theme });
$("#clearfilter").jqxButton({ theme: theme });
$("#filterbox").jqxListBox({ checkboxes: true, theme: theme, width: 200, height: 250 });
$("#columnchooser").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, theme: theme, width: 200, height: 25,
source: [
{ label: 'Ship Date', value: 'date' },
{ label: 'Quantity', value: 'quantity' },
{ label: 'Unit Price', value: 'price' },
{ label: 'Total', value: 'total' }
]
});
// updates the listbox with unique records depending on the selected column.
var updateFilterBox = function (datafield) {
var filterBoxAdapter = new $.jqx.dataAdapter(source,
{
uniqueDataFields: [datafield],
autoBind: true
});
var uniqueRecords = filterBoxAdapter.records;
uniqueRecords.splice(0, 0, '(Select All)');
$("#filterbox").jqxListBox({ source: uniqueRecords, displayMember: datafield });
$("#filterbox").jqxListBox('checkAll');
}
updateFilterBox('price');
// handle select all item.
var handleCheckChange = true;
$("#filterbox").bind('checkChange', function (event) {
if (!handleCheckChange)
return;
if (event.args.label != '(Select All)') {
handleCheckChange = false;
$("#filterbox").jqxListBox('checkIndex', 0);
var checkedItems = $("#filterbox").jqxListBox('getCheckedItems');
var items = $("#filterbox").jqxListBox('getItems');
if (checkedItems.length == 1) {
$("#filterbox").jqxListBox('uncheckIndex', 0);
}
else if (items.length != checkedItems.length) {
$("#filterbox").jqxListBox('indeterminateIndex', 0);
}
handleCheckChange = true;
}
else {
handleCheckChange = false;
if (event.args.checked) {
$("#filterbox").jqxListBox('checkAll');
}
else {
$("#filterbox").jqxListBox('uncheckAll');
}
handleCheckChange = true;
}
});
// handle columns selection.
$("#columnchooser").bind('select', function (event) {
updateFilterBox(event.args.item.value);
});
// builds and applies the custom slider filter.
var applyFilter = function (datafield) {
//$("#jqxgrid").jqxGrid('clearfilters');
var filtertype = 'stringfilter';
if (datafield == 'date') filtertype = 'datefilter';
if (datafield == 'price' || datafield == 'quantity') filtertype = 'numericfilter';
var filtergroup = new $.jqx.filter();
var checkedItems = $("#filterbox").jqxListBox('getCheckedItems');
if (checkedItems.length == 0) {
var filter_or_operator = 1;
var filtervalue = "Empty";
var filtercondition = 'equal';
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
}
else {
for (var i = 0; i < checkedItems.length; i++) {
var filter_or_operator = 1;
var filtervalue = checkedItems[i].label;
var filtercondition = 'equal';
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
}
}
// add the filters.
$("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
}
// clears the filter.
$("#clearfilter").click(function () {
$("#jqxgrid").jqxGrid('clearfilters');
});
// applies the filter.
$("#applyfilter").click(function () {
var dataField = $("#columnchooser").jqxDropDownList('getSelectedItem').value;
applyFilter(dataField);
});
$("#customApplyfilter").jqxButton({ theme: theme });
$('#jqxSlider').jqxSlider({
orientation: 'vertical',
theme: theme,
height: 100,
width: 20,
mode: 'fixed',
min: 1,
max: 11,
ticksFrequency: 1,
tooltip: true,
value: 0
});
var addfilter = function (datafield) {
$("#jqxgrid").jqxGrid('clearfilters');
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = $("#jqxSlider").jqxSlider('value');
var filtercondition = 'equal';
var filter1 = filtergroup.createfilter('numericfilter', filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
// add the filters.
$("#jqxgrid").jqxGrid('addfilter', 'quantity', filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
}
// applies the filter.
$("#customApplyfilter").click(function () {
addfilter("quantity");
});
var $elem = $(".jqx-grid-header"); // Original element with attached data
var start = $elem.offset().top;
$(window).scroll(function(){
var p = $(window).scrollTop();
$elem.css("position",((p)>start) ? "fixed" : "static");
$elem.css('top',((p)>start) ? '0px' :'');
$elem.css('z-index','10000');
$elem.css('visibility','block');
});
});
</script>
</head>
<body class="default">
<div id="container">
<div id="header">
Header Div Area Header Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div AreaHeader Div Area
</div>
<div>
<div id='jqxWidget'>
<div>
<div style="float: left;">
<input type="button" value="Export to Excel" id='excelExport' />
</div>
<div>
<input type="button" value="Add/Hide Attributes" id="showWindowButton" />
</div>
<div>
<input type="button" value="Custom Filter Attributes" id="showCustomFilterWindowButton" />
</div>
<div id="dropDownButton">
<div id='jqxTree'>
<ul>
<li item-selected='true'>Amplifiers and Linear
<ul>
<li>High Speed Amplifier (Greater than equal to 50MHz)</li>
<li>Voltage Feedback</li>
<li>Current Feedback</li>
<li>JFET/CMOS</li>
<li>Haptic Driver
<ul>
<li>Piezo Haptic Driver</li>
<li>Motor Haptic Driver</li>
</ul>
</li>
</ul>
</li>
<li item-expanded='true'>Audio
<ul>
<li>Audio ADC</li>
<li>Audio CODEC</li>
<li>Audio DAC</li>
<li>Speaker Amplifier and Modulator
<ul>
<li>Portable Amplifier
<ul>
<li>Ceramic/Piezo Speaker </li>
<li>Dynamic Speaker </li>
</ul>
</li>
<li>Mid/High-Power Amplifier</li>
<li>PWM Processor </li>
</ul>
</li>
<li>Headphone Amplifier</li>
</ul>
</li>
<li>Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="window">
<div id="windowHeader">
<span>
<img src="../../images/movie.png" alt="" style="margin-right: 15px" />Attributes
</span>
</div>
<div id="windowContent" style="overflow: hidden;">
<div id="tab">
<ul style="margin-left: 30px;">
<li>Attributes</li>
</ul>
<div id="jqxlistbox"></div>
</div>
</div>
</div>
<div id="customWindowFilter">
<div id="windowHeaderFilter">
<span>
<img src="../../images/movie.png" alt="" style="margin-right: 15px" />Custom Filter
</span>
</div>
<div id="customWindowContentFilter" style="overflow: hidden;">
<div id="filterTab">
<ul style="margin-left: 30px;">
<li>Custom Filter</li>
<li>Slider Filter</li>
</ul>
<div>
<div style="float: left">
<div>
<input type="button" id="applyfilter" value="Apply Filter" />
<input type="button" id="clearfilter" value="Clear Filter" />
</div>
<div>Choose Column:</div>
<div id="columnchooser"></div>
<div id="filterbox"></div>
</div>
</div>
<div>
<div style="float: left">
<input type="button" id="customApplyfilter" value="Apply Filter" />
<p>Quantity</p>
<div id="jqxSlider">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="persist-area" style="margin-top: 100px">
<div id="jqxgrid">
</div>
</div>
</div>
</div>
<!--
<div id='loading' style='position: relative; left: 0; top: 0;'></div>
-->
<div id="footer">
Footer DIV Area
</div>
</div>
</div>
</body>
</html>
