Thank you, works great!

tried it with onEdit and onAfterEdit, but didn't think of onBeforeEdit... Think that did the trick

Good day,

I have used the tooltip on my editable datagrid. The tooltip itself works, but when the tooltip is shown when i doucbleclick (to edit) then the tooltip won't disappear, not even after editting.
I need to refresh the page to get rid of the tooltip.

Any ideas?

Here's the piece of code:

Code:

function formatA(value,row,index){
	return '<span data-p1='+index+' class="easyui-tooltip">' + value + '</span>';
}
function createTooltip(){
    $('#tt').datagrid('getPanel').find('.easyui-tooltip').each(function(){
        var index = parseInt($(this).attr('data-p1'));
        $(this).tooltip({
            content: $('<div></div>'),
            onUpdate: function(cc){
                var row = $('#tt').datagrid('getRows')[index];
                var content = '<div>'+row.comments+'</div>';
                cc.panel({
                    width:200,
                    content:content
                });
            },
            position:'left'
        });
    });
}

And the datagrid i added these:

<th data-options="field:'comments',width:100,align:'left',sortable:true,formatter:formatA">Opmerkingen</th>

and

 onLoadSuccess function calls "createTooltip()"

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

Thx for the input.

I also found another way, here it is:

jquery.easyui.min.js add this:

Code:

$.extend($.fn.datagrid.methods,{
	resizeColumn:function(jq,param){
		return jq.each(function(){
			var dg = $(this);
			var col = dg.datagrid('getColumnOption', param.field);
			col.boxWidth = param.width + (col.boxWidth-col.width);
			col.width = param.width;
			dg.datagrid('fixColumnSize', param.field);
		})
	}
})

Then the onEdit will work with this:

Code:

var ed = $(this).edatagrid('getEditor',{index:index,field:'comment'});
			$(this).datagrid('resizeColumn', {
                       field: 'comment',
                      width: 300
});

Thx, i am using that now, but it is bound to the width of the column....

Or can i manipulate it?

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

In my editable datagrid i would like a dialog to pop up when i enter onEdit, or just before a row is updated.

This dialog should contain a textarea and an "ok" button. When OK is clicked and the row in the datagrid is going to update, the text in the textarea should also be posted to the updateUrl.

Maybe dialog isn't the way to go, i don't know.

Anybody any ideas on how to do this?

Eelco

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