jQuery UI Widgets Forums Grid tooltip styling for a grid column

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

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • tooltip styling for a grid column #49268

    mallepaddi
    Participant

    Hi

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

    Thanks

    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

    tooltip styling for a grid column #49301

    mallepaddi
    Participant

    HI

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

    Thanks

    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/

    tooltip styling for a grid column #49337

    mallepaddi
    Participant

    HI

    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

    • This reply was modified 8 years, 12 months ago by  mallepaddi.
    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/

    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

    Thanks

    tooltip styling for a grid column #49469

    mallepaddi
    Participant

    HI
    Any help ?

    Thanks

    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?

    tooltip styling for a grid column #49495

    mallepaddi
    Participant

    HI

    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

    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/

    tooltip styling for a grid column #49529

    mallepaddi
    Participant

    Hi

    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

    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/

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

You must be logged in to reply to this topic.