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

[aswzen]

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.


Thanks in advance.

[stworthy]

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

Code:

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

[aswzen]

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.

[stworthy]

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

[aswzen]

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

[stworthy]

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