Blogs

In this post, we will show you how to use the jqxGrid widget in unbound mode to create a Spreadsheet. 1. Create a new web page and in the head section, add the JavaScript and CSS files.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 

2. Add a DIV tag for the jqxGrid in the document’s body.

<div id="jqxgrid"></div>

3. Create an array of Columns and DataFields. We’ll use them in the initialization of the jqxGrid and its source object.

 // renderer for grid columns.
 var columnrenderer = function (value) {
	 return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
 }
 // renderer for grid cells.
 var numberrenderer = function (row, column, value) {
	 return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
 }
 
 var datafields = [];
 var columns = [];
 for (var i = 0; i < 26; i++) {
	 var text = String.fromCharCode(65 + i);
	 if (i == 0) {
		 var cssclass = 'jqx-widget-header';
		 if (theme != '') cssclass += ' jqx-widget-header-' + theme;
		 columns[columns.length] = {pinned: true, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
	 }
	 datafields[datafields.length] = { name: text };
	 columns[columns.length] = { text: text, datafield: text, width: 60, renderer: columnrenderer };
 }

4. Create the source object. In the source object’s initialization, set the unboundmode property to true. The totalrecords value specifies the number of rows that will be displayed in the Grid.

var source =
{
	unboundmode: true,
	totalrecords: 100,
	datafields: datafields,
	updaterow: function (rowid, rowdata) {
		// synchronize with the server - send update command   
	}
};

5. The last step is to initialize the Grid by using the source object and the columns array. The result is an editable Spreadsheet.

var dataAdapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid(
{
	source: dataAdapter,
	editable: true,
	columnsresize: true,
	selectionmode: 'multiplecellsextended',
	theme: theme,
	columns: 'classic'
});