Print Page - Combogrid header column width

The header columns in a combo grid initially have a wrong size (very small) when no width is given in the column definition (with fitColumns = true).
After a reload data or when using the pagination controls the header columns are resized to fit the content correctly.

This can be shown with the combogrid demo (http://jeasyui.com/demo/main/index.php?plugin=ComboGrid&theme=default&dir=ltr&pitem= (http://jeasyui.com/demo/main/index.php?plugin=ComboGrid&theme=default&dir=ltr&pitem=)) by removing the width attributes as follows:

Code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Basic ComboGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyui.css">
    <link rel="stylesheet" type="text/css" href="icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    </head>
    <body>
    <select class="easyui-combogrid" style="width:400px" data-options="
    panelWidth: 500,
    idField: 'itemid',
    textField: 'productname',
    url: 'datagrid_data1.json',
    method: 'get',
    showFooter: true,
    columns: [[
    {field:'itemid',title:'Item ID'},
    {field:'productname',title:'Product'},
    {field:'listprice',title:'List Price',align:'right'},
    {field:'unitcost',title:'Unit Cost',align:'right'},
    {field:'attr1',title:'Attribute'},
    {field:'status',title:'Status',align:'center'}
    ]],
    fitColumns: true
    ">
   
    </select>
    </body>
    </html>

To solve this issue, please call 'autoSizeColumn' method for datagrid when drop-down combo panel.

Code:

<select class="easyui-combogrid" style="width:400px" data-options="
		//...
		onShowPanel:function(){
			$(this).combogrid('grid').datagrid('autoSizeColumn');
		}
		">
</select>

Or download the updated datagrid plugin from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js and include to your page.

EasyUI Forum

General Category => Bug Report => Topic started by: rob on December 04, 2013, 02:15:02 AM