Editing Items

ExoWeb makes edit forms for your model classes really easy.

Here again we're using a jQuery UI dialog to show the edit form.  The dialog is shown when the user clicks on a card.

Building the edit form itself is as simple as listing the fields to edit.  ExoWeb can handle what controls to display based on property type and other metadata.

<div class="sys-template board-list-edititem-dialog" sys:attach="dataview" width="400">
         <div class="dialog-content">
                 <div sys:attach="content" content:template="form" content:data="{@@ Description }"></div>
                 <div sys:attach="content" content:template="form" content:data="{@@ DueDate }"></div>
                 <div sys:attach="content" content:template="form" content:data="{@@ Priority }"></div>
         </div>
         <div class="dialog-footer">
                 <input type="button" sys:command="ok" onclick="return false;" value="Ok" />
                 <input type="button" sys:command="cancel" onclick="return false;" value="Cancel" />
         </div>
</div>

You may notice that the edit dialog doesn't exactly match what you see above.  Specifically, there are no options for priority.  We'll talk more in-depth about the magic that makes this work in the next step when we cover data annotations.


  1. Insert the following code snippet into Views\Shared\_Layout.cshtml, below the Script references section:
    				<script type="text/javascript">
    					$exoweb({
    						init: function () {
    							ExoWeb.UI.Template.load('@Url.Content("~/scripts/exoweb-templates.htm")');
    						}
    					});
    
    					$(function () {
    						function createDatePicker() {
    							$(this).datepicker({
    								minDate: new Date('1/1/0001'),
    								maxDate: new Date('12/31/9999'),
    								yearRange: '-110:+50',
    								duration: 0,
    								dateFormat: 'm/d/yy',
    								showOn: 'button',
    								changeYear: true,
    								changeMonth: true,
    								onSelect: function (val, control) {
    									// jquery trigger doesn't seem to raise the event
    									// properly, so raise it here
    									var el = $(this).get(0);
    									if (el.dispatchEvent) {
    										var evt = document.createEvent("MutationEvents");
    										evt.initEvent("change", false, true);
    										el.dispatchEvent(evt);
    									}
    									else if (el.fireEvent) { el.fireEvent("onchange"); }
    								}
    							});
    						}
    
    						$("input.datepicker:bound").ever(createDatePicker);
    					});
    				</script>
    				
  2. Create the javascript file board-list-edititem.js under scripts
  3. Insert the following snippet into scripts/board-list-edititem.js:
    				$(document.documentElement).on("click", ".board-list-item", function() {
    					// Disable save on the item being edited
    					var item = $parentContextData(this, null, null, ListItem);
    					context.server.disableSave(item);
    
    					var checkpoint = context.server._changeLog.checkpoint();
    
    					var $dialog = $(".board-list-edititem-dialog");
    
    					$dialog.dialog({
    						autoOpen: false,
    						modal: true,
    						title: "Edit Item",
    						width: $dialog.attr("width") ? parseInt($dialog.attr("width")) : undefined,
    						height: $dialog.attr("height") ? parseInt($dialog.attr("height")) : undefined,
    						closeOnEscape: false,
    						open: function(event, ui) {
    							// Disable close button
    							$(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide();
    						}
    					});
    
    					// Set up commands to respond to button clicks
    					$dialog.dialogCommands({
    						ok: function() {
    							context.server.enableSave(item);
    						},
    						cancel: function() {
    							context.server.rollback(checkpoint, function() {
    								context.server.enableSave(item);
    							});
    						}
    					});
    
    					// Apply data to the dataview
    					$dialog.control("data", item);
    
    					// Open the dialog
    					$dialog.dialog("open");
    				});
    				
  4. Append the following code snippet in Views\Home\Index.cshtml under the list of script references:
    				<script src="@Url.Content("~/scripts/board-list-edititem.js")"></script>
    				
  5. Append the following code snippet at the end of Views\Home\Index.cshtml after the main board markup:
    @*
    Dialog for editing a list item
    *@
    
    <div class="sys-template board-list-edititem-dialog" sys:attach="dataview" width="400">
    	<div class="dialog-content">
    		<div sys:attach="content" content:template="form" content:data="{@@ Description }"></div>
    		<div sys:attach="content" content:template="form" content:data="{@@ DueDate }"></div>
    		<div sys:attach="content" content:template="form" content:data="{@@ Priority }"></div>
    	</div>
    	<div class="dialog-footer">
    		<input type="button" sys:command="ok" onclick="return false;" value="Ok" />
    		<input type="button" sys:command="cancel" onclick="return false;" value="Cancel" />
    	</div>
    </div>