3.2.0
Forum Demo Guide API Store

Search Example gives Filter and .. even Relations but ......

A Shame, my Filter Distict function doesnt work.
Thi is not to give you more work Alex, I realy dont need it, maybe someone at the Forum ????
But I have just a simple question . How could I leave the Grid2 "blank"
untill a row in Grid1 is selected?
Great Tool. go ahead

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

<style> body, html {font: menu; background: threedface;} </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>
#grid1 {height: 200px; border: 2px inset; background: white}
#grid2 {height: 100px; border: 2px inset; background: white}
#gridtemp {height: 85px; border: 2px inset; background: white}

#grid1 {width: 450px; border: 2px inset; background: white}
#grid2 {width: 700px; border: 2px inset; background: white}
#gridtemp {width: 250px; border: 2px inset; background: white}
</style>
</head>

<body>

<script>

var data2 = [
["001", "CHKP", "Check Point Software Tech1", "4,396.853", "424.769", "1203"],
["001", "CHKP", "Check Point Software Tech2", "3,946.485", "554.222", "1670"],
["002", "MERQ", "Mercury Interactive Corp.1", "4,325.488", "444.063", "1822"],
["002", "MERQ", "Mercury Interactive Corp.2", "4,325.488", "444.063", "1822"],
["002", "MERQ", "Mercury Interactive Corp.3", "4,325.488", "444.063", "1822"],
["003", "DOX", "Amdocs Limited1", "4,288.017", "1,427.088", "9400"],
["003", "DOX", "Amdocs Limited2", "4,288.017", "1,427.088", "9400"],
["003", "DOX", "Amdocs Limited3", "4,288.017", "1,427.088", "9400"],
["004", "CTXS", "Citrix Systems1, Inc.", "3,946.485", "554.222", "1670"],
["004", "CTXS", "Citrix Systems2, Inc.", "3,946.485", "554.222", "1670"],
["005", "IDALO", "Idawo Systems.", "3,946.485", "554.222", "1670"],
["006", "KNM", "Konami Corporation (ADR)1", "3,710.784", ".000", "4313"],
["006", "KNM", "Konami Corporation (ADR)2", "3,710.784", ".000", "4313"],
["007", "SUBZ", "Suntim Technologies.", "4,325.488", "444.063", "1822"],
["007", "DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"]
];
//***********************************************************

var columns2 = [
"Id", "Ticker(2)", "Company Name(2)", "Market Cap.(2)", "$ Sales(2)", "Employees(2)"
];

var myColumns = ["Id", "Ticker", "Company Name", "Products"];

var columnstemp = ["row-order", "row-index"];
//***********************************************************

