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

Title: Datagrid: Can't scroll columns when there are no rows
Post by: phunksta on February 23, 2015, 03:14:06 AM

Hi,

This issue seems very similar in description to
this one (http://www.jeasyui.com/forum/index.php?topic=3746.0).

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

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: jarry on February 24, 2015, 01:17:59 AM

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.

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: Opan Mustopah on February 24, 2015, 06:46:49 AM

is there patch too for easyui 1.4.0 for this isssue?

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: Stefan B. on February 24, 2015, 09:01:58 AM

The patch is not working correct.

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

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: jarry on February 24, 2015, 05:34:35 PM

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

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: Stefan B. on February 25, 2015, 01:56:41 AM

Hi jarry, the patch is not working when the

Code:

rownumbers: true

is set

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

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: jarry on February 25, 2015, 05:05:39 AM

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

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: Opan Mustopah on February 25, 2015, 10:39:52 AM

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

thanks

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: jarry on February 25, 2015, 06:20:29 PM

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);

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: Stefan B. on February 26, 2015, 01:10:06 AM

Quote from: jarry on February 25, 2015, 05:05:39 AM

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/

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: jarry on February 26, 2015, 06:25:26 AM

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'
	});
}

Title: Re: Datagrid: Can't scroll columns when there are no rows
Post by: Stefan B. on February 26, 2015, 07:17:10 AM

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

EasyUI Forum

General Category => Bug Report => Topic started by: phunksta on February 23, 2015, 03:14:06 AM