jQWidgets Forums

Tagged: cellhover, column, custom, event, grid, jqxgrid, jqxTooltip, title, Tooltip

This topic contains 12 replies, has 4 voices, and was last updated by Dimitar 11 years, 2 months ago.

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

Author

tooltip styling for a grid column Posts

February 10, 2014 at 3:26 pm tooltip styling for a grid column #49268

mallepaddi

Participant

Is there a way changing style of grid tool tip for a column from standard to custom ?

Thanks

February 11, 2014 at 6:55 am tooltip styling for a grid column #49292

Peter Stoev

Keymaster

Hi mallepaddi,

The tooltips used in the Grid are set through the “title” attribute i.e the Style depends only on the browser. Unfortunately, we are not aware whether the browser’s titles can be styled.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 11, 2014 at 7:53 am tooltip styling for a grid column #49301

mallepaddi

Participant

that’s fine, but please help how do we show custom tooltip for a column in Grid, rather then showing value “title” attribute.

Thanks

February 11, 2014 at 7:59 am tooltip styling for a grid column #49303

Dimitar

Participant

Hello mallepaddi,

Here is some input from me – there is a workaround on the matter, which you can find in the forum topic Grid tooltip (the last example on the page).

Best Regards,
Dimitar

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

February 12, 2014 at 2:36 am tooltip styling for a grid column #49337

mallepaddi

Participant

cellhover: function (element, pageX, pageY)
{
// update tooltip.
$(“#jqxgrid”).jqxTooltip({ content: element.innerHTML });
// open tooltip.
$(“#jqxgrid”).jqxTooltip(‘open’, pageX + 15, pageY + 15);
},

from above code .. how do i get actual content of “cell”, i need to edit for showing it as a tooltip and any idea on applying styling and need to show tool tip on certain conditions ?

and “cellhover” is a function of JQWIDGETS ? i don;t find any documentation related to this?

Thanks

February 12, 2014 at 7:22 am tooltip styling for a grid column #49354

Dimitar

Participant

Hi mallepaddi,

In the following snippet is shown how to get the displayed cell value (cellValue) and style it (tooltipContent):

cellhover: function (element, pageX, pageY) {
    // update tooltip.
    var cellValue = $(element.innerHTML).text();
    var tooltipContent = "<div style='color: Green;'>" + cellValue + "</div>";
    $("#jqxgrid").jqxTooltip({ content: tooltipContent });
    // open tooltip.
    $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15);
},

You can put the jqxTooltip content setting and open method call in an if statement to show the tooltip conditionally.

The cellhover callback function is jqxGrid-specific. We will include it in the API Documentation as soon as possible.

Best Regards,
Dimitar

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

February 12, 2014 at 7:46 am tooltip styling for a grid column #49363

mallepaddi

Participant

Hi
Great help ..

Custom tooltip working .. but need further help on showing tool tip conditionally, help me how to code it.

Here is the scenario :

– We have quantity field displaying in grid (input editor)
– some times quantity field turns to red color if the quantity entered is exceeding available quantity, this column is not displaying in grid but part of var dataFields = [ … ]

Now i need to show conditional tool tip only for quantity fields which are in red color (entered qty > available qty) .. tip should be like “Quantity entered exceeded”

how to use “open” call to do this ?

Thanks

February 13, 2014 at 11:58 am tooltip styling for a grid column #49469

mallepaddi

Participant

HI
Any help ?

Thanks

February 13, 2014 at 1:29 pm tooltip styling for a grid column #49476

dana

Participant

I am trying to solve this same exact problem. Where does the “cellhover” method belong so that I can use it?

February 14, 2014 at 2:22 am tooltip styling for a grid column #49495

mallepaddi

Participant

Thanks for helping ..

$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
selectionMode: ‘singlecell’,
columnsresize: true,
// trigger cell hover.
cellhover: function (element, pageX, pageY)
{
// update tooltip.
$(“#jqxgrid”).jqxTooltip({ content: element.innerHTML });
// open tooltip.
$(“#jqxgrid”).jqxTooltip(‘open’, pageX + 15, pageY + 15);
},
columns: [
{ text: ‘Name’, dataField: ‘firstname’, width: 100 },
{ text: ‘Last Name’, dataField: ‘lastname’, width: 100 },
{ text: ‘Product’, editable: false, dataField: ‘productname’, width: 180 },
{ text: ‘Quantity’, dataField: ‘quantity’, width: 80, cellsalign: ‘right’ },
{ text: ‘Unit Price’, dataField: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total’, dataField: ‘total’, cellsalign: ‘right’, minwidth: 100, cellsformat: ‘c2’ }
]
});

Thanks

February 14, 2014 at 10:26 am tooltip styling for a grid column #49520

Dimitar

Participant

Hello dana and mallepaddi,

Here is an example, based on the demo Default Functionality.

<!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.10.2.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";

            var productNameUpdate = false;

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url,
                updaterow: function (rowid, newdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    if (productNameUpdate == true) {
                        commit(true);
                    };
                }
            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            var availableQuantity = 20;

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                cellhover: function (element, pageX, pageY) {
                    var cell = $('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY);
                    if (cell.column == "QuantityPerUnit") {
                        // update tooltip.
                        var cellValue = cell.value;
                        if (cellValue > availableQuantity) {
                            var tooltipContent = "<div style='color: Red;'>Quantity entered exceeded</div>";
                            $("#jqxgrid").jqxTooltip({ content: tooltipContent });
                            // open tooltip.
                            $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15);
                        } else {
                            $("#jqxgrid").jqxTooltip('close');
                        };
                    };
                },
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });

            $("#jqxgrid").on('cellendedit', function (event) {
                var column = args.datafield;
                if (column == "ProductName") {
                    productNameUpdate = true;
                } else {
                    productNameUpdate = false;
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Note that when available quantity is loaded from the data source, the if clause should be as follows:

if (cellValue > dataAdapter.records[cell.row].availableQuantity) {

where availableQuantity is your available quantity datafield.

Best Regards,
Dimitar

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

February 14, 2014 at 1:24 pm tooltip styling for a grid column #49529

mallepaddi

Participant

fantastic,

but could you please know where we can documentation on available properties / methods available for following :

cell, event, element, row etc.

I haven’t found under documentation section, documenting those would help many of us.

Thanks

February 17, 2014 at 6:20 am tooltip styling for a grid column #49596

Dimitar

Participant

Hi mallepaddi,

We will add the cellhover callback function to the documentation as soon as possible. As for event, each event argument is specified in the event’s entry in the API Documentation.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.