Grid Editing: Modify grid template usage to store each item via data-method. Pave the way to upgrade to jsrender (no tmplItem method). Some minor cleanup, too.

Author: jzaefferer

grid-editing/editor.js

@@ -27,7 +27,7 @@ $.widget( "ui.editor", {
 			this.input = this.input.spinner();
 			this.inputWrapper = this.input.spinner("widget");
 		}
-		this.inputWrapper.hide().appendTo( this.element )
+		this.inputWrapper.hide().appendTo( this.element );
 
 		this._bind( this.inputWrapper, {
 			focusin: function() {

grid-editing/grid.html

@@ -50,11 +50,9 @@
 			},
 			objectchange: function(event, ui) {
 				console.log("developer at index", ui.index, "changed", ui.object);
-				this.save().refresh();
 			},
 			change: function(event, ui) {
 				console.log("developer(s) at index", ui.index, ui.change + "ed", ui.items);
-				this.save().refresh();
 			}
 		});
 		developers.save = function() {
@@ -73,7 +71,7 @@
 				return grid.element.find( "th" ).eq( cell[ 0 ].cellIndex ).data( "type" );
 			},
 			submit: function( event, ui) {
-				var object = ui.item.tmplItem().data,
+				var object = ui.item.closest("tr").data( "grid-item" ),
 					field = grid.element.find( "th" ).eq( ui.item[ 0 ].cellIndex ).data( "field" ),
 					oldValue = get(object, field);
 				set(object, field, ui.value);
@@ -82,37 +80,39 @@
 					oldValue: oldValue,
 					newValue: ui.value
 				});
+				developers.save();
 				// for the navigator
 				grid.element.focus();
 			}
 		});
 		grid.element.navigator();
 
-		var developer, tmplItem;
+		var developer;
 		var editForm = $( "#editForm" ).hide().submit( function( event ) {
 			event.preventDefault();
 			serializeForm( this, developer );
 			developers._trigger("objectchange", event, {
 				index: localDevelopers.indexOf(developer),
 				object: developer
 			});
+			developers.save().refresh();
 			editForm.hide();
 		});
 		grid.element.delegate( "button.edit", "click", function() {
-			tmplItem = $( this ).tmplItem();
-			developer = tmplItem.data;
+			developer = $( this ).closest("tr").data( "grid-item" );
 			$( "#edit-tmpl" ).tmpl( meta(developer) ).appendTo( editForm.find("fieldset").empty() );
 			editForm.show();
 		});
 		grid.element.delegate( "button.remove", "click", function() {
-			var developer = $( this ).tmplItem().data;
+			var developer = $( this ).closest("tr").data( "grid-item" );
 			var index = localDevelopers.indexOf( developer );
 			localDevelopers.splice( index, 1 );
 			developers._trigger("change", event, {
 				change: "remove",
 				index: index,
 				items: [ developer ]
 			});
+			developers.save().refresh();
 		});
 
 		$( "#pageDevelopers" ).pager({
@@ -135,6 +135,7 @@
 				index: 0,
 				items: [localDevelopers[0]]
 			});
+			developers.save().refresh();
 		});
 
 		$("form").tooltip();

grid-spf/grid.html

@@ -86,7 +86,10 @@
 
 		$( "#developers-local" ).grid({
 			columns: [ "firstName", "lastName", "country" ],
-			source: developers
+			source: developers,
+			select: function( event, ui ) {
+				console.log( "Selected " + ui.item.firstName );
+			}
 		});
 
 		$( "#filterDevelopers" ).filterControl( developers );

grid-spf/grid.js

@@ -23,7 +23,7 @@ $.widget( "ui.grid", {
 		this.element.find( "th" ).addClass( "ui-widget-header" );
 		this.element.delegate( "tbody > tr", "click", function( event ) {
 			that._trigger( "select", event, {
-				// TODO add item
+				item: $( this ).data( "grid-item" )
 			});
 		});
 		$(this.options.source.element).bind("datasourceresponse", function() {
@@ -32,19 +32,21 @@ $.widget( "ui.grid", {
 	},
 	refresh: function() {
 		// TODO this code assumes a single tbody which is not a safe assumption
-		var tbody = this.element.find( "tbody" ).empty();
-		// TODO how to refresh a single row? -> tmplItem().update()
-		$.tmpl( this.options.rowTemplate, this.options.source.toArray() ).appendTo( tbody );
+		var tbody = this.element.find( "tbody" ).empty(),
+			template = this.options.rowTemplate;
+		$.each( this.options.source.toArray(), function( itemId, item ) {
+			$.tmpl( template, item ).data( "grid-item", item ).appendTo( tbody );
+		});
 		this._trigger("refresh");
 	},
 
 	_columns: function() {
 		if ( this.options.columns ) {
 			var head = this.element.find("thead");
-			if ( !thead.find( "th" ).length ) {
+			if ( !head.find( "th" ).length ) {
 				// TODO improve this
 				$.each( this.options.columns, function(index, column) {
-					$("<th>").attr("data-field", column).text(column).appendTo(head)
+					$("<th>").attr("data-field", column).text(column).appendTo(head);
 				});
 			}
 			return;