Cleaned up grid examples

zentalk · Apr 18, 2013 · db7e7be · db7e7be
1 parent 39cdccd
commit db7e7be
Show file tree

Hide file tree

Showing 24 changed files with 74 additions and 102 deletions.
diff --git a/demos/data/list2.json b/demos/data/list2.json
@@ -38,6 +38,6 @@
 		{ recid: 43, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
 		{ recid: 44, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
 		{ recid: 45, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
-		{ recid: 46, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809', summary: true }
+		{ recid: 46, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' }
 	]
 }
diff --git a/demos/examples/grid-1.html b/demos/examples/grid-1.html
@@ -25,7 +25,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
 	url: 'data/list.json',
 	columns: [				
 		{ field: 'fname', caption: 'First Name', size: '30%' },
@@ -66,7 +65,6 @@ <h2>JSON: data/list.json.js</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
 		url: 'data/list.json',
 		columns: [				
 			{ field: 'fname', caption: 'First Name', size: '30%' },

diff --git a/demos/examples/grid-13.html b/demos/examples/grid-13.html
@@ -21,8 +21,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
-	multiSearch: false,
 	searches: [				
 		{ field: 'lname', caption: 'Last Name', type: 'text' },
 		{ field: 'fname', caption: 'First Name', type: 'text' },
@@ -77,8 +75,6 @@ <h2>JavaScript</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
-		multiSearch: false,
 		searches: [				
 			{ field: 'lname', caption: 'Last Name', type: 'text' },
 			{ field: 'fname', caption: 'First Name', type: 'text' },

diff --git a/demos/examples/grid-14.html b/demos/examples/grid-14.html
@@ -22,8 +22,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
-	multiSearch: false,
 	searches: [				
 		{ field: 'lname', caption: 'Last Name', type: 'text' },
 		{ field: 'fname', caption: 'First Name', type: 'text' },
@@ -81,8 +79,6 @@ <h2>JavaScript</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
-		multiSearch: false,
 		searches: [				
 			{ field: 'lname', caption: 'Last Name', type: 'text' },
 			{ field: 'fname', caption: 'First Name', type: 'text' },

diff --git a/demos/examples/grid-15.html b/demos/examples/grid-15.html
@@ -22,7 +22,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
 	show: { 
 		toolbar: true,
 		footer: true 
@@ -74,7 +73,6 @@ <h2>JavaScript</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
 		show: { 
 			toolbar: true,
 			footer: true 

diff --git a/demos/examples/grid-16.html b/demos/examples/grid-16.html
@@ -31,7 +31,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
 	show: { 
 		toolbar: true,
 		footer: true
@@ -85,7 +84,6 @@ <h2>JavaScript</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
 		show: { 
 			toolbar: true,
 			footer: true

diff --git a/demos/examples/grid-17.html b/demos/examples/grid-17.html
@@ -22,7 +22,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
 	show: { 
 		toolbar: true,
 		footer: true,
@@ -82,7 +81,6 @@ <h2>JavaScript</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
 		show: { 
 			toolbar: true,
 			footer: true,

diff --git a/demos/examples/grid-20.html b/demos/examples/grid-20.html
@@ -7,8 +7,8 @@ <h1>Render to a New Box</h1>
 	</div>
 
 	<div id="example_view">
-		<div id="grid1" style="width: 49%; float: left; height: 300px; border: 2px solid green; padding: 4px;"></div>
-		<div id="grid2" style="width: 49%; margin-left: 50%; height: 300px; border: 2px solid red; padding: 4px;"></div>
+		<div id="grid1" style="width: 49%; float: left; height: 300px; border: 2px solid green;"></div>
+		<div id="grid2" style="width: 49%; margin-left: 50%; height: 300px; border: 2px solid red;"></div>
 		<br>
 		<input type="button" value="Render into Green Box" onclick="$('#grid1').w2render('grid');">
 		<input type="button" value="Render into Red Box" onclick="$('#grid2').w2render('grid');">
@@ -17,8 +17,8 @@ <h1>Render to a New Box</h1>
 	<div id="example_html">
 		<h2>HTML</h2>
 		<textarea class="preview">
-<div id="grid1" style="width: 49%; float: left; height: 300px; border: 2px solid green; padding: 4px;"></div>
-<div id="grid2" style="width: 49%; margin-left: 50%; height: 300px; border: 2px solid red; padding: 4px;"></div>
+<div id="grid1" style="width: 49%; float: left; height: 300px; border: 2px solid green;"></div>
+<div id="grid2" style="width: 49%; margin-left: 50%; height: 300px; border: 2px solid red;"></div>
 <br>
 <input type="button" value="Render into Green Box" onclick="$('#grid1').w2render('grid');">
 <input type="button" value="Render into Red Box" onclick="$('#grid2').w2render('grid');">

diff --git a/demos/examples/grid-21.html b/demos/examples/grid-21.html
@@ -25,7 +25,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
 	show: { 
 		toolbar: true,
 		footer: true,
@@ -36,9 +35,9 @@ <h2>JavaScript</h2>
 		{ field: 'fname', caption: 'First Name', size: '30%', sortable: true, editable: { type: 'text', inTag: 'maxlength=30' } },
 		{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true, editable: { type: 'text' } },
 		{ field: 'age', caption: 'Age', size: '70px', style: 'text-align: center', editable: { type: 'int', style: 'text-align: center' } },
-		{ field: 'sex', caption: 'Sex', size: '70px', editable: { type: 'list', items: ['Male', 'Female'] } },
+		{ field: 'sex', caption: 'Sex', size: '70px', editable: { type: 'text', inTag: "maxlength=1", style: 'text-align: center' } },
 		{ field: 'dbo', caption: 'DOB', size: '120px', editable: { type: 'date' } },
-		{ field: 'email', caption: 'Email', size: '40%', editable: { type: 'email' } },
+		{ field: 'email', caption: 'Email', size: '40%', editable: { type: 'text' } },
 	],
 	records: [
 		{ recid: 1, fname: 'John', lname: 'doe', email: '[email protected]', sdate: '4/3/2012' },
@@ -65,20 +64,19 @@ <h2>JavaScript</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
 		show: { 
 			toolbar: true,
 			footer: true,
 			toolbarSave: true
 		},
 		columns: [				
 			{ field: 'recid', caption: 'ID', size: '50px', sortable: true },
-			{ field: 'fname', caption: 'First Name', size: '30%', sortable: true, editable: { type: 'text', inTag: 'maxlength=30' } },
-			{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true, editable: { type: 'text' } },
-			{ field: 'age', caption: 'Age', size: '70px', style: 'text-align: center', editable: { type: 'int', style: 'text-align: center' } },
-			{ field: 'sex', caption: 'Sex', size: '70px', editable: { type: 'list', items: ['Male', 'Female'] } },
-			{ field: 'dbo', caption: 'DOB', size: '120px', editable: { type: 'date' } },
-			{ field: 'email', caption: 'Email', size: '40%', editable: { type: 'email' } },
+			{ field: 'fname', caption: 'First Name', size: '30%', sortable: true, editable: { type: 'text', inTag: 'maxlength=30' }, resizable: true },
+			{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true, editable: { type: 'text' }, resizable: true },
+			{ field: 'age', caption: 'Age', size: '70px', style: 'text-align: center', editable: { type: 'int', style: 'text-align: center' }, resizable: true },
+			{ field: 'sex', caption: 'Sex', size: '70px', editable: { type: 'text', inTag: "maxlength=1", style: 'text-align: center' }, resizable: true },
+			{ field: 'dbo', caption: 'DOB', size: '120px', editable: { type: 'date' }, resizable: true },
+			{ field: 'email', caption: 'Email', size: '40%', editable: { type: 'text' }, resizable: true },
 		],
 		records: [
 			{ recid: 1, fname: 'John', lname: 'doe', email: '[email protected]', sdate: '4/3/2012' },

diff --git a/demos/examples/grid-4.html b/demos/examples/grid-4.html
@@ -27,7 +27,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
 	show: { footer: true },
 	recordsPerPage: 8,
 	searches: [				
@@ -76,7 +75,6 @@ <h2>JavaScript</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
 		show: { footer: true },
 		recordsPerPage: 8,
 		searches: [				

diff --git a/demos/examples/grid-5.html b/demos/examples/grid-5.html
@@ -23,7 +23,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
 	recordsPerPage: 8,
 	show: { footer: true },
 	columns: [				
@@ -94,7 +93,6 @@ <h2>JSON: data/list2.json.js</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
 		recordsPerPage: 8,
 		show: { footer: true },
 		columns: [				

diff --git a/demos/examples/grid-6.html b/demos/examples/grid-6.html
@@ -32,7 +32,6 @@ <h2>JavaScript</h2>
 		<textarea class="preview">
 $('#grid').w2grid({ 
 	name: 'grid', 
-	header: 'List of Names',
 	show: { selectColumn: true },
 	multiSelect: false,
 	columns: [				
@@ -65,7 +64,6 @@ <h2>JavaScript</h2>
 
 	$('#grid').w2grid({ 
 		name: 'grid', 
-		header: 'List of Names',
 		show: { selectColumn: true },
 		multiSelect: false,
 		columns: [				

diff --git a/demos/examples/grid-7.html b/demos/examples/grid-7.html
@@ -92,7 +92,7 @@ <h2>JavaScript</h2>
 		],
 		onExpand: function (target, eventData) {
 			if (w2ui.hasOwnProperty('subgrid-' + eventData.recid)) w2ui['subgrid-' + eventData.recid].destroy();
-			$('#'+ eventData.box_id).css({ padding: '3px', width: '520px', height: '200px' }).w2grid({
+			$('#'+ eventData.box_id).css({ margin: '3px', width: '520px', height: '200px' }).w2grid({
 				name: 'subgrid-' + eventData.recid, 
 				fixedBody: true,
 				columns: [				

diff --git a/demos/examples/grid-8.html b/demos/examples/grid-8.html
@@ -1,17 +1,17 @@
 <div class="content">
 
 	<div id="example_title">
-		<h1>Sub Grids</h1>
+		<h1>Show/Hide Columns</h1>
 		If you need to show or hide column, you can do it on the fly without any problems. Just remember to refresh the grid.
 	</div>
 
 	<div id="example_view">
 		<div id="grid" style="width: 100%; height: 300px;"></div>
 		<br>
 		<input type="button" value="Toggle First Column" 
-			onclick="w2ui['grid'].columns[0].hidden = !w2ui['grid'].columns[0].hidden; w2ui['grid'].refresh();">
+			onclick="if (w2ui['grid'].getColumn('lname').hidden) w2ui['grid'].showColumn('lname'); else w2ui['grid'].hideColumn('lname');">
 		<input type="button" value="Toggle Last Column" 
-			onclick="w2ui['grid'].columns[3].hidden = !w2ui['grid'].columns[3].hidden; w2ui['grid'].refresh();">
+			onclick="if (w2ui['grid'].getColumn('sdate').hidden) w2ui['grid'].showColumn('sdate'); else w2ui['grid'].hideColumn('sdate');">
 	</div>
 
 	<div id="example_html">
@@ -20,9 +20,9 @@ <h2>HTML</h2>
 <div id="grid" style="width: 100%; height: 300px;"></div>
 <br>
 <input type="button" value="Toggle First Column" 
-	onclick="w2ui['grid'].columns[0].hidden = !w2ui['grid'].columns[0].hidden; w2ui['grid'].refresh();">
+	onclick="if (w2ui['grid'].getColumn('lname').hidden) w2ui['grid'].showColumn('lname'); else w2ui['grid'].hideColumn('lname');">
 <input type="button" value="Toggle Last Column" 
-	onclick="w2ui['grid'].columns[3].hidden = !w2ui['grid'].columns[3].hidden; w2ui['grid'].refresh();">
+	onclick="if (w2ui['grid'].getColumn('sdate').hidden) w2ui['grid'].showColumn('sdate'); else w2ui['grid'].hideColumn('sdate');">
 		</textarea>
 	</div>
 

diff --git a/demos/examples/layout-1.html b/demos/examples/layout-1.html
@@ -22,7 +22,7 @@ <h2>HTML</h2>
 	<div id="example_js">
 		<h2>JavaScript</h2>
 		<textarea class="preview">
-var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
+var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
 $('#layout').w2layout({
 	name: 'layout',
 	panels: [
@@ -39,7 +39,7 @@ <h2>JavaScript</h2>
 $(document).ready(function () {
 	$().w2destroy('layout'); // destroy if it was previously created
 
-	var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
+	var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
 	$('#layout').w2layout({
 		name: 'layout',
 		panels: [

diff --git a/demos/examples/layout-2.html b/demos/examples/layout-2.html
@@ -20,7 +20,7 @@ <h2>HTML</h2>
 	<div id="example_js">
 		<h2>JavaScript</h2>
 		<textarea class="preview">
-var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
+var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
 $('#layout').w2layout({
 	name: 'layout',
 	panels: [
@@ -38,7 +38,7 @@ <h2>JavaScript</h2>
 $(document).ready(function () {
 	$().w2destroy('layout');
 
-	var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
+	var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
 	$('#layout').w2layout({
 		name: 'layout',
 		panels: [

diff --git a/demos/examples/layout-3.html b/demos/examples/layout-3.html
@@ -35,7 +35,7 @@ <h2>HTML</h2>
 	<div id="example_js">
 		<h2>JavaScript</h2>
 		<textarea class="preview">
-var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
+var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
 $('#layout').w2layout({
 	name: 'layout',
 	panels: [
@@ -54,7 +54,7 @@ <h2>JavaScript</h2>
 <script>
 $(document).ready(function () {	
 	$().w2destroy('layout');	
-	var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
+	var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
 	$('#layout').w2layout({
 		name: 'layout',
 		panels: [

diff --git a/demos/examples/layout-4.html b/demos/examples/layout-4.html
@@ -49,7 +49,7 @@ <h2>HTML</h2>
 	<div id="example_js">
 		<h2>JavaScript</h2>
 		<textarea class="preview">
-var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;'
+var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;'
 $('#layout').w2layout({
 	name: 'layout',
 	panels: [
@@ -66,7 +66,7 @@ <h2>JavaScript</h2>
 $(document).ready(function () {
 	$().w2destroy('layout');
 
-	var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;'
+	var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;'
 	$('#layout').w2layout({
 		name: 'layout',
 		panels: [

diff --git a/demos/examples/layout-5.html b/demos/examples/layout-5.html
@@ -48,7 +48,7 @@ <h2>HTML</h2>
 	<div id="example_js">
 		<h2>JavaScript</h2>
 		<textarea class="preview">
-var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;'
+var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;'
 $('#layout').w2layout({
 	name: 'layout',
 	panels: [
@@ -65,7 +65,7 @@ <h2>JavaScript</h2>
 $(document).ready(function () {
 	$().w2destroy('layout');
 
-	var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;'
+	var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;'
 	$('#layout').w2layout({
 		name: 'layout',
 		panels: [

diff --git a/demos/examples/layout-6.html b/demos/examples/layout-6.html
@@ -44,7 +44,7 @@ <h2>HTML</h2>
 	<div id="example_js">
 		<h2>JavaScript</h2>
 		<textarea class="preview">
-var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
+var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
 $('#layout').w2layout({
 	name: 'layout',
 	panels: [
@@ -70,7 +70,7 @@ <h2>JavaScript</h2>
 $(document).ready(function () {
 	$().w2destroy('layout');
 
-	var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
+	var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
 	$('#layout').w2layout({
 		name: 'layout',
 		panels: [