Print Page - DataGrid and datalist cannot be used in tooltip

Title: DataGrid and datalist cannot be used in tooltip
Post by: officecode on September 23, 2017, 06:57:40 AM

The data in the following code cannot be displayed. Ask for help. Thanks！

Code:


onLoadSuccess:function(data){
	$('.img').tooltip({
		content: function(){return $('<div></div>')},
		position: 'right',
		onUpdate:function(content){
			content.datalist({
				title:'datalist',
				iconCls:'icon-tip',
				width: 278,
				height:120,
				lines:true,
				data:[
					{title:'aaa'}
				],
				textField:'title'
			});
		}
	});
},

Title: Re: DataGrid and datalist cannot be used in tooltip
Post by: officecode on September 23, 2017, 08:05:47 PM

After testing, if I change the URL attribute in datalist, the data can be obtained, but cannot be displayed in the datalist.
Does tooltip not support this type of writing? Is there anything else that can be used to display DataGrid data in tooltip?
This problem has been bothering me for a long time.

Title: Re: DataGrid and datalist cannot be used in tooltip
Post by: jarry on September 23, 2017, 11:05:05 PM

You should resize the datalist after display the tooltip dialog.

Code:

onUpdate: function(content){
	content.datalist({
		title:'datalist',
		iconCls:'icon-tip',
		width: 278,
		height:120,
		lines:true,
		data:[
			{title:'aaa'}
		],
		textField:'title'
	});
},
onShow: function(){
	var opts = $(this).tooltip('options');
	$(opts.content).datalist('resize');
}

Title: Re: DataGrid and datalist cannot be used in tooltip
Post by: officecode on September 24, 2017, 02:14:11 AM

Thanks for your reply.
After adding the onShow event, datalist still does not display the data.

Quote from: jarry on September 23, 2017, 11:05:05 PM

You should resize the datalist after display the tooltip dialog.

Code:

onUpdate: function(content){
	content.datalist({
		title:'datalist',
		iconCls:'icon-tip',
		width: 278,
		height:120,
		lines:true,
		data:[
			{title:'aaa'}
		],
		textField:'title'
	});
},
onShow: function(){
	var opts = $(this).tooltip('options');
	$(opts.content).datalist('resize');
}

Title: Re: DataGrid and datalist cannot be used in tooltip
Post by: jarry on September 24, 2017, 06:28:18 AM

Please look at this example http://code.reloado.com/inodal/edit#javascript,html,live

Title: Re: DataGrid and datalist cannot be used in tooltip
Post by: officecode on September 24, 2017, 09:15:36 AM

Quote from: jarry on September 24, 2017, 06:28:18 AM

Please look at this example http://code.reloado.com/inodal/edit#javascript,html,live

Appreciated your great help,Dear ;)...I find the root cause that the property should be "content: $('<div></div>'),"
But I'm confused still that,tooltip can't be displayed from the second row of datagrid..

Code:


	<table id="dd"></table>
	<script>
		$(function(){
			$('#dd').datagrid({
				title:'datagrid',
				width:300,
				data:[
					{id:1,name:'abc1',age:28},
					{id:2,name:'abc2',age:28},
					{id:3,name:'abc3',age:28},
					{id:4,name:'abc4',age:28},
					{id:5,name:'abc5',age:28},
				],
				columns:[[
					{field:'id',title:'id'},
					{field:'name',title:'name',formatter:function(val,row){
						return '<a class="con" href="javascript:void(0)">'+val+'</a>';
					}},
					{field:'age',title:'age'}
				]],
				onLoadSuccess:function(){
					$('.con').tooltip({
						content: $('<div></div>'),
						onUpdate: function(content){
							content.datalist({
								title:'datalist',
								iconCls:'icon-tip',
								width: 278,
								height:120,
								lines:true,
								data:[
									{title:'aaa'}
								],
								textField:'title'
							});
						},
						onShow: function(){
							var opts = $(this).tooltip('options');
							$(opts.content).datalist('resize');
						}
					});
				}
			});
		});
	</script>

Title: Re: DataGrid and datalist cannot be used in tooltip
Post by: jarry on September 24, 2017, 11:49:11 PM

Please use this code instead.

Code:

onLoadSuccess:function(){
  $('.con').each(function(){
    $(this).tooltip({
      content: $('<div></div>'),
      onUpdate: function(content){
        content.datalist({
          title:'datalist',
          iconCls:'icon-tip',
          width: 278,
          height:120,
          lines:true,
          data:[
            {title:'aaa'}
          ],
          textField:'title'
        });
      },
      onShow: function(){
        var opts = $(this).tooltip('options');
        $(opts.content).datalist('resize');
      }
    })
  })
}

Title: Re: DataGrid and datalist cannot be used in tooltip
Post by: officecode on September 25, 2017, 07:14:10 PM

The problem has been solved. Thank you very much!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: officecode on September 23, 2017, 06:57:40 AM