var myData = [
["001", "MSFT","Microsoft Corporation", "Windows"], ["002", "REDH","Red Hat Linux", "Linux"],
["003", "Suse","Suse Linux", "Linux"], ["004", "IBM","IBM Ltd.", "Websphere"],
["005", "BEA","BEA Systems", "Weblogic"],
["006", "APAC","Apache Org", "Tomcat"], ["007", "MSFT","Microsoft Corporation", "Windows"],
["008", "REDH","Red Hat Linux1", "Linux1"], ["009", "Suse","Suse Linux", "Linux"],
["010", "IBM","IBM Ltd.", "Websphere"], ["011", "BEA","BEA Systems", "Weblogic"],
["012", "APAC","Apache Org", "Tomcat"], ["013", "MSFT","Microsoft Corporation", "Windows"],
["014", "REDH","Red Hat Linux", "Linux"], ["015", "Suse","Suse Linux", "Linux"],
["016", "IBM","IBM Ltd.", "Websphere"], ["017", "BEA","BEA Systems", "Weblogic"],
["018", "APAC","Apache Org", "Tomcat"], ["019", "MSFT","Microsoft Corporation", "Windows"],
["020", "REDH","Red Hat Linux", "Linux"], ["021", "Suse","Suse Linux", "Linux"],
["022", "IBM","IBM Ltd.", "Websphere"], ["023", "BEA","BEA Systems", "Weblogic"],
["024", "APAC","Apache Org1", "Tomcat"], ["025", "MSFT","Microsoft Corporation", "Windows"],
["026", "REDH","Red Hat Linux", "Linux"], ["027", "Suse","Suse Linux", "Linux"],
["028", "IBM","IBM Ltd.", "Websphere"], ["029", "BEA","BEA Systems", "Weblogic"],
["030", "APAC","Apache Org2", "Tomcat"], ["031", "MSFT","Microsoft Corporation", "Windows"],
["032", "REDH","Red Hat Linux1", "Linux"], ["033", "Suse","Suse Linux", "Linux"],
["034", "IBM","IBM Ltd.", "Websphere"], ["035", "BEA","BEA Systems", "Weblogic"],
["036", "APAC","Apache Org", "Tomcat"], ["037", "MSFT","Microsoft Corporation", "Windows"],
["038", "REDH","Red Hat Linux2", "Linux2"], ["039", "Suse","Suse Linux", "Linux"],
["040", "IBM","IBM Ltd.", "Websphere"], ["041", "BEA","BEA Systems", "Weblogic"],
["042", "APAC","Apache Org", "Tomcat"], ["043", "MSFT","Microsoft Corporation", "Windows"],
["044", "REDH","Red Hat Linux", "Linux"], ["045", "Suse","Suse Linux", "Linux"],
["046", "IBM","IBM Ltd.", "Websphere"], ["047", "BEA","BEA Systems", "Weblogic"],
["048", "APAC","Apache Org", "Tomcat"]
];
//***********************************************************

var nnrowsx = myData.length
//***********************************************************

/// GRID2
//******************

var obj2 = new Active.Controls.Grid;

obj2.setId("grid2");
obj2.setRowProperty("count", data2.length);
obj2.setColumnProperty("count", columns2.length);
obj2.setDataProperty("text", function(i, j){return data2[i][j]});
obj2.setColumnProperty("text", function(i){return columns2[i]});
obj2.setRowHeaderWidth("28px");
obj2.setColumnHeaderHeight("20px");

// GRID1
//***************************************

var obj = new Active.Controls.Grid;

obj.setId("grid1");
obj.setRowCount(myData.length);
obj.setColumnCount(myColumns.length);
obj.setDataText(function(i, j){return myData[i][j]});
obj.setColumnText(function(i){return myColumns[i]});
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
obj.setProperty("selection/multiple", true);
obj.setAction("click", function(src){inp.value = src.getProperty("data/text", 0, src.getRowProperty("order")); SearchinGrid2();});

// GRIDTEMP
//************************
var datatemp = [];

var objtemp = new Active.Controls.Grid;

objtemp.setId("gridtemp");
objtemp.setRowCount(myData.length);
objtemp.setColumnCount(2);
objtemp.setColumnText(function(i){return columnstemp[i]});


//*****************************************

var longd2 = obj2.getRowProperty("count")

//**************************************

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

function searchGrid()
{

resetRowValuesGrid1()
obj.sort(0, "ascending");
obj.refresh()

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()
{

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()
objtemp.setDataText(function(i, j){return datatemp[i][j]});

for(var x=0; x<datatemp.length; x++)
{
var idxorder = x;
var elementnewval = [obj.getProperty("data/text", colToBeSearched, objtemp.getProperty("data/value", 1, x))];

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

if(elementnewval != elementoldval)
{
rowidValues.push(objtemp.getProperty("data/value", 1, x));
var elementoldval = [obj.getProperty("data/text", colToBeSearched, objtemp.getProperty("data/value", 1, x))];
res++;
}
}
obj.setRowCount(res);
obj.setRowValues(rowidValues);
obj.sort(0, "ascending");
obj.refresh();

objtemp.setRowCount(datatemp.length);
objtemp.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 = inp.value;
var rowidValues = [];
var res = 0;

for(var x=0; x<longd2; 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()
{
objtemp.setRowCount(0);
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++;
}
}
}
}
//**************************************
// RELOAD ROW-VALUES (AFTER ROWCOUNT IS NEEDED)
//*************************************

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

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

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

