Print Page - Column size in Datagrid w/ detailView width

Hi there,

i've got another problem with column sizing in data grid.
What I try to do is have a grid that fills the page (fit: true) and its columns resizing in respect to their content and (in sum) taking up all the width of the grid (fitColumns:true).
What I experience is that the columns DO autosize, but if the overall size of the content is to small, the last column does NOT expand to the full width of the grid. This is not a problem in itself, but when I expand the detail content, it only takes up the space up to the right border of the last column (and not, as one would expect, to the full width of the grid).
I'm not really sure whats the bug here - either the last column not taking up the whole space or the detail content not taking up the whole space.
But in combination its really weird for almost-empty tables but large detail contents.

Here's a demo:

Code:

<html>
    <head>
        <link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
        <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="jquery-1.10.2.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="easyui/datagrid-detailview.js"></script>
    </head>
    <body>


    <table id="LABEL_14429ec4362" ></table>
    
    <script>

    $(function() {
            $('#LABEL_14429ec4362').datagrid({
                data: [{"OID":"3652351","LABEL":"LABEL1"},{"OID":"3652352","LABEL":"LABEL2"},{"OID":"3652353","LABEL":"LABEL3"},{"OID":"3652354","LABEL":"LABEL4"},{"OID":"3652355","LABEL":"LABEL5"},{"OID":"3652356","LABEL":"LABEL6"},{"OID":"3652357","LABEL":"LABEL7"},{"OID":"3652358","LABEL":"LABEL8"},{"OID":"3652359","LABEL":"LABEL9"},{"OID":"3652360","LABEL":"LABEL10"}],
                fit: true,
                fitColumns: true,
                view: detailview,
                detailFormatter: function(index, row) {
                        return "<div>Some text here which is overly long and would normaly take up all the space up to the right. Some text here which is overly long and would normaly take up all the space up to the right. Some text here which is overly long and would normaly take up all the space up to the right. Some text here which is overly long and would normaly take up all the space up to the right.</div>";
                },
                columns:[ [
                    {
                        title: 'Style',
                        field:'LABEL'
                    },                
                    {
                        title: 'OID',
                        field:'OID'
                    },
                ]]
            });
});
    </script>
    </body>
</html>

Hmm, so my first atempt was to just give the last column a width. The problem then is, that a right aligned column looks really weird this way if there's a lot of space (all table content together on the left except for the last column, which is "alone" on the right).
My final solution (a rather hackish one) is to introduce another empty no-titled fillup-column with width:1 which takes up the remaining space. But that looks best for all cases.
Edit: for anyone using this approach as well: you have to give the fillup-column a "field" value of a nonexisting field in the data, otherwise the column will not be drawn.

Thanks a lot anyway, at least now I understand why :)

EasyUI Forum

General Category => Bug Report => Topic started by: rob on February 18, 2014, 07:59:03 AM