edatagrid resize question

[ShockRaver]

Code:

<table id="tt" class="easyui-datagrid" url="objects.php" title="Bestellingen" singleSelect="true" pagination="true" fitColumns="true" pagePosition="both" pageSize="50" remoteSort="true" multiSort="false" enableEditing="true" remoteFilter="true" toolbar="#tb" fit="true">
              <thead>
			  <tr>
				<th data-options="field:'aflever',width:15">#</th>
				<th data-options="field:'orders_id',sortable:true,formatter:formatC">Order ID</th>
				<th data-options="field:'date_purchased',sortable:true">Besteldatum</th>
				<th data-options="field:'customers_name',align:'left',sortable:true">Klantnaam</th>
				<th data-options="field:'notify',width:25,align:'center',formatter:formatCk, editor:{formatter:formatCk, type:'checkbox',options:{on:'1',off:'0'}}">Notify</th>
				<th data-options="field:'orders_status',width:300,align:'left',sortable:true,formatter:function(value,row){
							return row.orders_status;
						},editor:{
							type:'combobox',
							options:{
								valueField:'orders_status',
								textField:'orders_status_name',
								required:true
							}
						}">Status</th>
				<th data-options="field:'levertermijn',width:120,align:'left',sortable:true">Levertermijn</th>
				<th data-options="field:'comments',width:100,align:'left',sortable:true,formatter:formatA">Opmerkingen</th>
				<th data-options="field:'zen_jobbs_comment',width:100,align:'left',formatter:formatB,sortable:true,editor:{
							type:'textarea'}">Interne notitie</th>
				<th data-options="field:'order_total',align:'right',sortable:true">Totaalbedrag</th>
				<th data-options="field:'payment_module_code',sortable:true">Betaalmethode</th>
				<th data-options="field:'shipping_module_code',sortable:true">Verzendmethode</th>
				<th data-options="field:'order_site',sortable:true">Website</th>

              </tr>
</thead>
</table>

Above the basics of my editable datagrid. There is alot more code to it, but this is the table.

My question about the resizing of the colums.
When i make a column smaller it resizes correctly, but when i make a column wider the filter row resizes correctly, but the data in the grid will go beyond the border on the right side.

The filter row is a combination of text and combobox filters.


any suggestions?

edit: attached the screenshot.

Eelco

[stworthy]

Please refer to this example http://jsfiddle.net/7jdES/

[ShockRaver]

thx, i think i know what the issue is. As soon i remove the filter row it works good, but when with the filters it doesn't...

Here the code for the filters:

maybe to heavy?

var dg = $('#tt').datagrid..............

Code:

$('#tt').datagrid('enableFilter',[{
                	field:'orders_status',
                	type:'combobox',
                	options:{
                	    panelHeight:'auto',
                	    data:products,
						valueField:'orders_status',
						textField:'orders_status_name',
						groupField: 'groep',
                 	   	onChange:function(value){
                     	   if (value == ''){
                       	     dg.edatagrid('removeFilterRule', 'orders_status');
                      	  } else {
                      	     dg.edatagrid('addFilterRule', {
                                field: 'orders_status',
                                op: 'equal',
                                value: value
                            });
							}
                        	dg.datagrid('doFilter');
                    }
                }
            },{
                field:'levertermijn',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    valueField: 'label',
		textField: 'value',data:[{
			label: 'Alle',
			value: 'Alle'
		},{
			label: 'Vandaag leveren',
			value: 'Vandaag leveren'
		},{
			label: 'afhalen',
			value: 'Vandaag afhalen'
		},{
			label: '24 uur',
			value: '24 uur'
		},{
			label: '11:00',
			value: '24 uur voor 11:00'
		},{
			label: 'zaterdag',
			value: 'Zaterdag'
		},{
			label: '2 werkdagen',
			value: '2 werkdagen'
		},{
			label: '3 werkdagen',
			value: '3 werkdagen'
		},{
			label: '4 werkdagen',
			value: '4 werkdagen'
		},{
			label: '5 werkdagen',
			value: '5 werkdagen'
		},{
			label: '6 werkdagen',
			value: '6 werkdagen'
		},{
			label: '7 werkdagen',
			value: '7 werkdagen'
		},{
			label: '9 werkdagen',
			value: '9 werkdagen'
		}],
                    onChange:function(value){
                        if (value == ''){
                            dg.edatagrid('removeFilterRule', 'levertermijn');
                        } else {
                            dg.edatagrid('addFilterRule', {
                                field: 'levertermijn',
                                op: 'equal',
                                value: value
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            },{
                field:'payment_module_code',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'Alle'},{value:'moneyorder',text:'Overboeking'},{value:'multisafepay',text:'Direct online'},{value:'vipcod',text:'Betalen op rekening'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.edatagrid('removeFilterRule', 'payment_module_code');
                        } else {
                            dg.edatagrid('addFilterRule', {
                                field: 'payment_module_code',
                                op: 'equal',
                                value: value
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            },{
                field:'shipping_module_code',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'Alle'},{value:'zones',text:'PostNL'},{value:'staticlist2',text:'DHL'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.edatagrid('removeFilterRule', 'shipping_module_code');
                        } else {
                            dg.edatagrid('addFilterRule', {
                                field: 'shipping_module_code',
                                op: 'equal',
                                value: value
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            }]

[ShockRaver]

I ended up disable the filter row and the viewdetails of my datagrid.

It just seems to take alot from an older computer system. datagrid response is very slow.

Any other ways? So we can user the datagrid with the filter row and viewdetails, in a fast way?

Eelco