jQWidgets Forums

Tagged: aggregate Rows, aggregates, angular grid, Angular tooltip, Cell, grid, jquery grid, jQuery Tooltip, jqxGrid ;, jqxTooltip, Tooltip

This topic contains 3 replies, has 3 voices, and was last updated by Dimitar 7 years, 4 months ago.

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

Author

Tooltip for aggregate Row Posts

June 4, 2015 at 7:55 am Tooltip for aggregate Row #72007

Coder

Participant

Hi how to add tooltip for aggregate row cells.

June 4, 2015 at 11:28 am Tooltip for aggregate Row #72033

Dimitar

Participant

Hi Jaya,

Here is an example in which a tooltip has been added to the last column’s aggregates cell:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200);

            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                showstatusbar: true,
                statusbarheight: 50,
                editable: true,
                showaggregates: true,
                selectionmode: 'singlecell',
                ready: function () {
                    var aggregatesRow = $('#statusrowjqxgrid');
                    var lastAggregateCell = aggregatesRow.children().eq(5);
                    lastAggregateCell.jqxTooltip({ content: 'Aggregates tooltip.', position: 'mouse' });
                },
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
                  { text: 'Product', datafield: 'productname', width: 170,
                      aggregates: ['count',
                          { 'Cappuccino Items':
                            function (aggregatedValue, currentValue) {
                                if (currentValue == "Cappuccino") {
                                    return aggregatedValue + 1;
                                }

                                return aggregatedValue;
                            }
                          }
                      ]
                  },
                  { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
                      aggregates: [{ 'In Stock':
                          function (aggregatedValue, currentValue) {
                              if (currentValue) {
                                  return aggregatedValue + 1;
                              }

                              return aggregatedValue;
                          }
                      },
                      { 'Not In Stock':
                          function (aggregatedValue, currentValue) {
                              if (!currentValue) {
                                  return aggregatedValue + 1;
                              }

                              return aggregatedValue;
                          }
                      }
                     ]
                  },
                  { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],
                      aggregatesrenderer: function (aggregates) {
                          var renderstring = "";
                          $.each(aggregates, function (key, value) {
                              var name = key == 'min' ? 'Min' : 'Max';
                              renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value + '</div>';
                          });
                          return renderstring;
                      }
                  },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 26, 2017 at 7:39 am Tooltip for aggregate Row #97549

internaut19

Participant

Hi Dimitar,

I am trying to implement the above idea on a grid that has no initial data and the information is added via the everpresentrow. When the grid is initialized the tooltip is displayed on hover, if data is added the tooltip does not show up anymore. How to fix this?

I prepared an example http://jsfiddle.net/xhekgmab/33/.

Thansk,
Chris

November 27, 2017 at 6:07 am Tooltip for aggregate Row #97552

Dimitar

Participant

Hi Chris,

Please try this updated solution: http://jsfiddle.net/Dimitar_jQWidgets/8jc05p4h/1/. We hope it is helpful to you.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.