</script>
<table>
<tr>
<td>
<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();">
</select><input hiden type=button value="Filter Distinct" onclick="javascript:filterDistinct();">

</form>
</td>
</tr>
<tr>
<td>
<div id=result>
</div>
<tr>
<td width=750 height=15>
</td>
</tr>
</table>
<tr>
<td>
<script>
document.write(obj);
</script>
<INPUT ID=inp size="6" readonly>
<script>
document.write(obj2)
document.write(objtemp)
</script>
</div>
<tr>
</body>
</html>

//****************

Thanks

Carlos
August 27,
Upsss,
Sorry a little bit cofused about 2 dimensions, all rows are colums and opposite. It works now , please replace the fiterDistinct funtion with this code.
Thanks,
Carlos

function filterDistinct()
{
resetRowValuesGrid1()
var colToBeSearched = document.forms['gridSearchForm'].colSearchName.value;
var rowidValues = [];
var res = 0;
obj.sort(colToBeSearched, "ascending");
arrordidx()
objtemp.setDataText(function(i, j){return datatemp[i][j]});
for(var x=0; x<datatemp.length; x++)
{
var idxorder = x;
var elementnewval = obj.getProperty("data/value", objtemp.getProperty("data/value", x, 1), [colToBeSearched]);
if(idxorder=0)
{
var elementoldval = 'XXaXXXzXXXXXxXXXXbXXXXXyXXXXXX';
}
if(elementnewval != elementoldval)
{
rowidValues.push(objtemp.getProperty("data/value", x, 1));
var elementoldval = obj.getProperty("data/value", objtemp.getProperty("data/value", x, 1),[colToBeSearched]);
res++;
}
}
obj.setRowCount(res);
obj.setRowValues(rowidValues);
obj.sort(0, "ascending");
obj.refresh();
objtemp.setRowCount(datatemp.length);
objtemp.refresh()
document.getElementById('result').innerHTML = "<b>Number of matches : "+res+"</b>";
}
Carlos
August 27,
Sorry, The code has strange vars and obj's not needed, I was just testing things.
Here is a cleaner version.
Thanks,
Carlos


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

