jQWidgets Forums

Tagged: Excel comment, grid, jqxgrid, red arrow

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

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

Author

Need css for cell like microsoft excel comment highlight Posts

September 10, 2014 at 4:55 am Need css for cell like microsoft excel comment highlight #59349

Participant

Hi Jqwidget team,
I am using jqxgrid my requirement is to provide comment to each cell in grid like Microsoft Excel comment insert,update and delete.If user change the value in cell they have to write comment to cell why they changed the value for particular cell.I have done the comment its working fine but for showing the commented cell i am using border to highlight but i require CSS like Microsoft excel comment highlight for cell (right side top corner small red arrow)
Right now i am using css in cell render like this
if(value==0){
return ‘<div id=”colorEnable’+rowid+”+(colIndex)+'” style=”text-align:right;width:93%;height:73%;border:solid #FF9900;”> </div>’;
}else{
return ‘<div id=”colorEnable’+rowid+”+(colIndex)+'” style=”text-align:right;width:93%;height:73%;border:solid #FF9900;font-family: Arial;font-size: 12px;”>’ +parseFloat(value).toFixed(2)+ ‘</div>’;
}

September 10, 2014 at 7:10 am Need css for cell like microsoft excel comment highlight #59360

Nadezhda

Participant

Hello anandbabu,

Please, find below an example which shows how to display red arrow in right side top corner of the cell in jqxGrid:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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="../../scripts/demos.js"></script>
    <style>
        #triangle-topright {
            width: 0;
            height: 0;
            position: absolute;
            border-top: 5px solid red;
            border-left: 5px solid transparent;
            right: 0px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";
            // 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
            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #FF0000;">' + value + '</span>' + '<span id="triangle-topright"></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) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { 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' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

February 5, 2015 at 3:49 pm Need css for cell like microsoft excel comment highlight #66632

Cilex

Participant

Excellent, many thanks !

Fred

Author

Posts

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

You must be logged in to reply to this topic.