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>

Alex (ActiveWidgets)

October 21,

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

Carlos

October 22,

Hi Alex,

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

Thanks.

CN

October 24,

Hi..

Figured it out.

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

Thanks.

CN

October 24,

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

http://www.activewidgets.com/javascript.forum.8130.3/alex-could-you-help.html

Alex (ActiveWidgets)

October 24,

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.

Lucho

November 22,

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

November 22,

@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); 
}

Sudhaker Raj

June 30,

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

Paulo Cesar Silva Reis (PC from Brazil).

June 30,

This topic is archived.

Filtering rows example

See also:

Search

New Data Grid

Version 2