jQWidgets Forums

Tagged: grid column tooltip, jqwidgets grid tooltip

This topic contains 9 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 1 month ago.

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

Author

cellhover for header and image in place of header text Posts

May 7, 2014 at 9:32 am cellhover for header and image in place of header text #54099

May 7, 2014 at 3:04 pm cellhover for header and image in place of header text #54119

Peter Stoev

Keymaster

Hi Nagoor,

Please, look at this sample: http://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/columntooltips.htm which demonstrates how to apply Tooltips to Column Headers.

Best Regards,
Peter Stoev

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

May 8, 2014 at 1:29 pm cellhover for header and image in place of header text #54202

Nagoor

Participant

hi peter,

thank you very much, it solved half of my problem. what about image in place of text i.e, image as coloumn header.

i have another small doubt. hide column property is not working in my project.

$(“#jqxgrid”).jqxGrid(‘hidecolumn’,’wellName’);

i am calling this right after grid definition in ready function. i tried it calling in another function which is out of ready function. where did i go wrong. pls help me..

Thanks in Advance..

May 8, 2014 at 1:54 pm cellhover for header and image in place of header text #54207

Peter Stoev

Keymaster

Hi Nagoor,

1. “hidecolumn” expects a datafield, not “text”. Example: http://jsfiddle.net/jqwidgets/5YtCm/
2. Each column’s rendering can be overriden by using the column’s renderer callback function which should return HTML String as result.

Best Regards,
Peter Stoev

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

May 8, 2014 at 2:17 pm cellhover for header and image in place of header text #54212

Nagoor

Participant

hi peter,

$(“#jqxgrid”).jqxGrid(‘hidecolumn’,’wellName’);

here wellName is datafield of my required coloumn.

{ text: ‘Well Name’, datafield: ‘wellName’, editable: false,hideable: true, filtertype : ‘textbox’, width: 120 ,rendered: tooltiprenderer }

Thanks in Advance

May 8, 2014 at 2:30 pm cellhover for header and image in place of header text #54213

Peter Stoev

Keymaster

Hi Nagoor,

So make sure the Grid is initialized when you call “hidecolumn”. Otherwise, it will work fine.

Best Regards,
Peter Stoev

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

May 8, 2014 at 2:58 pm cellhover for header and image in place of header text #54215

Nagoor

Participant

hi peter,

thanks again. i’ll check with that. and how about inage as coloumn header. can we do it using renderer call back. if so how to return value. pls help

Thanks in Advance

May 8, 2014 at 6:51 pm cellhover for header and image in place of header text #54223

Peter Stoev

Keymaster

Hi Nagoor,

Here’s a sample for rendering column headers.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to change the Center the Grid Columns and Cells.</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.0.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.selection.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 50; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = new Number(price * quantity).toFixed(2);
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var cellsrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }
            var columnrenderer = function (value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', dataField: 'firstname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Last Name', dataField: 'lastname', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 100 },
                  { text: 'Product', dataField: 'productname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 180 },
                  { text: 'Quantity', dataField: 'quantity', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 80 },
                  { text: 'Unit Price', dataField: 'price', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 90},
                  { text: 'Total', dataField: 'total', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 90}
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

May 13, 2014 at 7:38 am cellhover for header and image in place of header text #54382

Nagoor

Participant

hi peter,

Hide coloumn is working only when it is called in an event like.. button click, but its not working on load of page. if i try to hide a coloumn based on condition in ready function , its not working.. if i do the same on click of button its working fine. pls help..

Thanks & Regards

May 13, 2014 at 8:28 am cellhover for header and image in place of header text #54385

Peter Stoev

Keymaster

Hi Nagoor,

“hidecolumn” works when you use it correctly i.e when the Grid is Loaded, not when your page is loaded i.e you should either call it in bindingcomplete event handler or set the Grid’s ready function and call it there or just make sure that your Grid is loaded and rendered, because you cannot hide a column of something which is not yet rendered.

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.