bug dataTable with rowExpansion

[bueyuekt]

Hi,

I think the rowExpansion button has a bug.
If you click fast multiple times on the button (start expansion), it will duplicate the expanded row multiple times.
As long as the ajax request ist running, the blocks are duplicated!

U can reproduce this also on the showcase.

[bueyuekt]

Well, i found a pretty easy solution. The Problem is the time between a click and inserting the expanded row.
If you click to fast, the row is not existing on the second click and you got a false state in your table.

So, after some debuging, i edited 3.0.M1\primefaces-3.0.M1.jar\META-INF\resources\primefaces\datatable\datatable.js:

There I added a global variable to hold the expansion state. I wanted to have the array in the PrimeFaces.widget.DataTable function,
but i did not know how to get access in internal functions.

Now i needed to extend the toggle Funktion PrimeFaces.widget.DataTable.prototype.toggleExpansion = function(b).
I check the global array, if toggle (expand row) is already called for this row. As long expansion is going on (ajax and so on),
the function does nothing. Here my code:

Code: Select all

var dataTableRowExpanding = new Array();

PrimeFaces.widget.DataTable.prototype.toggleExpansion = function(b) {

	var d = $(b), c = d.parent().parent(), a = c.hasClass("ui-expanded-row");

	var parentId = c.attr("id");

	if(typeof(dataTableRowExpanding[parentId]) == 'undefined' || dataTableRowExpanding[parentId] == null) {
		dataTableRowExpanding[parentId] = false;
	}

	if(dataTableRowExpanding[parentId] == false) {
		if (a) {
			d.removeClass("ui-icon-circle-triangle-s");
			c.removeClass("ui-expanded-row");
			c.next().fadeOut(function() {
				$(this).remove()
			})
		} else {
			dataTableRowExpanding[parentId] = true;
			d.addClass("ui-icon-circle-triangle-s");
			c.addClass("ui-expanded-row");
			this.loadExpandedRowContent(c);
		}
	}
};

Now we just have to reset the expanding holder after ajax is finished. For that, we have to extend
PrimeFaces.widget.DataTable.prototype.loadExpandedRowContent = function(e)

There we have a internal function definition for onsuccess. Here we just have to reset in the global array:

Code: Select all

PrimeFaces.widget.DataTable.prototype.loadExpandedRowContent = function(e) {
	if (this.cfg.onExpandStart) {
		this.cfg.onExpandStart.call(this, e)
	}
	var b = {
		source : this.id,
		process : this.id,
		update : this.id,
		formId : this.cfg.formId
	}, c = e.attr("id").split("_row_")[1], a = this;
	b.onsuccess = function(k) {
		dataTableRowExpanding[e.attr("id")] = false;
		var h = k.documentElement, j = h.getElementsByTagName("update");
		for ( var f = 0; f < j.length; f++) {
			var l = j[f].attributes.getNamedItem("id").nodeValue, g = j[f].firstChild.data;
			if (l == a.id) {
				e.after(g);
				e.next().fadeIn()
			} else {
				PrimeFaces.ajax.AjaxUtils.updateElement(l, g)
			}
		}
		return false
	};
	var d = {};
	d[this.id + "_rowExpansion"] = true;
	d[this.id + "_expandedRowId"] = c;
	b.params = d;
	PrimeFaces.ajax.AjaxRequest(b)
};

Now multiple clicks do only add one row.

[Alex]

i am facing the same problem, thanks for your code, ill give it a try..

@Cagatay: maybe a fix can be done in the current release?

[cagatay.civici]

Issue should be fixed now.