jqxTooltip with image on cell hover.

[grmblMember]

Hello, can anybody help me on my way on how to accomplish this?

[Peter StoevKeymaster]

Hi grmbl,

jqxTooltip cannot be used as a tooltip in jqxGrid. It is not supported by jqxGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[grmblMember]

Any suggestions on how to do this without jqxTooltip?

Thanks in advance!

[Peter StoevKeymaster]

Hi grmbl,

You can use the built-in tooltips by setting: enabletooltips: true

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[grmblMember]

I have a grid with rows being selected thus not seeing the tooltips after setting enabletooltips: true…
Because I need an image in the tooltip I will have to take a look at other tooltip plugins I think.
In the cell I have the product name. On hover I would like to show a tooltip with the image retrieved by using the name (= value).

[Peter StoevKeymaster]

Hi grmbl,

By setting enabletooltips to true, Grid will display the cell’s content as a tooltip, in case you don’t use custom cells rendering. Otherwise you need to manually set the ‘title’ attribute of the returned HTML in the cellsrenderer callback function. Tooltips can be observed in the defaultfunctionality sample of jqxGrid. Hover any cell and the tooltip will be displayed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[grmblMember]

Thanks Peter,

How is the tooltip built? Can it contain images or only basic text values?

[Peter StoevKeymaster]

Hi grmbl,

The tooltip in the Grid is the “title” attribute of the HTML elements, i.e when the enabletooltips property is set to true, the “title” attribute of each cell is set to the cell’s value. The built-in tooltip displays only text values.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[grmblMember]

Peter,

Thanks for the information. I will take the above in account for text tooltips.

Now that I come to think of it, do you think it’s possible to do the following?

(grid bound to xml)
a cell has the item name and would be cool if i could show the item description as tooltip on that field.

For the image tooltip I will try and implement this with another script? Is it possible to use another script to show
tooltips inside jqwidgets controls?

Thanks for your help, appreciate it.

[Peter StoevKeymaster]

Hi grmbl,

Most of the tooltips work by selection of HTML element by class or by ID. As the Grid cells are dynamically updated, I don’t think this will do the job. We will consider adding an option to use jqxTooltip plug-in inside jqxGrid in the future versions. With the built-in tooltips at present, you can change the tooltip’s display by using custom cells rendering: jquery-grid-cellsrendering.htm. In the returned HTML, set the title attribute to one of your choice.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[grmblMember]

OK Peter,

Thanks for the info and looking forward to the implementation of jqxTooltip in jqxGrid!

Greetings,

grmbl

[grmblMember]

One last thing, how can I detect row selection changed and get rowdata of newly selected row?

Greetings,

grmbl

[grmblMember]

Nevermind, I got it.

AND I got it (partially) working using a buttoncell and jqxWindow!

…
// imagecell value
var imagecellrenderer = function (row, column, value) {
return value;
}

// imagecell click
var imagecellclick = function(row) {
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ width: 300, height: 200, resizable: false, position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
$(“#itemname”).val(dataRecord.ITPRDC);
$(“#itemdesc”).val(dataRecord.ITDESC);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
…
columns: [
…
// { text: ‘Item’, dataField: ‘ITPRDC’, renderer: columnrenderer, width: ‘6%’ },
{ text: ‘Item’, datafield: ‘ITPRDC’, columntype: ‘button’, cellsrenderer: imagecellrenderer, width: ‘6%’, buttonclick: imagecellclick },
…
],
…

Item

Item:

Description:

BUT can I only use html elements of type “input” to bind the datarow data to?
How would you suggest using the value for an img?

Also, is it possible to set the offset of the popup to the buttoncell that was clicked?

Thanks,

grmbl ^^

[grmblMember]

I have 2 other questions:

1. If I use jqxWindow but it only needs to show when clicked on the buttons, why
is the html code being shown? How can I go around this?

2. Is there a way to default show ALL rows?

Thanks

[Peter StoevKeymaster]

Hi grmbl,

– You can take a look at this sample:popupediting.htm. It shows how to use jqxWindow along with jqxGrid.

– The Grid’s autoheight property specifies whether the Grid will create UI element for all rows at once and will display them on a single page. Its height will be equal to the sum of the all rows height.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts