jQWidgets Forums

jQuery UI Widgets Forums General Discussions Plugins AngularJS jqxToolip for jqxGrid column header

This topic contains 8 replies, has 2 voices, and was last updated by  badera 10 years, 7 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • jqxToolip for jqxGrid column header #64661

    badera
    Participant

    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,
    – badera

    jqxToolip for jqxGrid column header #64663

    Peter Stoev
    Keymaster

    Hello badera,

    To display column tooltips in jqxGrid, look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/columntooltips.htm?arctic

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    jqxToolip for jqxGrid column header #64670

    badera
    Participant

    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!

    jqxToolip for jqxGrid column header #64677

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    jqxToolip for jqxGrid column header #64683

    badera
    Participant

    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!
    – badera

    jqxToolip for jqxGrid column header #64770

    badera
    Participant

    Dear 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!
    – badera

    jqxToolip for jqxGrid column header #64946

    badera
    Participant

    I kindly ask again to get an answer on this, since I have no idea, what I am doing wrong. Thanks in advance!
    – badera

    jqxToolip for jqxGrid column header #64959

    Peter Stoev
    Keymaster

    Hi badera,

    As in the demo which I pointed you out, you should use “rendered”, not “renderer”.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    jqxToolip for jqxGrid column header #64979

    badera
    Participant

    Thanks Peter, pointing me to this mistake! Now it works.
    – badera

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

You must be logged in to reply to this topic.