Mouse-hover in data-grid from field in data-grid

I am roughly on latest AG/ID (14.2).

I have a data grid which represents scenarios (name, start, end, etc.) to which users want to add a field for comments (to describe purpose for oddly-suffixed scenario names). Adding the field is simple enough, but the intent is to use that comment as the mouse-hover text for the scenario name.

How is it that I set a mouse-hover text value for a field which is declared as below, and how to I reference the same row’s comment field?

Hello Chris,

Thank you for posting to Infragistics Community!

I have created this sample demostrating how the IgxGrid’s Cell Templating functionality can be leveraged in combination with the IgxTooltip capabilities to easily achieve your requirement.

The approach involves creating a cell display template that can be as simple as the default one, however, the element displaying the cell value has the addition of being set as a tooltip target. The same could be achieved for the cell editing template, of course. The tooltip reference template itself is defined within this cell template and displays a value from the exposed cell context:

 
      
        {{
          val
        }}
        

          {{ cell.row.data.QuantityPerUnit }}
        
      
    

I hope this suggestion helps. If you require any further assistance on the matter, please, let me know.

Best regards,
Bozhidara Pachilova
Associate Software Developer

I would love to say that worked, but I also need the input in that column and putting them together isn't working for me, either by meshing the tooltip code into the existing template or by adding another template to the same column.

It's using the scenario name as the tooltip, not the column value I'm attempting to designate.

Here is current code:

		
			
				{{ val }}
				
 {{ cell.row.data.createdBy }} 
				
					
				
			
		

Even removing the input code doesn't populate the right value for the tooltip: it's still just the scenario name. I assume I'm missing something in the .ts file, but I don't see anything that seems relevant.

Hi Chris,

Thank you for following up!

I have modified the previously referenced sample to also include a cell editing template with the same span and tooltip elements.

On my side everything is working as expected as the cell context provides info about the row and its data there as well and the tooltip correctly displays another column’s value. Could I ask you to please have a look at the sample again and eventually compare any discrepancies between it and your own template’s code? The only possible root cause I can currently think of is probably a typo in the data source’s filed name – “createdBy” as you have written.

Please, keep in mind, though, that I am not really familiar with your data model, such as what a “scenario name” represents, .etc.

By your description, I was under the impression it is a field in your data. In case I am missing an aspect of your requirement, please, provide further details on the same. If the information you would like to display in a tooltip cannot actually be found in the data record, maybe a getter/public field in the .ts file is indeed what has to be implemented. You could use the cellEditEnter event for instance, to extract information about the currently edited cell and set the value of this variable based on it.

Thank you for your cooperation.

Best regards,
Bozhidara Pachilova
Associate Software Developer

I am unsure what I am doing wrong. I have tried using all columns and still only get mouse-hover of the scenario name. Here is my full HTML for the scenarios list page:

	
		
		
			Scenarios
		
		
			{{ badNameWarning }}
		
		
			Cancel
			Done
		

		
			
				{{ val }}
				
 {{ cell.row.data.active }} 
				
					
				
			
		
		
			{{ cell.value }}
			
				
			
		
		
			{{ cell.value }}
			
				
			
		
		
		
		
		
		
		
		
			{{ value.replace('sys_nsgplanning', 'SYSTEM') | uppercase }}
		
		
			{{ value + 'z' | date: 'MM/dd/yy hh:mm a' }}
		
		
			{{ value.replace('sys_nsgplanning', 'SYSTEM') | uppercase }}
		
		
			{{ value + 'z' | date: 'MM/dd/yy hh:mm a' }}
		
		
			
				

					View
					Manage
					Copy
					Archive
					Activate
					Type
					Delete
				
			
		
	



	
		
Copy Scenario
	
	

		
			Name: 
			
		
		

		{{ badNameCopyWarning }}
		

			
				Type: 
				
				
					arrow_drop{{ scenType.collapsed ? '_down' : '_up' }}
				
			
			
				

					{{
						type.name
					}}
				
			
		
		

			
				Start WW: 
				
				
					arrow_drop{{ startWwCopy.collapsed ? '_down' : '_up' }}
				
			
			
				

					
						{{ ww.name }}
					
				
			
		
		

			
				Horizon: 
				
				
					arrow_drop{{ horizon.collapsed ? '_down' : '_up' }}
				
			
			
				

					{{
						ho.name
					}}
				
			
		
		
		
		Private: 

		checkAdd Scenario 
		cancelCancel
	






	
		

			
Change Scenario Type
		
	
	

		Current Scenario Type: 
		

		{{ scenarioToChangeType?.scenarioType }}
	
	

		New Scenario Type: 
		

		
			
				{{ item.name }}
			
		
		Please select the new type
	

	

		CANCEL
		Change Type
	

A scenario object looks like this:

export interface scenario {
	id: string;
	name: string;
	active: string;
	scenarioTypeId: string;
	scenarioType: string;
	startWw: string;
	startWwId: string;
	endWw: string;
	endWwId: string;
	private: boolean;
	locked: boolean;
	createdBy: string;
	createdDate: Date;
	lastModifiedBy: string;
	lastModifiedDate: any;
	facilities: string;
	families: string;
	facilityIds: string;
	familyIds: string;
	horizonId?: string;
}

Validation is run on the Name based upon the scenarioType and retroactively applied if the user changes the scenarioType within a row or the copyScenario modal. Very simply, the Name must be in a format of

`^${prefix}\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_\-]{0,${prefix.length === 3 ? 39 : 38}}$` (regex).

Hi Chris,

Thank you for sharing sample code. As far as the current discussion is concerned, I think only the “name” filed and its cell editor template code are relevant in this case, as well as the “scenario” interface having the “active” property.

At this point, I cannot identify anything wrong about this template. To verify it, I added it to the previously referenced sample’s “UnitPrice” column. By only modifying the accessed data property name to be any of the sample’s data properties, everything is working as expected and the tooltip shows the correct value of the expected data field. Please, check how it behaves in the sample:

The only thing I am wondering about concerning the code-snippet, is the fact that the “name” field in your grid is not marked as editable and the igxCellEditor sets just the editing template.

In conclusion, I am afraid I cannot give further suggestions on what else may be missing on your side, given that the isolated sample shows everything working as expected. My suggestion is to debug and verify that the target properties of the data are indeed defined. As usual, forking and modifying the StackBlitz sample to reproduce the behavior will be appreciated, so I can assist you further with the issue.

Best regards,
Bozhidara Pachilova
Associate Software Developer

I figured it out.

Your sample has 2 `ng-template` components for the column and it only needs 1. I was using the wrong one. The igxCell template is the one I was missing, and the only one necessary for making the tooltip appear properly. I was attempting to include the tooltip component in the igxCellEditor template, which doesn't work.

To answer my second question above, "Yes, you can and need to declare a separate template for the tooltip inside the column declaration."

You indicated this implementation was correct and matched your example, but it was wrong:

			
				{{ val }}
				
 {{ cell.row.data.active }} 
				
					
				
			

On the other hand, this code is a match for what you have shown in the example, and actually works for me:

			
				{{ val }}
				
 {{ cell.row.data.active }} 
			
			
				
					
				
			

Thank you for your assistance. I think we both got caught by tunnel-vision and redundancy trap, looking at this too many times without seeing what was actually different.

Hi Chris,

I am glad that your issue is resolved. Thank you for using Infragistics components.

Best regards,

Bozhidara Pachilova