Print Page - Large row number on datagrid rendered not properly [+PIC]

Title: Large row number on datagrid rendered not properly [+PIC]
Post by: aswzen on August 13, 2014, 10:52:30 PM

Hello someone there, Hello stworthy.

I have some problem with datagrid plugin. i don't know if this listed as a bug or not.

I just loaded about 4000 data on a datagrid with row number enabled.

If i go to row number XXXX (ex:1600) then on default theme (official from jEasyui) the row number appear not properly (aka hidden).
Like pic number 1.

Then i decided to customize the default theme css, and make the row number class look like this.

Code:

.datagrid-header-rownumber,
.datagrid-cell-rownumber {
  width: auto; //<<== THIS PART 
  text-align: center;
  margin: 0;
  padding: 0;
}

and the results is more weirdly, the row number column width is autosized with their content, but the column header not.
look at the pic number 2.

Any solution for this?..
even on your demo its appear not properly.
(http://i.imgur.com/gQndeBW.jpg)

Thanks in advance.

Title: Re: Large row number on datagrid rendered not properly [+PIC]
Post by: stworthy on August 14, 2014, 02:38:41 AM

The row number column has a fixed width. Please try this:

Code:

.datagrid-header-rownumber,
.datagrid-cell-rownumber {
  width: 60px;
}

Title: Re: Large row number on datagrid rendered not properly [+PIC]
Post by: aswzen on August 14, 2014, 03:07:08 AM

yes i know that..

but how to make it autosize based on row number content?

thanks

i am thinking to purchase your product, but i have to make-sure my supervisor if the product is support any custom needs.

Title: Re: Large row number on datagrid rendered not properly [+PIC]
Post by: stworthy on August 14, 2014, 05:47:16 AM

If you really want to autosize the row number column, please try to extend a datagrid view to achieve this functionality.

Code:

var myview = $.extend({}, $.fn.datagrid.defaults.view, {
    onAfterRender: function(target){
        $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
        var opts = $(target).datagrid('options');
        if (opts.rownumbers){
            var lastTr = opts.finder.getTr(target, null, 'last');
            var tmp = $('<div style="position:absolute;padding:0 6px;left:-999999"></div>').appendTo('body');
            tmp.html(lastTr.find('div.datagrid-cell-rownumber').html());
            var width = tmp._outerWidth();
            tmp.remove();
            $(target).data('datagrid').ss.add([
                ['.datagrid-cell-rownumber',width+'px'],
                ['.datagrid-header-rownumber',width+'px']
            ]);
            setTimeout(function(){
                $(target).datagrid('fitColumns');
            },0);
        }
    }
})

Apply this new view object to the datagrid.

Code:

$('#dg').datagrid({
  rownumbers: true,
  view: myview
});

Title: Re: Large row number on datagrid rendered not properly [+PIC]
Post by: aswzen on December 02, 2015, 04:39:14 AM

Quote from: stworthy on August 14, 2014, 05:47:16 AM

If you really want to autosize the row number column, please try to extend a datagrid view to achieve this functionality.

Code:

var myview = $.extend({}, $.fn.datagrid.defaults.view, {
    onAfterRender: function(target){
        $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
        var opts = $(target).datagrid('options');
        if (opts.rownumbers){
            var lastTr = opts.finder.getTr(target, null, 'last');
            var tmp = $('<div style="position:absolute;padding:0 6px;left:-999999"></div>').appendTo('body');
            tmp.html(lastTr.find('div.datagrid-cell-rownumber').html());
            var width = tmp._outerWidth();
            tmp.remove();
            $(target).data('datagrid').ss.add([
                ['.datagrid-cell-rownumber',width+'px'],
                ['.datagrid-header-rownumber',width+'px']
            ]);
            setTimeout(function(){
                $(target).datagrid('fitColumns');
            },0);
        }
    }
})

Apply this new view object to the datagrid.

Code:

$('#dg').datagrid({
  rownumbers: true,
  view: myview
});

is this feature already applied to be easyui deafult behavior?

thank you

Title: Re: Large row number on datagrid rendered not properly [+PIC]
Post by: stworthy on December 02, 2015, 11:44:38 PM

No, you have to include this code to get this feature.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: aswzen on August 13, 2014, 10:52:30 PM