Finally found a solution that actually works.

This line deletes the entire datagrid so if it is supposed to be empty it will actually empty out.  A bit overkill but it does actually work.

Code:

$('#dg').datagrid('loadData',[]);

This line is the one I've been looking for.  It will also do the same to empty out the footer.  Also a bit overkill but again it does actually work.

Code:

$('#dg').datagrid('reloadFooter',[]);

Okay, so the empty JSON return has to be more than just [].

See example for what I was doing.

The third case was the one that I am currently doing.  I'll switch it over to the 4th case as that seems to work correctly.

http://jsfiddle.net/DA3kU/8/

Code:

//case 3
var data3 = [];
//case 4
var data4 = {total:0,rows:[],footer:[]};

update:  Nope.  Not working right.  Darn it.

I'm trying to add the code to another case but the deletion function isn't working right.

Code:

$('btn5').click(function(){
	var row = $('#dg').datagrid('getSelected');
	var index = $('#dg').datagrid('getRowIndex',row);
	$('#dg').datagrid('deleteRow',index)	
});

See example http://jsfiddle.net/DA3kU/11/

Is there a way to build out a Tree with a folder structure?  I have a website that needs to be able to browse subpaths of a folder tree (within the website) and I need to save that path for use in another part of the website.  (IE/ Please select project path you want to download files from.)  I was able to get some of the folder information to show up in json (with proper recursion) but the json from that tutorial was vastly different then the structure that Tree needs, specifically with the leaf nodes of the tree - Not marked, and no way to check for them so that the extra json node information could be added.

I've tested it and from every angle it looks like the json returned is in fact [] which should empty out the datagrid but the footer rows are not updating correctly when an empty dataset is returned.  Yet, when there is no footer (on page load with empty dataset) it hides the footer rows correctly.

I basically used the code directly from the CRUD datagrid with row editing capabilities and footer rows turned on. 

Ahh, but as I said in my post, the json returns [] which is an empty json if that last line has been deleted.  Still it doesn't delete correctly. 

Could it be my reload is called too early?  Or is the return value of [] invalid?

Or is it something deeper?

I've got a complicated datagrid based upon the edit grid.  The data loads from json via a database and shows up on the page.  When the json returns an empty value on page load '[]' it shows up correctly as the datagrid with no footer rows.  However if I add a record and then delete one, not only does the footer rows remain visible but also does not update its value.

I'm trying to get the datagrid to do one of the following:
reload the datagrid correctly and show properly
give me a count of the rows in the datagrid so I can find out if it is zero and kick the user over to a different page.

Code:

function destroyItem(){
	var row = $('#dg').datagrid('getSelected');
	if (row){
		$.messager.confirm('Confirm','Are you sure you want to remove this row?',function(r){
			if (r){
				var index = $('#dg').datagrid('getRowIndex',row);
				jqab = $.post('destroy_row.php',{idhz_timesheets:row.idhz_timesheets},function(){
					$('#dg').datagrid('deleteRow',index);
				});
				jqab.always(function(){
					getHours($('#userid').val());
				});
			}
                           //This is the line that is misbehaving.
			$('#dg').datagrid('reload'); 
		});
		
	}
	
}

Here's the json that is returned from the datagrid load with 1 record.  It will load [] if it is empty.

Code:

{"total":1,"rows":[{"idhz_timesheets":"211","user":"Test User","joblevel":"Foreman","isForeman":"1","isJourneyman":"0","isApprentice":"0","taskcode":"0100-Site","hours":"7.00","date":"2014-05-01","comments":"7"}],"footer":[ {},{"taskcode":"Foreman Hours :","hours":"7.00"},{"taskcode":"Journeyman Hours:","hours":"0.00"},{"taskcode":"Apprentice Hours :","hours":"0.00"},{"taskcode":"Total Hours :","hours":"7.00"}]}

So I'm using the expand row form within the datagrid, however I've run into a design flaw in the demo/tutorial and I can't find good documentation on this issue.  The problem is thus.  First of all I wanted the datagrid to continue to expand and have no maximum length as this causes a double scroll bar in mobile devices.  However because that is turned off the expand row view form is really really small and very difficult to use when there is 1-2 records in the datagrid.  It gets subsequently better and the datagrid gets overall larger.  But the problem is still there when the total rows become "less optimum" for this feature.

Is there a fix for this issue?

The code from this page datagrid-detailview.js is the culprit.

Code:

