How can we use <select> object in grid with out over laping the header

Hi, i am using <select> object in grid, it is over lapping on header when i am scrolling down.Where i have set for hide with out over laping on header

mahendra

January 3,

Try it in FF and you might find that it works correctly. IE has a huge bug with SELECT boxes. It ALWAYS outs it on top of everything and does not adhere to parent borders. I have not found a work around for it yet except to account for the overlap with my design.

Jim Hunter

January 4,

Have you heard of the IFRAME SHIM technique? It may help you in this situation. If you do a google on 'iframe shim' you should find a lot of examples.

Here is where I first heard of it:
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx

And here's an example:
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx

If this helps can I get a discounted commercial license? :)

Jack Ratcliff

January 21,

This is an interesting technique but I don't think it is a solution to the problem of putting a select inside the grid. IE is still going to display it wrong and trying to add IFrames in and around the grid would be very cumbersome. I just wish IE would get fixed. As far as I know this behavior does not show in other browsers. There is also another huge bug in IE where all Flash annimation stays on top. I had windows that pop up and Flash annimation from the lower page rode above the pop up window. We had to exclude Flash from our allowable page content.

Jim Hunter

January 21,

This should be fixed in IE7 :-)

Seriously, the technique referred by Jack works, but it requires some adjustment. The original method is intended for static layout so everything is fine until you scroll the div containing the select box. Then again it will appear above everything including the iframe (WTF!!!).

So the solution is to repaint iframe in onscroll event handler :-(

Here is the patch for v. 1.0 which adds iframe below column headers

<style>
    .active-select-fix {
        position: absolute;
        width: 100%;
        height: 20px;
        border: none;
        z-index: 1;
        filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
    }
</style>

<script>
Active.Controls.Grid.patch = function(){

    var obj = this.prototype;

    var iframe = new Active.System.HTML();
    iframe.setTag("iframe");
    iframe.setAttribute("src", "javascript:'';");
    iframe.setAttribute("frameborder", "0")
    iframe.setAttribute("scrolling", "no")
    iframe.setClass("select", "fix");

    if (!obj.$browser) {

        var scroll = obj.getTemplate("layout").getContent("scrollbars").getEvent("onscroll");

        obj.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", function(){
            scroll.call(this);
            this.$owner.getContent("iframe").refreshClasses();
        });

        obj.setContent("iframe", iframe);
    }
};

Active.Controls.Grid.patch();
</script>

And here is the complete example -

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="../../runtime/styles/classic/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; border: 1px solid #ccc;}

    .active-select-fix {
        position: absolute;
        width: 100%;
        height: 20px;
        border: none;
        z-index: 1;
        filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
    }

</style>

    <!-- grid data -->
    <script>
        var myData = [
            ["MSFT","<select><option>1</option></select>", "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", "Adobe Systems Incorporate", "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>


    <script>

Active.Controls.Grid.patch = function(){

    var obj = this.prototype;

    var iframe = new Active.System.HTML();
    iframe.setTag("iframe");
    iframe.setAttribute("src", "javascript:'';");
    iframe.setAttribute("frameborder", "0")
    iframe.setAttribute("scrolling", "no")
    iframe.setClass("select", "fix");

    if (!obj.$browser) {

        var scroll = obj.getTemplate("layout").getContent("scrollbars").getEvent("onscroll");

        obj.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", function(){
            scroll.call(this);
            this.$owner.getContent("iframe").refreshClasses();
        });

        obj.setContent("iframe", iframe);
    }
};

Active.Controls.Grid.patch();

    </script>


</head>
<body>
    <script>

    //	create ActiveWidgets Grid javascript object
    var obj = new Active.Controls.Grid;

    //	set number of rows/columns
    obj.setRowProperty("count", 20);
    obj.setColumnProperty("count", 5);

    //	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("0");
    obj.setColumnHeaderHeight("20px");

    //	set click action handler
    obj.setAction("click", function(src){window.status = src.getItemProperty("text")});

    //	write grid html to the page
    document.write(obj);

    </script>
</body>
</html>

Alex (ActiveWidgets)

January 22,

Jim, about ur flash problem, try adding this parameter to the flash embedding code

mode=opaque

This will ensure that all dhtml layers stay above the flash.

blaxxun

June 19,

This topic is archived.

How can we use <select> object in grid with out over laping the header

See also:

Search

New Data Grid

Version 2