calling datagrid refreshRow on expanded row causes row to disappear

[jpierce]

When refreshRow is called on an exanded master-detail grid row, the row content disappears. To reproduce, go to http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem= and click on the Master Detail grid.  Expand the first item, then enter the following in the javascript console:

Code:

$('#dg').datagrid('refreshRow', 0);

[stworthy]

Because the detail contents are loaded via AJAX, calling 'refreshRow' method can not restore its original contents. To solve this issue, the user must load the detail content manually after calling 'refreshRow' method.

Code:

$('#dg').datagrid('refreshRow',0);
$('#ddv-0').panel({...});

[jpierce]

Thanks.  But upon refreshRow, couldn't you have all expanded rows call onExpandRow again?

[stworthy]

The 'refreshRow' method only do update the row content including the detail native content. It can't trigger 'onExpandRow' event. If you want, try the code below to expand a row manually, it will auto expand a row and update its ajax content.

Code:

$('#dg').datagrid('refreshRow',0).datagrid('collapseRow',0).datagrid('expandRow',0);

[jpierce]

Well, you'd certainly know more about it than me, so what I'm doing may have some bad side-effects.  But this seems effective:

Code:

var detailview2 = $.extend({}, detailview, {
    updateRow:function (target, rowIndex, row) {
        var dc = $.data(target, 'datagrid').dc;
        var opts = $.data(target, 'datagrid').options;
        var cls = $(target).datagrid('getExpander', rowIndex).attr('class');
        $.fn.datagrid.defaults.view.updateRow.call(this, target, rowIndex, row);
        $(target).datagrid('getExpander', rowIndex).attr('class', cls);

        // update the detail content
        if (this.canUpdateDetail) {
            var row = $(target).datagrid('getRows')[rowIndex];
            var detail = $(target).datagrid('getRowDetail', rowIndex);
            detail.html(opts.detailFormatter.call(target, rowIndex, row));

            if (opts.onExpandRow) {
                opts.onExpandRow.call(this, rowIndex, row);
            }
        }
    }
});

Is there something wrong with this that I'm not noticing?

[stworthy]

Please try this.

Code:

var detailview2 = $.extend({}, detailview, {
	updateRow:function (target, rowIndex, row) {
		var opts = $(target).datagrid('options');
		detailview.updateRow.call(this, target, rowIndex, row);
		var expander = $(target).datagrid('getExpander', rowIndex);
		if (this.canUpdateDetail && expander.hasClass('datagrid-row-collapse')) {
			if (opts.onExpandRow) {
				var row = $(target).datagrid('getRows')[rowIndex];
				opts.onExpandRow.call(this, rowIndex, row);
			}
		}
	}
});

[jpierce]

Thanks.  That's basically the same code as mine, just with some of the redundant stuff taken out, right?

Is there any reason this shouldn't be part of the core?  I'm still not sure if I understand why you earler said it couldn't/shouldn't be.