jQuery UI Widgets › Forums › Grid › Grid Custom Column – Popup

Tagged: , , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Grid Custom Column – Popup Posts
  • October 7, 2014 at 5:57 am Grid Custom Column – Popup #60743

    phaneendravvk
    Participant

    Hi Team,
    I’m currently working with Grid control.
    I have a custom column with hyperlink defined. I need to popup a window once user moves over that hyperlinks and show the relevant information
    and when user moves out of that link I need to close that popup.

    Kindly assist me in this regards.

    Thanks
    Phaneendra

    October 8, 2014 at 7:51 am Grid Custom Column – Popup #60793

    Dimitar
    Participant

    Hello Phaneendra,

    Here is an example. We hope it is helpful to you.

    <!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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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 () {
            $(document).mousemove(function (e) {
                window.x = e.pageX;
                window.y = e.pageY;
            });

            // prepare the data
            var url = "../sampledata/feed.xml";

            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'title', type: 'string' },
                    { name: 'link', type: 'string' },
                    { name: 'pubDate', type: 'date' },
                    { name: 'creator', map: 'dc\\:creator', type: 'string' },
               ],
                root: "channel",
                record: "item",
                url: url
            };

            var linkrenderer = function (row, column, value) {
                if (value.indexOf('#') != -1) {
                    value = value.substring(0, value.indexOf('#'));
                }
                value = $.trim(value);
                var html = "<a href='" + value + "' target='_blank' onmouseover='openTooltip(" + row + ")' onmouseout='closeTooltip()'>" + value + "</a>";
                return html;
            }
            var dataAdapter = new $.jqx.dataAdapter(source);

            // Create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'Link', datafield: 'link', width: 550, cellsrenderer: linkrenderer },
                  { text: 'Title', datafield: 'title', width: 200 },
                  { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
                  { text: 'Creator', datafield: 'creator', width: 200 }
               ]
            });

            $("#jqxgrid").jqxTooltip({ trigger: "none" });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
            <script type="text/javascript">
                function openTooltip(row) {
                    $("#jqxgrid").jqxTooltip({ content: "Row: " + row });
                    $("#jqxgrid").jqxTooltip("open", x + 10, y + 10);
                }

                function closeTooltip() {
                    $("#jqxgrid").jqxTooltip("close");
                }
            </script>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.