How does templates work?

I find this grid to be the best out there thus far, and unfortunately it seems I have to code (or try to) my own features regarding filter/searching a grid. Especially on multiple columns.

Idea is to add a right-click context menu, when the search/filter is invoked, the whole grid clears, a new line appears with text boxes for every column and a search button at the end. The user will then be able to type in whatever they wish to filter/search on and click "search" where it will then filter through the grid and display all relevant data.

Now, this is going to be tricky enough. But I want to do it properly. How would I write a template for this? That way I could help by posting code here for review and others may expand on the idea?

Thanks

AcidRaZor

February 15,

I am not sure I have proper solution - but here is at least quick start
(creates additional row of input boxes under the column headers):

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;border:none} </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 {width: 100px; text-align: right;}
        .active-column-3 {width: 100px; text-align: right;}
        .active-column-4 {width: 100px; text-align: right;}

        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}



        .active-scroll-top {
            padding-bottom: 20px;
            background: #ebeadb;
        }

        .active-top-boxes {
            overflow-y: hidden;
            height: 20px;
            margin-bottom: -20px;
        }

        .active-top-boxes input {
            height: 100%;
            margin-top: -1px;
        }


    </style>

    <!-- grid data -->
    <script>
        var myData = [
            ["MSFT","Microsoft Corporation", "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>
</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("28px");
    obj.setColumnHeaderHeight("40px");


    //	create search boxes
    function inputs(){
        var s = "<div class='active-top-boxes'>";
        s += "<input class='active-column-0'>";
        s += "<input class='active-column-1'>";
        s += "<input class='active-column-2'>";
        s += "<input class='active-column-3'>";
        s += "<input class='active-column-4'>";
        s += "</div>";
        return s;
    }

    var layout = obj.getLayoutTemplate();
    var headers = layout.getContent("top/html");

    //	clear existing content
    layout.setContent("top/html", "");
    layout.setContent("top/fill", "");

    //	insert back in the correct order
    layout.setContent("top/row1", headers);
    layout.setContent("top/row2", inputs);

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

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

Alex (ActiveWidgets)

February 15,

Thanks Alex :D

How do I go about creating my own template? ;)

February 16,

Hi Alex,

I've used your example combined with my right-click context menu and can successfully (dynamically) add or remove the text boxes on row 2 of the header.

So far so good. However, I've noticed that when I remove the row (I just use setContent("top/row2","") to set it to nothing, and revert to the original row height) and then ADD a new row, it overwrites the column headers already there, instead of adding to row 2.

I'm struggling with that atm and will post an update as soon as I have one. But so long, maybe you could shed some light on this faster than I could figure it out. :D

AcidRaZor

February 16,

Please review the remove code, I seems to be working as I have intended it to (removing the 2nd row with text boxes)

function removeInput() {
var layout = obj.getLayoutTemplate();
var headers = layout.getContent("top/row1");

layout.setContent("top/html",headers);
layout.setContent("top/fill", "");
layout.setContent("top/row1","");
layout.setContent("top/row2","");

obj.setColumnHeaderHeight("20px");
obj.refresh();
}

I don't know how to get the default ColumnHeaderHeight. That would be helpful. Also not sure if all the setContent's are nessacary.

Thanks for the help thus far.

AcidRaZor

February 16,

Textbox issue :

It seems you're unable to highlight text within the textbox as with your code. Also, the text (within the input box) alignment seems to take the properties of the defined column's text. This could be the potential "bug" in the selection of text (click drag or ctrl-a)

Will post more if I find a fix.

AcidRaZor

February 16,

Haha, I'm being stupid. Only realized the box class was overridden by the column classes each time on the input tag :)

AcidRaZor

February 16,

BTW, the select all (click drag/ctrl-a) still doesn't work.

Eish, haikona :)

AcidRaZor

February 16,

Ah, another South African developer.

Neil Craig

November 9,

This topic is archived.

How does templates work?

See also:

Search

New Data Grid

Version 2