Tooltip in hover of column header cell at dynamically bind grid

[Darshak GajjarParticipant]

Hi JQuery Team,

I Want to display Column Description in tooltip of hover of Grid Header cell.
i was bind grid dynamically and No. of columns each times different.I dnt have fix column.

`
var GridData = reportData.GridData;

var datafild = ‘{“datafild”: [‘ + GridData.datafield + ‘]}’;
var columns = ‘{“columns”: [‘ + GridData.columns + ‘]}’;
var rows = ‘{“rows”: [‘ + GridData.rows + ‘]}’;

datafild = datafild.substring(0, datafild.length – 3) + “]}”;
columns = columns.substring(0, columns.length – 3) + “]}”;
rows = rows.substring(0, rows.length – 3) + “]}”;

var df = $.parseJSON(datafild);
var clm = $.parseJSON(columns);
var rw = $.parseJSON(rows);

for (var i = 0; i < rw.rows.length; i++) {
if (!(rw.rows[i].Geography == “<b>Geography Selection</b>” || rw.rows[i].Geography == “<b>Geography Breakdown</b>”)) {
rw.rows[i].Linktodashboard = “<div style=’width: 98%; text-align: center;’><u>Click Here</u></div>”;
}
}

var source =
{
datatype: “json”,
datafields: df.datafield,
localdata: rw.rows
};

var dataAdapter = new $.jqx.dataAdapter(source);
var gridWidth;
if ($(“.modal-dialog”).width() < 600)
gridWidth = $(window).width() – 35;
else
gridWidth = $(“.modal-dialog”).width() – 30;
$(“#jqxInEligibleRebateStatus”).jqxGrid(
{
width: gridWidth,
height: 500,
source: dataAdapter,
theme: theme,
pageable: true,
pagesize: 15,
filterable: true,
showfilterrow: true,
sortable: true,
columnsresize: true,
columnsmenu: false,
autoshowfiltericon: true,
enabletooltips: true,
columns: clm.columns,
ready: function () {
StopLoading();
}
});

GridData.columns Data something like this..

{ “text”: “ID”, “datafield”: “ID”,”width”: 150 },{ “text”: “VIPProgram”, “datafield”: “VIPProgram”,”width”: 150 },{ “text”: “Geography”, “datafield”: “Geography”,”width”: 150 },{ “text”: “TheatreName”, “datafield”: “TheatreName”,”width”: 150 },{ “text”: “IneligibleBookings”, “datafield”: “IneligibleBookings”,”width”: 150 },{ “text”: “ReasonCategory1”, “datafield”: “ReasonCategory1″,”width”: 150 },{ “text”: “ReasonRebate1”, “datafield”: “ReasonRebate1″,”width”: 150 },{ “text”: “ReasonCategory2”, “datafield”: “ReasonCategory2″,”width”: 150 },{ “text”: “ReasonRebate2”, “datafield”: “ReasonRebate2″,”width”: 150 },{ “text”: “ReasonCategory3”, “datafield”: “ReasonCategory3″,”width”: 150 },{ “text”: “ReasonRebate3”, “datafield”: “ReasonRebate3″,”width”: 150 },{ “text”: “ReasonCategory4”, “datafield”: “ReasonCategory4″,”width”: 150 },{ “text”: “ReasonRebate4”, “datafield”: “ReasonRebate4″,”width”: 150 },{ “text”: “ReasonCategory5”, “datafield”: “ReasonCategory5″,”width”: 150 },{ “text”: “ReasonRebate5”, “datafield”: “ReasonRebate5″,”width”: 150 },{ “text”: “ReasonCategory6”, “datafield”: “ReasonCategory6″,”width”: 150 },{ “text”: “ReasonRebate6”, “datafield”: “ReasonRebate6″,”width”: 150 },{ “text”: “ReasonCategory7”, “datafield”: “ReasonCategory7″,”width”: 150 },{ “text”: “ReasonRebate7”, “datafield”: “ReasonRebate7″,”width”: 150 },{ “text”: “ReasonCategory8”, “datafield”: “ReasonCategory8″,”width”: 150 },{ “text”: “ReasonRebate8”, “datafield”: “ReasonRebate8″,”width”: 150 },{ “text”: “TotalPotentialRebate”, “datafield”: “TotalPotentialRebate”,”width”: 150 }

[HristoParticipant]

Hello Darshak Gajjar,

I would like to suggest you look at this forum topic:
http://www.jqwidgets.com/community/topic/column-headers-tooltip/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Darshak GajjarParticipant]

Thank Hristo.

[Author]

Posts