3.2.0
Forum Demo Guide API Store

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:

writing to a text file using javascript Ramesh (32)
Using the component for paged lists Joe Hudson (13)
How to make a simple Search / Filter option? JUMP (10)
Search Example gives Filter and .. even Relations but ...... Carlos (11)
CPU usage is still very high when the page with 18 tables finishes loading John (16)
Search Function / Auto-Complete in Grid ZMax (15)
Why does Firefox refresh page when using paging patch with XML data table? dave v (4)
Saving updates to a database when using an input template. Rag! (13)
adding html on page with grid Hartlijn (10)
When will activewidgets use AJAX? debdebe (9)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us