<style> body, html {font: menu; background: threedface;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>

<!-- grid format -->
<style>
#grid1 {height: 200px; border: 2px inset; background: white}
#grid2 {height: 100px; border: 2px inset; background: white}
#gridtemp {height: 85px; border: 2px inset; background: white}

#grid1 {width: 450px; border: 2px inset; background: white}
#grid2 {width: 700px; border: 2px inset; background: white}
#gridtemp {width: 250px; border: 2px inset; background: white}
</style>
</head>

<body>

<script>

var data2 = [
["001", "CHKP", "Check Point Software Tech1", "4,396.853", "424.769", "1203"],
["001", "CHKP", "Check Point Software Tech2", "3,946.485", "554.222", "1670"],
["002", "MERQ", "Mercury Interactive Corp.1", "4,325.488", "444.063", "1822"],
["002", "MERQ", "Mercury Interactive Corp.2", "4,325.488", "444.063", "1822"],
["002", "MERQ", "Mercury Interactive Corp.3", "4,325.488", "444.063", "1822"],
["003", "DOX", "Amdocs Limited1", "4,288.017", "1,427.088", "9400"],
["003", "DOX", "Amdocs Limited2", "4,288.017", "1,427.088", "9400"],
["003", "DOX", "Amdocs Limited3", "4,288.017", "1,427.088", "9400"],
["004", "CTXS", "Citrix Systems1, Inc.", "3,946.485", "554.222", "1670"],
["004", "CTXS", "Citrix Systems2, Inc.", "3,946.485", "554.222", "1670"],
["005", "IDALO", "Idawo Systems.", "3,946.485", "554.222", "1670"],
["006", "KNM", "Konami Corporation (ADR)1", "3,710.784", ".000", "4313"],
["006", "KNM", "Konami Corporation (ADR)2", "3,710.784", ".000", "4313"],
["007", "SUBZ", "Suntim Technologies.", "4,325.488", "444.063", "1822"],
["007", "DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"]
];
//***********************************************************

var columns2 = [
"Id", "Ticker(2)", "Company Name(2)", "Market Cap.(2)", "$ Sales(2)", "Employees(2)"
];

var myColumns = ["Id", "Ticker", "Company Name", "Products"];

var columnstemp = ["row-order", "row-index"];
//***********************************************************

var myData = [
["001", "MSFT","Microsoft Corporation", "Windows"], ["002", "REDH","Red Hat Linux", "Linux"],
["003", "Suse","Suse Linux", "Linux"], ["004", "IBM","IBM Ltd.", "Websphere"],
["005", "BEA","BEA Systems", "Weblogic"],
["006", "APAC","Apache Org", "Tomcat"], ["007", "MSFT","Microsoft Corporation", "Windows"],
["008", "REDH","Red Hat Linux1", "Linux1"], ["009", "Suse","Suse Linux", "Linux"],
["010", "IBM","IBM Ltd.", "Websphere"], ["011", "BEA","BEA Systems", "Weblogic"],
["012", "APAC","Apache Org", "Tomcat"], ["013", "MSFT","Microsoft Corporation", "Windows"],
["014", "REDH","Red Hat Linux", "Linux"], ["015", "Suse","Suse Linux", "Linux"],
["016", "IBM","IBM Ltd.", "Websphere"], ["017", "BEA","BEA Systems", "Weblogic"],
["018", "APAC","Apache Org", "Tomcat"], ["019", "MSFT","Microsoft Corporation", "Windows"],
["020", "REDH","Red Hat Linux", "Linux"], ["021", "Suse","Suse Linux", "Linux"],
["022", "IBM","IBM Ltd.", "Websphere"], ["023", "BEA","BEA Systems", "Weblogic"],
["024", "APAC","Apache Org1", "Tomcat"], ["025", "MSFT","Microsoft Corporation", "Windows"],
["026", "REDH","Red Hat Linux", "Linux"], ["027", "Suse","Suse Linux", "Linux"],
["028", "IBM","IBM Ltd.", "Websphere"], ["029", "BEA","BEA Systems", "Weblogic"],
["030", "APAC","Apache Org2", "Tomcat"], ["031", "MSFT","Microsoft Corporation", "Windows"],
["032", "REDH","Red Hat Linux1", "Linux"], ["033", "Suse","Suse Linux", "Linux"],
["034", "IBM","IBM Ltd.", "Websphere"], ["035", "BEA","BEA Systems", "Weblogic"],
["036", "APAC","Apache Org", "Tomcat"], ["037", "MSFT","Microsoft Corporation", "Windows"],
["038", "REDH","Red Hat Linux2", "Linux2"], ["039", "Suse","Suse Linux", "Linux"],
["040", "IBM","IBM Ltd.", "Websphere"], ["041", "BEA","BEA Systems", "Weblogic"],
["042", "APAC","Apache Org", "Tomcat"], ["043", "MSFT","Microsoft Corporation", "Windows"],
["044", "REDH","Red Hat Linux", "Linux"], ["045", "Suse","Suse Linux", "Linux"],
["046", "IBM","IBM Ltd.", "Websphere"], ["047", "BEA","BEA Systems", "Weblogic"],
["048", "APAC","Apache Org", "Tomcat"]
];
//***********************************************************

var datatemp = [];
var idvalrelation =""

/// GRID2
//******************

var obj2 = new Active.Controls.Grid;

obj2.setId("grid2");
obj2.setRowProperty("count", data2.length);
obj2.setColumnProperty("count", columns2.length);
obj2.setDataProperty("text", function(i, j){return data2[i][j]});
obj2.setColumnProperty("text", function(i){return columns2[i]});
obj2.setRowHeaderWidth("28px");
obj2.setColumnHeaderHeight("20px");


// GRID1
//***************************************


var obj = new Active.Controls.Grid;

obj.setId("grid1");
obj.setRowCount(myData.length);
obj.setColumnCount(myColumns.length);
obj.setDataText(function(i, j){return myData[i][j]});
obj.setColumnText(function(i){return myColumns[i]});
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
obj.setProperty("selection/multiple", true);
obj.setAction("click", function(src){idvalrelation = src.getProperty("data/text", 0, src.getRowProperty("index")); SearchinGrid2();});

obj.setSelectionIndex(-1);
idvalrelation=obj.getProperty("data/text", 0, obj.getSelectionIndex("index"));
SearchinGrid2();


/// FUCTIONS
//**************************************

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>
<table>
<tr>
<td>
<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();">
</select><input hiden type=button value="Filter Distinct" onclick="javascript:filterDistinct();">

</form>
</td>
</tr>
<tr>
<td>
<div id=result>
</div>
<tr>
<td width=750 height=15>
</td>
</tr>
</table>
<tr>
<td>
<script>
document.write(obj);
</script>
<p>
Relation Child Grid...
</p>

<script>
document.write(obj2)
//document.write(objtemp)
</script>
</div>
<tr>
</body>
</html>
Carlos
August 29,
Hi,

is there a way of getting this example to work with paging?

TIA,
Flavio
November 5,
Hi Flavio
First I forgot to thank Nilesh Manohar for his search example which I took as base: http://www.activewidgets.com/messages/797-2.htm
And Yes, should be possible ,althoght for this case could be a "little bit" more complicated, for the child records (need to load all childs for every Father). I prefer to page (retrieve querying the server DB - "the number of records per page") instead of paging into an array (maybe thousands of rows) .
Anyway, Alex is working on a grid pager-footer for next release, so ....
Thanks
Hope give some help
Carlos
November 6,
Hi,

This is really very nice....

Is there any way by which we can make this work using XMLs ?

Waiting for your reply....
Carl
Carl
November 8,
Carl
I didn't try XML yet (just samples and a small query I did) because extended-characters are not suported (the DB i'm plannin to use is full of them) ;-) , but I was able to make it work with CSVs.
Thanks
Carlos
November 8,
Hi,

