How to add href title to cell link for message tip usage?

In the following thread a solution was provided how to link single cells to URLs.

http://www.activewidgets.com/javascript.forum.3922.4/link-in-single-cells.html

I am now looking into a way to add the title="some title" attribute to the linked cells in order to get the little yellow messages displayed (message tip).

Any idea how ActiveWidgets grid can be asked to do that?

Andreas

April 28,

I do it this way:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="../../runtime/lib/grid.js"></script>
    <!-- grid format -->
    <style>
        .active-controls-grid {height: 100%; font: menu;}
        .active-column-0 {width:  80px;}
        .active-column-1 {width: 200px;}
        .active-column-2 {text-align: right;}
        .active-column-3 {text-align: right;}
        .active-column-4 {text-align: right;}
        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}
    </style>
    <!-- grid data -->
    <script>
        var myData = [
            ["MSFT","<a href='http://www.microsoft.com' title='Click to go to MS web site'>Microsoft Corporation</a>", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
            ["ADBE", "<a title='This company provides good document display software'>Adobe Systems Incorporate</a>", "9,533.050", "1,230.817", "3341"],
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
        ];
        var myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
        ];
    </script>
</head>
<body>
    <!-- Set color for active row highlighting -->
    <style>.active-row-highlight,.active-row-highlight .active-row-cell{background-color:#FEE999}</style>
    <script>
    //	create ActiveWidgets Grid javascript object
    var obj = new Active.Controls.Grid;
    //	set number of rows/columns
    obj.setRowProperty("count",myData.length);
    obj.setColumnProperty("count",myColumns.length);
    //	provide cells and headers text
    obj.setDataProperty("text",function(i,j){return myData[i][j]});
    obj.setColumnProperty("text",function(i){return myColumns[i]});
    //	set headers width/height
    obj.setRowHeaderWidth("28px");
    obj.setColumnHeaderHeight("20px");
    //	set click action handler
    obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
    //  add alternate line shading
    var alternate=function(){return this.getRowProperty("order")%2?"#EEEEEE":"white";}
    var row=new Active.Templates.Row;
    row.setStyle("background",alternate);
    obj.setTemplate("row",row);
    //  add active row highlighting
    row.setEvent("onmouseover","mouseover(this,'active-row-highlight')");
    row.setEvent("onmouseout","mouseout(this,'active-row-highlight')");obj.setTemplate("row",row);
    // prepare text to value conversion functions
    function string(text){return text};
    function number1(text){return Number(text)};
    function number2(text){return Number(text.replace(/,/g, ""))};
    // arrange them into array according to column types
    var toValue=[string,string,number2,number2,number1];
    // set data value to converted text and remove tag data from values so sort works OK
    obj.setDataProperty("value", function(i,j){return toValue[j](myData[i][j].replace(/<.+?>/g,""));});
    //	write grid html to the page
    document.write(obj);
    </script>
</body>
</html>

Hover over "Adobe Systems" to see the 'title'. There needs to be a little extra code to remove the tags so sorting still works, but otherwise this works well for me.

But maybe I've got hold of the wrong end of the stick?

Roy Cosway

April 29,

I do it by just adding extra columns to the data file (or inline) and simply calling those columns in the tooltip routine (but not displaying them in the Grid table).

// Get data from 4th & 5th column (#3 &4)
obj.defineDataProperty("tooltip", function(i, j){return "First Line: " + myData[i][3] + "\nNext Line: " + myData[i][4]});

brians

April 29,

This topic is archived.

How to add href title to cell link for message tip usage?

See also:

Search

New Data Grid

Version 2