Print Page - [SOLVED] Datagrid row tooltip

Title: [SOLVED] Datagrid row tooltip
Post by: jega on September 02, 2024, 01:16:33 AM

Hi

Have this in the rowstyler

         rowStyler: function(index,row){
            if (row.active == '0'){
               return 'background-color:#FF9D9D;color:#0;';
            }
         },

This makes row background red if it's not active

How to have a tooltip on these rows

Jesper

Title: Re: Datagrid row tooltip
Post by: jarry on September 03, 2024, 12:00:01 AM

Please define the 'formatter' function for the columns to show a tooltip.

Code:

$('#dg').datagrid({
	columns: [[
		{
			field: 'productid', title: 'ProductId', width: 100, formatter: function (value, row) {
				if (row.listprice>50){
					return '<div title="' + row.productname + '">' + value + '</div>';
				} else {
					return value;
				}
				
			}
		}
	]]
})

Title: Re: Datagrid row tooltip
Post by: jega on September 03, 2024, 12:34:32 AM

Yes i know this, but it dosen't work

I have tried this code. Then i just need one formatter, but this way there is no title on empty cell

$('#dgList').datagrid({
   columns: [[
      {field: 'metaServer', width: 200, title: 'Meta Server', formatter: formatRow},
      {field: 'objektNavn', width: 250, title: 'Objekt navn', formatter: formatRow},
      {field: 'jobNavn', width: 500, title: 'Job navn', formatter: formatRow},
      {field: 'filNavn', width: 300, title: 'Fil navn', formatter: formatRow},
      {field: 'lastfiledate', width: 120, title: 'Senest ændret', formatter: formatRow},
      {field: 'dato_udgaaet', width: 120, title: 'Udgået', formatter: formatRow},
   ]]
});

function formatRow(value,row){
   if (row.udgaaet == '1'){
      return '<div title="Udgået">' + value + '</div';
   } else {
      return value;
   }
}

I think this is a lot of code to something that's just a title over the row (every column)

Title: Re: Datagrid row tooltip
Post by: jarry on September 03, 2024, 07:16:43 PM

Improve the 'formatRow' function to let it display tooltip on empty cells.

Code:

function formatRow(value, row) {
	if (row.udgaaet == '1') {
		return '<div title="Udgået">' + (value||'&nbsp;') + '</div';
	} else {
		return value;
	}
}

If you really refuse to use the 'formatter' function, please try this code to display the tooltip on the specified rows.

Code:

$('#dgList').datagrid({
	columns: [[
		{ field: 'metaServer', width: 200, title: 'Meta Server'},
		{ field: 'objektNavn', width: 250, title: 'Objekt navn'},
		{ field: 'jobNavn', width: 500, title: 'Job navn'},
		{ field: 'filNavn', width: 300, title: 'Fil navn'},
		{ field: 'lastfiledate', width: 120, title: 'Senest ændret'},
		{ field: 'dato_udgaaet', width: 120, title: 'Udgået'},
	]],
	onLoadSuccess: function (data) {
		const opts = $(this).datagrid('options');
		data.rows.forEach((row, index) => {
			if (row.udgaaet == '1') {
				opts.finder.getTr(this, index).attr('title', 'Udgået');
			}
		})
	}
});

Title: Re: Datagrid row tooltip
Post by: jega on September 04, 2024, 01:58:53 AM

Hi Jarry

Yes, have already used nbsp;

But the solution in onLoadSuccess is much better

thanks

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jega on September 02, 2024, 01:16:33 AM