$.extend($.fn.datagrid.methods, {
	fixDetailRowHeight: function(jq, index){
		return jq.each(function(){
			var opts = $.data(this, 'datagrid').options;
			if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
				return;
			}
			var dc = $.data(this, 'datagrid').dc;
			var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
			var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
			// fix the detail row height
			if (tr2.is(':visible')){
				tr1.css('height', '');
				tr2.css('height', '');
/*

THIS IS THE CULPRIT LINE IN THE CODE THAT SEEMS TO BE THE START OF THE ISSUES.

If I set this code height to be larger the 'opening' to edit the data is bigger, but there is some sort of centring of the fields within that 
opening which is turned on, which I still have to scroll to use the fields within.


*/
				// var height = Math.max(tr1.height(), tr2.height());  //Original code
				var height = Math.max(tr1.height(), tr2.height()) + 100;  //My testing modification code - less than optimal.
				tr1.css('height', height);
				tr2.css('height', height);
			}
			dc.body2.triggerHandler('scroll');
		});
	},
	getExpander: function(jq, index){	// get row expander object
		var opts = $.data(jq[0], 'datagrid').options;
		return opts.finder.getTr(jq[0], index).find('span.datagrid-row-expander');
	},
	// get row detail container
	getRowDetail: function(jq, index){
		var opts = $.data(jq[0], 'datagrid').options;
		var tr = opts.finder.getTr(jq[0], index, 'body', 2);
		return tr.next().find('div.datagrid-row-detail');
	},
	expandRow: function(jq, index){
		return jq.each(function(){
			var opts = $(this).datagrid('options');
			var dc = $.data(this, 'datagrid').dc;
			var expander = $(this).datagrid('getExpander', index);
			if (expander.hasClass('datagrid-row-expand')){
				expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse');
				var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
				var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
				tr1.show();
				tr2.show();
				$(this).datagrid('fixDetailRowHeight', index);
				if (opts.onExpandRow){
					var row = $(this).datagrid('getRows')[index];
					opts.onExpandRow.call(this, index, row);
				}
			}
		});
	},
	collapseRow: function(jq, index){
		return jq.each(function(){
			var opts = $(this).datagrid('options');
			var dc = $.data(this, 'datagrid').dc;
			var expander = $(this).datagrid('getExpander', index);
			if (expander.hasClass('datagrid-row-collapse')){
				expander.removeClass('datagrid-row-collapse').addClass('datagrid-row-expand');
				var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
				var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
				tr1.hide();
				tr2.hide();
				dc.body2.triggerHandler('scroll');
				if (opts.onCollapseRow){
					var row = $(this).datagrid('getRows')[index];
					opts.onCollapseRow.call(this, index, row);
				}
			}
		});
	}
});

Well no matter it is a minor issue anyway.  I've just decided to use the second command and run it for each option as they come up.

To clear a form fields, please call 'clear' method instead.

Code:

$('#ff').form('clear');

Can I still specify which fields to ignore and still call this command? For example clearing all fields except hidden ones.  I know if I have to I can just call multiple times the other codefield, but I like the ability to select partials to keep the code footprint smaller.

I'm writing a tool application where people fill in forms for Purchase orders and timesheets.  My forms all work via the ajax calls and using jquery exclusively from the documentation and tutorials.  My problem is however when someone clicks in a number field in the PO after the form was posted once, it automatically autocompletes that number field when autocomplete makes no logical sense there.  Is there a way to turn this off?  I've already tried autocomplete="off" in the input html which didn't work and I tried some javascript that was supposed to do the same, also to no avail.  (http://css-tricks.com/snippets/html/autocomplete-off/)  This tag for inputs is supposedly HTML5 standard but both Chrome and IE seem to be ignoring it.

Code:

<html>
    <head>
    <meta charset="UTF-8">
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="pragma" content="cache" />		
    <title>Edit Project</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    </head>
    <body>
<form id="ff" method="post" autocompete="off" >
Quantity:
    <input class="easyui-numberbox"  type="edit"  name="quantity" value="" style="width:145px;"  data-options="min:0,precision:2" id="quantity" autocomplete="off"/>
</form>
 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
<script>
 function submitForm(){
		
		var url = 'tested.php';
		jqxhr = $.ajax({
				type: "POST", 
				dataType: "json",
				url : url,
				data: $("#ff").serialize()
		});
	
	jqxhr.always(function(){
		$('#dg').datagrid('reload'); 
		$(':input','#ff')
		.not(':button, :submit, :reset, :hidden')
		.val('');
	});
 }
</script>
</body>
</html>