jQuery UI Widgets Forums Angular Tooltip on jqxgrid cells

This topic contains 5 replies, has 2 voices, and was last updated by  Stanislav 6 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Tooltip on jqxgrid cells #99930

    shakti_singh
    Participant

    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

    Tooltip on jqxgrid cells #99941

    Stanislav
    Participant

    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/

    Tooltip on jqxgrid cells #99959

    shakti_singh
    Participant

    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

    Tooltip on jqxgrid cells #99963

    Stanislav
    Participant

    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/

    Tooltip on jqxgrid cells #99971

    shakti_singh
    Participant

    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

    Tooltip on jqxgrid cells #100004

    Stanislav
    Participant

    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/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.