jQWidgets Forums
jQuery UI Widgets › Forums › General Discussions › Plugins › AngularJS › jqxToolip for jqxGrid column header
Tagged: jqxTooltip angularjs jxqgrid
This topic contains 8 replies, has 2 voices, and was last updated by badera 10 years, 7 months ago.
-
Author
-
Dear all
I like to create tooltips for column headers like we have in example .
However, this seems not to work for jqx-grid with angularjs.I I look at the example abouve an take the tooltiprenderer function:
var tooltiprenderer = function (element) { $(element).jqxTooltip({position: 'mouse', content: $(element).text()}); }
and place this in a grid configured with angularjs, it does not work.
How can I get this running? – I know the angularjs example for jqxTooltip; however, the idea of this example seems not adaptable to this scenario (I cannot define a jqx-tooltip directive for the column headers)…
Thanks a lot for an info, how to get this working.
Best regards,
– baderaHello badera,
To display column tooltips in jqxGrid, look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/columntooltips.htm?arctic
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Dear Peter
I know this example and I ment this one in my post abouve (I posted the link, however, i just see that is has not been posted).
As I wrote abouve, this does not work, if the grid is created in angularjs environment!Hello badera,
It does not matter whether the Grid is in AngularJS or not. The API is the same and the widget is the same. Check whether all required JS references are added on your page.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Dear Peter
OK, I tried to use your example at http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/grid-with-jqx-settings.htm and integrate it here. -> indeed, this works.
But if I use a dataAdapter and the jqxGrid, it seems to behave different:
Please try this:<!DOCTYPE html> <html ng-app="demoApp"> <head> <title id="Description">jqx-grid with angularjs and columns renderer</title> <link rel="stylesheet" type="text/css" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css"/> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/angular.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { var adapterSource = { datatype: 'json', datafields: [ {name: 'colA', type: 'string'}, {name: 'colB', type: 'string'}, {name: 'colC', type: 'string'} ], id: 'id', localdata: [{colA: 'aaa', colB: 'bbb', colC: 'ccc'}] }; var dataAdapter = new $.jqx.dataAdapter(adapterSource); var tooltiprenderer = function (element) { $(element).jqxTooltip({position: 'mouse', content: $(element).text() }); } $scope.grid = { source: dataAdapter, columns: [ {text: 'Col 1', dataField: 'colA', width: '33%', renderer: tooltiprenderer}, {text: 'Col 2', dataField: 'colB', width: '33%', renderer: tooltiprenderer}, {text: 'Col 3', dataField: 'colC', width: '34%', renderer: tooltiprenderer} ] } }) ; </script> </head> <body> <div ng-controller="demoController"> <jqx-grid jqx-create="grid" jqx-settings="grid"></jqx-grid> </div> </body> </html>
This does not work. I get a JavaScript error saying ‘Error: Invalid Selector – Col 1! Please, check whether the used ID or CSS Class name is correct.’
What is wrong?
Thanks in advance for your help!
– baderaDear Peter
I would be happy to get a feedback! Please copy the code snipped in the previous post and try it out. It does not work, as it should!
Thanks!
– baderaI kindly ask again to get an answer on this, since I have no idea, what I am doing wrong. Thanks in advance!
– baderaHi badera,
As in the demo which I pointed you out, you should use “rendered”, not “renderer”.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Thanks Peter, pointing me to this mistake! Now it works.
– badera -
AuthorPosts
You must be logged in to reply to this topic.