I've replace sa indexOf matching with regexp and it's seems that it's a little bit faster. The changes are:
#1:before 
for(var x=0; x<myData.length; x++)

add: 
var reg = new RegExp(toSearch, "i");
reg.compile(toSearch,"i");


#2:replace 
if((myData[x][colToBeSearched].indexOf(toSearch)) >= 0)

with: 
if((myData[x][colToBeSearched].match(reg)))


... these are the changes for FilterGrid() ... for search,filter disting and filtergrid2 the changes are similar.

Cristian BICA
March 27,
Thanks a lot, Cristian
It's nice to know how to icrease searching/filtering performance.
Carlos
March 28,
Carlos -

Do you have an example of the code using a csv??

THANKS!!
dano
April 27,
how do I download this grid.js ?
Thank you,
Buddhika
June 20,
The javascript file was called grid.js in version 1.0. In 2.0 it is aw.js.
Alex (ActiveWidgets)
June 20,

This topic is archived.

See also:

How to make a simple Search / Filter option? JUMP (10)
Search Function / Auto-Complete in Grid ZMax (15)
This is a great example! Here's an enhancement. Cameron (9)
Wait cursor before search, then return after complete (8)
Context menu example... a very impressed user (8)
Set the first row to enter search criteria Binu Nadesan (7)
An Active.Xml.Table related issue Cris Nagle (7)
Incremental search (6)
How to reverse filtering of rows Andreas (6)
AJAX-related: Howto use XMLRPC with activewidgets Sebastian Wiemer (NIONEX) (5)

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