Tooltip on jqxgrid cells

[shakti_singhParticipant]

Hi Team,

I have jqxgrid with one column as type of checkbox, and i want to show the tooltip if checkbox is checked.
I’m not able to initiate the tooltip over the cell.

Is there any way to do this?

thanks

[StanislavParticipant]

Hello shakti,

When you set [enabletooltips]="true", the tooltips appears above the checkboxes.
here is an example:
app.component.ts

export class AppComponent {
	source: any =
	{
		localdata: generatedata(13, true),
		datafields:
		[
			{ name: 'available', type: 'bool' }
		],
		datatype: 'array'
	};

	dataAdapter: any = new jqx.dataAdapter(this.source);

	columns: any[] =
	[
		{ text: 'Available', datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70 }
	];
}

app.component.HTML

	<jqxGrid [width]="70" [source]="dataAdapter" [enabletooltips]="true"
			 [editable]="true" [columns]="columns">
	</jqxGrid>

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[shakti_singhParticipant]

Hi Stanislav,

Thanks for reply,
this is working fine but it is giving the same value what it is showing in the grid.
Can we give the custom message in the tooltip?

thanks
Shakti

[StanislavParticipant]

Hello Shakti,

Here is an example of custom tooltip:

app.component.HTML

<jqxGrid [width]="850" [height]="450" [source]="dataAdapter"
		 [enabletooltips]="false"
		 [cellhover]="cellhovertooltiprenderer"	
		 [selectionmode]="'singlecell'"
		 [columns]="columns" [altrows]="true" [sortable]="true">
</jqxGrid>

app.component.ts

export class AppComponent {
	source: any =
	{
		datatype: 'xml',
		datafields: [
			{ name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
			{ name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
			{ name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
			{ name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
			{ name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
			{ name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
		],
		root: 'entry',
		record: 'content',
		id: 'm\\:properties>d\\:OrderID',
		url: '../assets/sampledata/orders.xml',
		sortcolumn: 'ShipName',
		sortdirection: 'asc'
	};

	dataAdapter: any = new jqx.dataAdapter(this.source);

	counter: number = 1;
	tooltiprenderer = (element: any): void => {
		let id = <code>toolTipContainer${this.counter}</code>;
		element[0].id = id;
		let content = element[0].innerHTML;
		setTimeout(_ => jqwidgets.createInstance(<code>#${id}</code>, 'jqxTooltip', { position: 'mouse', content: content }))
		this.counter++;
	}

	cellhovertooltiprenderer = (element: any, pageX: number, pageY: number): void => {
		setTimeout(_ => jqwidgets.createInstance('.jqx-item', 'jqxTooltip', { position: 'mouse', content: "Hello!" }));
	};

	columns: any[] =
	[
		{ text: 'Ship Name', datafield: 'ShipName', width: 250, rendered: this.tooltiprenderer },
		{ text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd', rendered: this.tooltiprenderer },
		{ text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right', rendered: this.tooltiprenderer },
		{ text: 'Ship Address', datafield: 'ShipAddress', width: 350, rendered: this.tooltiprenderer },
		{ text: 'Ship City', datafield: 'ShipCity', width: 100, rendered: this.tooltiprenderer },
		{ text: 'Ship Country', datafield: 'ShipCountry', width: 101, rendered: this.tooltiprenderer }
	];
}

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[shakti_singhParticipant]

Hi Stanislav,
I have used the provided code this helps me and thanks for helping me.

But when I’m removing rendered: this.tooltiprenderer from other columns
still it is showing the tooltip over that column where I have removed it.

columns: any[] =
	[
		{ text: 'Ship Name', datafield: 'ShipName', width: 250, rendered: this.tooltiprenderer },
		{ text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
		{ text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right'},
		{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
		{ text: 'Ship City', datafield: 'ShipCity', width: 100},
		{ text: 'Ship Country', datafield: 'ShipCountry', width: 101}
	];

So here I want to show the tooltip over “Ship Name” but still it is showing in all the columns.
I’m debugging the code but I’m not getting from where it is taking all the columns.
Can you look into that?

Thanks
Shakti

[StanislavParticipant]

Hello Shakti,

I tested your example, but couldn’t simulate what you are experiencing.
The tooltips showed where I was hovering.

Can you please send us a full example, with how are you setting up the tooltip?

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts