3.2.0

Searching and Filtering using Paging

Hello,

I am using paging with a csv file (imported into an array) and have added the search and filter modifications to the file. If I try to put a filter on a page I get some strange results and the filter does not run correctly. Here is a copy of my code... Any ideas how to fix this?


<html>
<head>
<title>ActiveWidgets Grid</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </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>


<!-- Include patches here -->
<script src="../patches/paging1.js"></script>


<!-- grid format -->
<style>
.active-controls-grid {height: 310px; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px; background-color: threedlightshadow;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>

<!-- grid data -->
<script>


// create ActiveWidgets data model - text-based table
var table = new Active.Text.Table;

// provide data URL - plain text comma-separated file
table.setURL("../data/companies.csv");
var Datalen = 0;
var myData =[];
var myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
// create javascript object
var obj = new Active.Controls.Grid;

var defaultResponse = table.response;
table.response = function(data){
defaultResponse.call(table, data);
Datalen=table.getCount();
for(var x=0; x< Datalen; x++) {
myData.push([table.getText( x, 0), table.getText( x, 1), table.getText( x, 2), table.getText( x, 3), table.getText( x, 4)]);
}
// load data javascript object

}
// start asyncronous data retrieval
table.request();


function populateListBox()
{
for(var c=0; c<myColumns.length; c++)
{
document.write("<option value="+c+">"+myColumns[c]+"</option>");
}
}
//***************************************

function searchGrid()
{
resetRowValuesGrid1()


var colToBeSearched = document.forms['gridSearchForm'].colSearchName.value;
var toSearch = document.forms['gridSearchForm'].keyword.value;
var res = 0;

for(var x=0; x<myData.length; x++)
{
if((myData[x][colToBeSearched].indexOf(toSearch)) >= 0)
{
obj.getTemplate("row", x).setStyle("color", "white");
obj.getTemplate("row", x).setStyle("background", "blue");
res++;
}
else
{
obj.getTemplate("row", x).setStyle("color", "black");
obj.getTemplate("row", x).setStyle("background", "white");
}
}
document.getElementById('result').innerHTML = "<b>Number of matches : "+res+"</b>";
}
///***************************************

function FilterGrid()
{

resetRowValuesGrid1()

var colToBeSearched = document.forms['gridSearchForm'].colSearchName.value;
var toSearch = document.forms['gridSearchForm'].keyword.value;
var rowidValues = [];
var res = 0;

for(var x=0; x<myData.length; x++)
{
if((myData[x][colToBeSearched].indexOf(toSearch)) >= 0)
{
rowidValues.push(x);
res++;
}
}

obj.setRowCount(res);
obj.setRowValues(rowidValues);
// obj.sort(colToBeSearched, "ascending");
obj.sort(0, "ascending");
obj.refresh();

document.getElementById('result').innerHTML = "<b>Number of matches : "+res+"</b>";
}
///***************************************

function filterDistinct()
{
resetRowValuesGrid1()
var colToBeSearched = document.forms['gridSearchForm'].colSearchName.value;
var rowidValues = [];
var res = 0;
obj.sort(colToBeSearched, "ascending");
arrordidx()

for(var x=0; x<datatemp.length; x++)
{
var idxorder = x;
var idxoftemp = datatemp[x][1];

var elementnewval = obj.getProperty("data/value", [idxoftemp], [colToBeSearched]);

if(idxorder=0)
{
var elementoldval = 'XXaXXXzXXXXXxXXXXbXXXXXyXXXXXX';
}

if(elementnewval != elementoldval)
{
rowidValues.push([idxoftemp]);
var elementoldval = obj.getProperty("data/value", [idxoftemp], [colToBeSearched]);
res++;
}
}
obj.setRowCount(res);
obj.setRowValues(rowidValues);
obj.sort(colToBeSearched, "ascending");
obj.refresh();
document.getElementById('result').innerHTML = "<b>Number of matches : "+res+"</b>";
}
//**************************************
// SEARCH FOR CHILD IN GRID2 FUNCTION (RELATION)
//*************************************
function SearchinGrid2()
{

var colToBeSearched = 0;
var toSearch = idvalrelation;
var rowidValues = [];
var res = 0;

for(var x=0; x<data2.length; x++)
{
if((data2[x][colToBeSearched].indexOf(toSearch)) >= 0)
{
rowidValues.push(x);
res++;
}
}

obj2.setRowCount(res);
obj2.setRowValues(rowidValues);
obj2.sort(colToBeSearched, "ascending");
obj2.refresh();
}
//**************************************
// THIS FUNC. CREATE THE DATA ARRAY TO STORE
// ROW/order , Row/index
//*************************************

function arrordidx()
{
datatemp=[];

var res = 0;

while(res<=myData.length-1)
{
for(var x=0; x<myData.length; x++)
{
var orderactrow = obj.getRowProperty("order", x );
var newOrder = Number(orderactrow);
if(res==newOrder)
{
datatemp.push([newOrder, x]);
res++;
break;
}
}
}

}
//**************************************
// RELOAD ROW-VALUES (AFTER ROWCOUNT IS NEEDED)
//*************************************

function resetRowValuesGrid1()
{
obj.setRowCount(myData.length);
var rowValues = [];

for(var i=0; i < myData.length; ++i) { rowValues.push(i);}

obj.setRowProperty("values", rowValues);
obj.setSortProperty("index", null);
}
//********************************









</script>
</head>
<body>
<script>

// create the grid object
var obj = new Active.Controls.Grid;






// replace the built-in row model with the new one (defined in the patch)
obj.setModel("row", new Active.Rows.Page);

obj.setProperty("row/count", 20);
obj.setProperty("column/count", 5);
obj.setProperty("data/text", function(i, j){return myData[i][j]});
obj.setProperty("column/texts", myColumns);




// set page size
obj.setProperty("row/pageSize", 15);

// provide external model as a grid data source
obj.setDataModel(table);

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

</script>

<!-- bottom page control buttons -->
<div>
<button onclick='goToPage(-Infinity)'>&lt;&lt;</button>
<button onclick='goToPage(-1)'>&lt;</button>
<span id='pageLabel'></span>
<button onclick='goToPage(1)'>&gt;</button>
<button onclick='goToPage(Infinity)'>&gt;&gt;</button>
</div>


<!-- button click handler -->
<script>
function goToPage(delta){
var count = obj.getProperty("row/pageCount");
var number = obj.getProperty("row/pageNumber");
number += delta;
if (number < 0) {number = 0}
if (number > count-1) {number = count-1}
document.getElementById('pageLabel').innerHTML = "Page " + (number + 1) + " of " + count + " ";

obj.setProperty("row/pageNumber", number);
obj.refresh();
}

goToPage(0);
</script>

<form name=gridSearchForm id=gridSearchForm>
<input type=text name=keyword>
<select name=colSearchName>
<script>
populateListBox();
</script>
</select><input type=button value=search onclick="javascript:searchGrid();">
</select><input type=button value=" Filter " onclick="javascript:FilterGrid();">

</form>
<div id=result>
</div>
</body>
</html>
Andrew
August 15,
Hi Andrew,
Clone the CSV-array is one possible solution for Filtering+Paging,
this way you can search in Main-array and show results from the cloned one, but I didn't find an easy way to highlight searched rows between pages ( so I remove it from now ).
HTH
Carlos

<html>
<head>
<title>ActiveWidgets Grid</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </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>

<!-- Include patches here -->
<script src="../patches/paging1.js"></script>


<!-- grid format -->
<style>
.active-controls-grid {height: 310px; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px; background-color: threedlightshadow;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>

<!-- grid data -->
<script>

var Datalen = 0;
var myData =[];
var GlobData =[];
var rowidValues = [];
var resfilter = "ALL";
var restot = "ALL";

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

// create ActiveWidgets data model - text-based table
var table = new Active.Text.Table;

// provide data URL - plain text comma-separated file
table.setURL("lib/companies.csv");

// create javascript object
var obj = new Active.Controls.Grid;
obj.setId("grid1");
obj.setModel("row", new Active.Rows.Page);

var defaultResponse = table.response;

//begin table response
table.response = function(data){
defaultResponse.call(table, data);
Datalen=table.getCount();

//load CSV and convert to array
for(var x=0; x< Datalen; x++) {
GlobData.push([table.getText( x, 0), table.getText( x, 1), table.getText( x, 2), table.getText( x, 3), table.getText( x, 4)]);
}



//Clone array (GlobData allways stores all csv items)
myData = GlobData;
restot = Datalen;

obj.setRowProperty("count", Datalen);
obj.setColumnProperty("count", 5);
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
obj.setColumnProperty("text", function(i){return myColumns[i]});
obj.setProperty("row/pageSize", 5);


// SET TIMEOUT ( )
window.setTimeout(function(){
goToPage(0);
obj.refresh();
}, 0);

} //(end of tableresponse method)

// start asyncronous data retrieval
table.request();


function populateListBox() {
for(var c=0; c<myColumns.length; c++) {
document.write("<option value="+c+">"+myColumns[c]+"</option>");
}
}

//*********************************************
function FilterGrid()
{
var myData =[];
resetRowValuesGrid1()

var colToBeSearched = document.forms['gridSearchForm'].colSearchName.value;
var toSearch = document.forms['gridSearchForm'].keyword.value;
var rowidValues = [];
var res = 0;

for(var x=0; x<GlobData.length; x++)
{
if((GlobData[x][colToBeSearched].indexOf(toSearch)) >= 0) {
myData.push(GlobData[x]);
res++;
}
}

obj.sort(0, "ascending");
resfilter = res;

obj.setModel("row", new Active.Rows.Page);

obj.setRowProperty("count", resfilter);
obj.setColumnProperty("count", 5);
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
obj.setColumnProperty("text", function(i){return myColumns[i]});
obj.setProperty("row/pageSize", 5);
goToPage(0);
document.getElementById('result').innerHTML = "<b>Number of matches : "+resfilter+" of: " + restot +"</b>";

}
///***************************************


//**************************************
// RELOAD ROW-VALUES (AFTER ROWCOUNT IS NEEDED)
//*************************************

function resetRowValuesGrid1()
{
obj.setRowCount(myData.length);
var rowValues = [];

for(var i=0; i < myData.length; ++i) { rowValues.push(i);}

obj.setRowProperty("values", rowValues);
obj.setSortProperty("index", null);
}
//********************************

</script>
</head>
<body>
<script>

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

</script>

<!-- bottom page control buttons -->
<div>
<button onclick='goToPage(-Infinity)'>&lt;&lt;</button>
<button onclick='goToPage(-1)'>&lt;</button>
<span id='pageLabel'></span>
<button onclick='goToPage(1)'>&gt;</button>
<button onclick='goToPage(Infinity)'>&gt;&gt;</button>
</div>

<script>

function goToPage(delta){
var count = obj.getProperty("row/pageCount");
var number = obj.getProperty("row/pageNumber");
number += delta;
if (number < 0) {number = 0}
if (number > count-1) {number = count-1}
document.getElementById('pageLabel').innerHTML = "Page " + (number + 1) + " of " + count + " ";

obj.setProperty("row/pageNumber", number);
obj.refresh();
}

</script>

<form name=gridSearchForm id=gridSearchForm>
<input type=text name=keyword>
<select name=colSearchName>
<script>
populateListBox();
</script>
</select><input type=button value=" Filter " onclick="javascript:FilterGrid();">
</form>
<div id=result>
</div>

<script>
document.getElementById('result').innerHTML = "<b>Number of matches : "+resfilter+" OF: " + restot +"</b>";
</script>

</body>
</html>
August 15,

This topic is archived.

See also:


Back to support forum