jQWidgets Forums
jQuery UI Widgets › Forums › Angular › JQXToolTip in Column Headers
This topic contains 9 replies, has 2 voices, and was last updated by Hristo 5 years, 4 months ago.
-
Author
-
Hi,
I tried updating the Column ToolTip demo in JQXGrid and when I added more columns to it, I started getting this issue.
ERROR
Error: Invalid Selector – #toolTipContainer12! Please, check whether the used ID or CSS Class name is correct.Does it have limits on the number of columns?
Thanks!
Below is the sample code
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’
})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’ },
{ name: ‘ShipCountry2’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry3’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry4’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry5’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry6’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry7’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry8’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry9’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry10’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry11’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry12’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry13’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ },
{ name: ‘ShipCountry14’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ }],
root: ‘entry’,
record: ‘content’,
id: ‘m\\:properties>d\\:OrderID’,
url: ‘../assets/orders.txt’,
sortcolumn: ‘ShipName’,
sortdirection: ‘asc’
};getWidth() : any {
if (document.body.offsetWidth < 850) {
return ‘90%’;
}return 850;
}dataAdapter: any = new jqx.dataAdapter(this.source);
counter: number = 1;
tooltiprenderer = (element: any): void => {
let id =toolTipContainer${this.counter}
;
element[0].id = id;
let content = element[0].innerHTML;
setTimeout(_ => jqwidgets.createInstance(#${id}
, ‘jqxTooltip’, { theme: ‘material’, position: ‘mouse’, content: content }))
this.counter++;
}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 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry1’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry2’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry3’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry4’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry5’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry6’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry7’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry8’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry9’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry10’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry11’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry12’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry13’, width: 101, rendered: this.tooltiprenderer },
{ text: ‘Ship Country’, datafield: ‘ShipCountry14’, width: 101, rendered: this.tooltiprenderer }
];
}Hello geromelouie,
Based on the mentioned demo I try to recreate this case and it seems to work fine.
Please, take a look at this example, the new columns are added on the end.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHi,
I tried adding a couple more columns in your example above and it is still throwing me the same error. I’m not sure if it only works for a maximum of 10 columns?
Thanks!
Hello geromelouie,
Could you provide us with more details?
What is your error?Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHello, in this example link you provided above, I added more columns (more than 10) and I was getting this error:
ERROR
Error: Invalid Selector – #toolTipContainer5! Please, check whether the used ID or CSS Class name is correct.Thanks!
Hello geromelouie,
Thank you for the feedback.
I will create a work item for this case.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHi,
Thank you. Hoping to get a resolution soon.
Thanks!
Hello geromelouie,
You could try to use the jqxTooltip as an additional component as a workaround.
Then you just need to create it and get the value under the caret to provide the desired content for the tooltip.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHi,
When rendering the grid using Angular, should this be inside the cellhover property?
Thanks!
Hello geromelouie,
Yes, this callback you could use.
Please, let me know if you have trouble with this.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.