ActiveWidgets • Filtering rows example

Here is a simple way of filtering rows (in 2.0b1):

function filter(){



    var i, rows = [], max = obj.getRowCount();



    for (i=0; i<max; i++){

        if (obj.getCellValue(4, i) < 20000){

            rows.push(i);

        }

    }



    obj.setRowCount(rows.length);

    obj.setRowIndices(rows);

}

The full example below is based on XML data island but filter should work exactly the same with other data sources

<html>

<head>

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



    <!-- ActiveWidgets stylesheet and scripts -->

    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>

    <script src="../../runtime/lib/aw.js"></script>



    <!-- grid format -->

    <style>

        .aw-grid-control {height: 150px; width: 100%; font: menu;}



        .aw-column-0 {width:  80px;}

        .aw-column-1 {width: 200px; background-color: threedlightshadow;}

        .aw-column-2 {text-align: right;}

        .aw-column-3 {text-align: right;}

        .aw-column-4 {text-align: right;}



        .aw-grid-cell {border-right: 1px solid threedshadow;}

        .aw-grid-row {border-bottom: 1px solid threedlightshadow;}



    </style>

</head>

<body>

    <xml id="xmlDataIsland">

        <companies>

            <company>

                <ticker>MSFT</ticker>

                <name>Microsoft Corporation</name>

                <mktcap>314,571.156</mktcap>

                <sales>32,187.000</sales>

                <employees>55000</employees>

            </company>

            <company>

                <ticker>ORCL</ticker>

                <name>Oracle Corporation</name>

                <mktcap>62,615.266</mktcap>

                <sales>9,519.000</sales>

                <employees>40650</employees>

            </company>

            <company>

                <ticker>SAP</ticker>

                <name>SAP AG (ADR)</name>

                <mktcap>40,986.328</mktcap>

                <sales>8,296.420</sales>

                <employees>28961</employees>

            </company>

            <company>

                <ticker>CA</ticker>

                <name>Computer Associates Inter</name>

                <mktcap>15,606.335</mktcap>

                <sales>3,164.000</sales>

                <employees>16000</employees>

            </company>

            <company>

                <ticker>ERTS</ticker>

                <name>Electronic Arts Inc.</name>

                <mktcap>14,490.895</mktcap>

                <sales>2,503.727</sales>

                <employees>4000</employees>

            </company>

        </companies>

    </xml>

    <script>



    //    create ActiveWidgets data model - XML-based table

    var table = new AW.XML.Table;



    //  get reference to the xml data island node

    var xml, node = document.getElementById("xmlDataIsland");



    //    IE

    if (window.ActiveXObject) {

        xml = node;

    }

    //    Mozilla

    else {

        xml = document.implementation.createDocument("","", null);

        xml.appendChild(node.selectSingleNode("*"));

    }



    //    provide data XML

    table.setXML(xml);



    //    define column labels

    var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];



    //    create ActiveWidgets Grid javascript object

    var obj = new AW.UI.Grid;



    obj.setColumnCount(5);

    obj.setRowCount(5);



    //    provide column labels

    obj.setHeaderText(columns);



    //    provide external model as a grid data source

    obj.setCellModel(table);



    //    write grid html to the page

    document.write(obj);





function filter(){



    var i, rows = [], max = obj.getRowCount();



    for (i=0; i<max; i++){

        if (obj.getCellValue(4, i) < 20000){

            rows.push(i);

        }

    }



    obj.setRowCount(rows.length);

    obj.setRowIndices(rows);

}







    var button = new AW.UI.Button;

    button.setControlText("Select employees < 20000");

    button.onClick = filter;

    document.write(button);



    </script>

</body>

</html>

Merci, Obrigado, Dank, Makasih, Grazie, спасибо, Gracias, ευχαριστίες bedankt.
Oh! And I forgot to say .....Thanks.

Hi Alex,

Cool example..Can the same be done using the earlier version of AW?

Thanks.

Hi..

Figured it out.

obj.setRowCount(matchingRows.length);
obj.setRowValues(matchingRows);
obj.refresh();

Thanks.

Yes, I actually posted 1.0 example in the original thread:

/javascript.forum.8130.3/alex-could-you-help.html

Your function filter can be called only once, since we lose track of the original number of rows. In the example, if I click twice on "Select employees < 20000", I have an empty table.

Something like that works, but I would think that there should be an attribute of the class to hold that value. And maybe we should be able to check the value of cell(i,j) against undefined.

function filter(){

var i, rows = [], max = getOriginalRowCount(obj,0);

for (i=0; i<max; i++){

if (obj.getCellValue(4, i) < 20000){
rows.push(i);
}
}

obj.setRowCount(rows.length);
obj.setRowIndices(rows);
}

function getOriginalRowCount(obj,j)
{
var i=0;
while (obj.getCellValue(j,i)!="")
{
i++;
}
return i;
}

@Lucho

Something like this works more than once!!! Pass group = '' to restore all records.

function filterGridByGroup(obj, group){ 



    var i, rows = [], max = obj.getRowCount(); 

    for (i=0; i<max; i++){ 

        if (group == "" || obj.getCellValue(1, i) == group){ 

            rows.push(i); 

        } 

    } 

    obj.setRowIndices(rows); 

}

Its cool, but i prefer my example:
http://www.sonner.com.br/pc/ActiveWidgets/examples3/extendedGrid4.html

Filtering rows example

Forum search