This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 2 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Tooltip for aggregate Row #72007

    Coder
    Participant

    Hi how to add tooltip for aggregate row cells.

    • This topic was modified 4 years, 7 months ago by  Coder.
    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/

    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

    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/

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

You must be logged in to reply to this topic.