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

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>

Thanks Alex :D

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

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

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.

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.

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

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

Eish, haikona :)

Ah, another South African developer.

Forum search