Datagrid: Can't scroll columns when there are no rows

[phunksta]

Hi,

This issue seems very similar in description to
this one.

I have a datagrid, with frozen columns, scrollview and filter row extensions.

The user makes a filter condition that returns zero rows. The horizontal scrollbar disappears, so they can no longer access filter controls to 'undo' their previous filter action.

The solution offered in the thread above seems to tinker with the 'view', where I already have scrollview plugin.
It seems based around having at least 1 row in the table, even if a fake one. Is it somehow possible to let overflow in the column headers also affect the scroll?

Thanks

[jarry]

Please try to download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.1-patch.zip and include it to your page.

[Opan Mustopah]

is there patch too for easyui 1.4.0 for this isssue?

[Stefan B.]

The patch is not working correct.

Now we see a datagrid with a dummy row after loading remote data with no datasets! See attachment

[jarry]

Please try to download the updated patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.1-patch.zip.

[Stefan B.]

Hi jarry, the patch is not working when the

Code:

rownumbers: true

is set

See: http://jsfiddle.net/813w8q32/2/

[jarry]

This issue has been fixed. Please re-download the patch again from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.1-patch.zip

[Opan Mustopah]

hey jarry, there is patch for this issue for easyui 1.4.0??

thanks

[jarry]

Please use the code below to solve the scrollbar issue.

Code:

(function($){
    $.fn.datagrid.defaults.data = [];
    var onAfterRender = $.fn.datagrid.defaults.view.onAfterRender;
    $.extend($.fn.datagrid.defaults.view, {
        renderTable: function(target, index, rows, frozen){
            var state = $.data(target, 'datagrid');
            var opts = state.options;

            if (frozen){
                if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
                    return '';
                }
            }
            
            var fields = $(target).datagrid('getColumnFields', frozen);
            var table = ['<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>'];
            for(var i=0; i<rows.length; i++){
                var row = rows[i];
                // get the class and style attributes for this row
                var css = opts.rowStyler ? opts.rowStyler.call(target, index, row) : '';
                var classValue = '';
                var styleValue = '';
                if (typeof css == 'string'){
                    styleValue = css;
                } else if (css){
                    classValue = css['class'] || '';
                    styleValue = css['style'] || '';
                }
                
                var cls = 'class="datagrid-row ' + (index % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + classValue + '"';
                var style = styleValue ? 'style="' + styleValue + '"' : '';
                var rowId = state.rowIdPrefix + '-' + (frozen?1:2) + '-' + index;
                table.push('<tr id="' + rowId + '" datagrid-row-index="' + index + '" ' + cls + ' ' + style + '>');
                table.push(this.renderRow.call(this, target, fields, frozen, index, row));
                table.push('</tr>');

                index++;
            }
            table.push('</tbody></table>');
            return table.join('');
        },
        onAfterRender:function(target){
            onAfterRender.call(this,target);
            var opts = $.data(target, 'datagrid').options;
            if (opts.finder.getRows(target).length == 0){
            	this.renderEmptyRow(target);
            }
        },
		renderEmptyRow: function(target){
			var dc = $.data(target, 'datagrid').dc;
			dc.body2.html(this.renderTable(target, 0, [{}], false));
			dc.body2.find('.datagrid-row').removeClass('datagrid-row').removeAttr('datagrid-row-index');
			dc.body2.find('tbody *').css({
				height: 1,
				borderColor: 'transparent',
				background: 'transparent'
			});
		}
    });
})(jQuery);

[Stefan B.]

This issue has been fixed. Please re-download the patch again from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.1-patch.zip

Fine this is better, but now we have the problem that the patch writes one hidden row with index 0.
And the styler of each cell is called and also the rowStyler. And when there something is done you can see it in the table.

See this exsample: http://jsfiddle.net/s7mpxk4g/

[jarry]

Please try this updated example
http://jsfiddle.net/s7mpxk4g/1/

If your issue continues, try to download the patch again or use the scrollbar fixed code above. The 'renderEmptyRow' function looks like this:

Code:

renderEmptyRow: function(target){
	var dc = $.data(target, 'datagrid').dc;
	dc.body2.html(this.renderTable(target, 0, [{}], false));
	dc.body2.find('.datagrid-row').removeClass('datagrid-row').removeAttr('datagrid-row-index');
	dc.body2.find('tbody *').css({
		height: 1,
		borderColor: 'transparent',
		background: 'transparent'
	});
}

[Stefan B.]

Perfect. Now it works correct. And if now data exists also the styler and formatter not called.
BIG THX