How can I add a tooltip for every single cell of a treegrid

[newuserParticipant]

I want to add a tooltip for every cell of a treegrid. I have used the rendered callback function but it is not working for every cell of the treegrid.

Please help!

[ivailoParticipant]

Hi newuser,

Please, refer to the following showcase demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/interactivedemos/ticketreservation/
In this demo is used jqxGrid, but the same approach can be used with jqxTreeGrid.

In the demo is used jqxPopover, attached to elements with a specific class, added with cellsrenderer callback.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[newuserParticipant]

can I use jqxtooltip widget:

columns: [
{ text: ‘Task’, dataField: “task”, align: ‘center’, width: 250 },
{ text: ‘Person Name’, dataField: “name”, cellsAlign: ‘center’, align: ‘center’, width: 200 },
{
text: ‘Duration’, dataField: “duration”, cellsAlign: ‘center’, align: ‘center’, cellsRenderer: function (row, column, value) {
$(“this”).jqxtooltip({content:$(this).text();
}
}
]

[ivailoParticipant]

Hi newuser,

In the following tree grid with tooltip the tooltip is attached to .tooltip class in cellsRenderer callback.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[newuserParticipant]

When I am putting the cellRenderer:cellRenderer as below I am not able to see the contents of the cells for which I have used the cellsRenderer property with class tooltip.

var cellsRenderer= function (row, column, value, rowData) {
var container = ‘<div class=”tooltip”>’ + value + ‘</div>’;
return container;
}

columns: [
{ text: ‘System Name’, dataField: ‘sysName’, renderer: columnsrenderer, cellsrenderer: cellsRenderer, width:’30%’},
{ text: ‘Assessment ID’, dataField: ‘assId’, renderer: columnsrenderer, cellsrenderer: cellsrenderer, width:’15%’},
{ text: ‘Assessment Done By’, dataField: ‘userName’, renderer: columnsrenderer, cellsrenderer: cellsrenderer, width:’15%’},
{ text: ‘Status’, dataField: ‘status’, renderer: columnsrenderer, cellsrenderer: cellsrenderer, width: ‘10%’},
{ text: ‘Assessment Done On’, dataField: ‘Date’, renderer: columnsrenderer, cellsrenderer: cellsrenderer, cellsFormat: ‘f’, width:’15%’},
{ text: ‘View Assessment’, dataField: ‘view’, renderer: columnsrenderer, cellsrenderer: cellsrenderer, width:’15%’},
]

[newuserParticipant]

hi

whenever I am using the .tooltip class in cellsRenderer callback, the contents of the cells are not displayed. The value of the cells are not shown on screen.

Not able to find out the reason. Please help.

[ivailoParticipant]

Hi newuser,

Please, send a working jsfiddle/jsEditor example with your exact code for better analyze.

Probably you are not using correctly the attachTooltip() function from the previous example.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[newuserParticipant]

Below is the code:

var source =
{
dataType: “json”,
dataFields: [
{ name: ‘assId’, type: ‘string’},
{ name: ‘parentId’, type: ‘string’ },
{ name: ‘sysId’, type: ‘string’},
{ name: ‘sysAssId’, type: ‘string’ },
{ name: ‘userName’, type: ‘string’ },
{ name: ‘sysName’, type: ‘string’ },
{ name: ‘status’, type: ‘string’ },
{ name: ‘view’, type: ‘string’ },
{ name: ‘Date’, type: ‘string’ }
],
hierarchy:
{
keyDataField: { name: ‘sysId’ },
parentDataField: { name: ‘parentId’ }
},
id: ‘sysId’,
checkboxes: true,
localData: a
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
var id = “”
if (assType == “idm”) {
var id = ‘#idmTreeGrid’
} else if (assType == “cloud”) {
var id = ‘#cloudTreeGrid’
}
$(id).jqxTreeGrid({ selectionMode: “custom” });
$(id).jqxTreeGrid({ altRows: true });
$(id).jqxTreeGrid({autoRowHeight: true});

$(id).jqxTreeGrid({columnsHeight: 32});

var cellsRenderer= function (row, column, value, rowData) {
var container = ‘<div class=”tooltip”>’ + value + ‘</div>’;
return container;
}

var columnsrenderer = function (value) {
return ‘<div style=”text-align: left; margin-top: 0px;”>’ + value + ‘</div>’;
}

$(id).jqxTreeGrid(
{
width: ‘95%’,
source: dataAdapter,
sortable: true,
editable: true,

theme: ‘energyblue’,

ready: function(){
$(“.tooltip”).jqxTooltip({position: ‘mouse’, content: $(this).text() });
attachTooltip();
},
columnsResize: true,
pageable:false,

columns: [
{ text: ‘System Name’, dataField: ‘sysName’, renderer: columnsrenderer, cellsRenderer: cellsrenderer, width:’30%’},
{ text: ‘Assessment ID’, dataField: ‘assId’, renderer: columnsrenderer, cellsrenderer:cellsrenderer, width:’15%’},
{ text: ‘Assessment Done By’, dataField: ‘userName’, renderer: columnsrenderer, cellsrenderer:cellsrenderer, width:’15%’},
{ text: ‘Status’, dataField: ‘status’, renderer: columnsrenderer, cellsrenderer:cellsrenderer, width: ‘10%’},
{ text: ‘Assessment Done On’, dataField: ‘Date’, renderer: columnsrenderer, cellsrenderer:cellsrenderer, cellsFormat: ‘f’, width:’15%’},
{ text: ‘View Assessment’, dataField: ‘view’, renderer: columnsrenderer, cellsRenderer: cellsrenderer, width:’15%’},
]
});
$(id).on(‘rowClick rowExpand rowCollapse’, function (event)
{
attachTooltip();
});

function attachTooltip(){
$(“.tooltip”).jqxTooltip({position: ‘mouse’, content: $(this).text() });
$(“.tooltip”).on(“mouseenter”, function ()
{
$(this).jqxTooltip({position: ‘mouse’, content: $(this).text() });
});
}
}

[ivailoParticipant]

Hi newuser,

JavaScript is a case-sensitive language. You have to modify your cellsRenderer callback.
Please, change cellsRenderer: cellsrenderer to cellsRenderer: cellsRenderer.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[newuserParticipant]

Hi,

Made the change as suggested by you but still the issue remains. The issue is with the class .tooltip. Below is my code after the change you suggested.

var cellsRenderer= function (row, column, value, rowData) {
var container = ‘<div style=”text-align: left; margin-top: 0px;” class=”tooltip”>’ + value + ‘</div>’;
return container;
}

var cellsrenderer = function (row, column, value) {
return ‘<div style=”text-align: left; margin-top: 0px;” title=”‘+value+'”>’ + value + ‘</div>’;

}

var columnsrenderer = function (value) {
return ‘<div style=”text-align: left; margin-top: 0px;”>’ + value + ‘</div>’;
}

$(id).jqxTreeGrid(
{
width: ‘95%’,
source: dataAdapter,
sortable: true,
editable: true,
// enabletooltips:true,
theme: ‘energyblue’,
// }

columnsResize: true,
pageable:false,

columns: [
{ text: ‘System Name’, dataField: ‘sysName’, renderer: columnsrenderer, cellsRenderer: cellsRenderer, width:’30%’},
{ text: ‘Assessment ID’, dataField: ‘assId’, renderer: columnsrenderer, cellsrenderer:cellsrenderer, width:’15%’},
{ text: ‘Assessment Done By’, dataField: ‘userName’, renderer: columnsrenderer, cellsrenderer:cellsrenderer, width:’15%’},
{ text: ‘Status’, dataField: ‘status’, renderer: columnsrenderer, cellsrenderer:cellsrenderer, width: ‘10%’},
{ text: ‘Assessment Done On’, dataField: ‘Date’, renderer: columnsrenderer, cellsrenderer:cellsrenderer, cellsFormat: ‘f’, width:’15%’},
{ text: ‘View Assessment’, dataField: ‘view’, renderer: columnsrenderer, cellsRenderer: cellsRenderer, width:’15%’},
]
});
$(id).on(‘rowClick rowExpand rowCollapse’, function (event)
{
attachTooltip();
});

function attachTooltip(){
$(“.tooltip”).jqxTooltip({position: ‘mouse’, content: $(this).text() });
$(“.tooltip”).on(“mouseenter”, function ()
{
$(this).jqxTooltip({position: ‘mouse’, content: $(this).text() });
});
}

$(id).on(‘rowClick’, function(event){
var args = event.args;
var key = args.key;
$(id).jqxTreeGrid(‘selectRow’, key);
});
$(id).on(‘rowDoubleClick’, function(event){

$(id).jqxTreeGrid(‘clearSelection’);
});

[ivailoParticipant]

Hi newuser,

Here is a tree grid demo with your code.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts