Search Grid Column For Match

I have an extral textbox and button that i want to pass a search string to search a column of the grid, if there is a match, select the row.

so i have a javascript function like

search_grid()
{

}

Anyone?

I wanted to search a column of a grid, then if it found a match in that column, or a partical match, it should set foucus on that area in the grid.

How do you bind to the grid after its been created?

I have another javascript function that passes the paramters in to the serac.

anyone?

You can mix the input in second header:
http://www.activewidgets.com/javascript.forum.23387.4/editing-second-header-makes-headers.html

with a 'custom' filter that search & select first match ocurrence:
http://www.activewidgets.com/javascript.forum.8149.8/filtering-rows-example.html

to get something like this:

<script>

var max, max2;

///////////////////////////////////////////////////////
function filter3(objS, searchcriteria, Xcol){
searchcriteria=searchcriteria.toUpperCase();
var fmatch;
if(searchcriteria==''){
objS.setRowCount(max2);
objS.setRowIndices('');

objS.setTimeout(function(){
objS.selectRow(-1);
objS.setScrollTop(0);
},800);
}

if(searchcriteria!=''){
fmatch = [];
fmatch = -1 ;
for (var rw=0; rw<max2; rw++){
if ( objS.getCellValue(Xcol, rw).toUpperCase().indexOf(searchcriteria) >-1 ){
fmatch = rw;
break;
}
}
}

objS.setTimeout(function(){
if(fmatch !=-1){
objS.selectRow(fmatch);
objS.setScrollTop(fmatch*18);
}
},800);

}




var obj3 = new AW.Grid.Extended;
obj3.setCellText(function(i, j){return j + "-" + i});
obj3.setHeaderText(["header1", "header2", "header3", "header4", "header5", "header6", "header7", "header8", "header9", "header10"], 0);
obj3.setHeaderCount(2);
obj3.setFixedLeft(0);
obj3.getHeadersTemplate(1, "center").setStyle('background', 'lightyellow');


obj3.setColumnCount(10);
obj3.setRowCount(100);

obj3.onHeaderClicked = function(event, col, header) {
if (header == 1) {

obj3.setHeaderText('', 0);
var inp = new AW.UI.Input;
inp.setStyle('background', 'lightyellow');
inp.getContent('box/text').setStyle('color', 'green');
obj3.setHeaderTemplate(inp, col, 1);
obj3.getHeaderTemplate(col, 1).onControlEditEnded = function() {
var text = this.getControlText();
obj3.setHeaderTemplate(new AW.Grid.Header, col, 1);
obj3.setHeaderText(text, col, 1);
obj3.getHeaderTemplate(col, 1).getContent('box/text').setStyle('color', 'green');

var scrollLeft = obj3.getViewTemplate("box", "top", "center").element().scrollLeft;
obj3.getHeadersTemplate(1, "center").refresh();
obj3.getViewTemplate("box", "top", "center").element().scrollLeft = scrollLeft;

max = obj3.getRowCount();
max2 = max;

if(text !=''){ filter3(obj3,text,col); }
}
var scrollLeft = obj3.getViewTemplate("box", "top", "center").element().scrollLeft;
obj3.getHeadersTemplate(1, "center").refresh();
obj3.getViewTemplate("box", "top", "center").element().scrollLeft = scrollLeft;

obj3.getHeaderTemplate(col, 1).focus();
}
}

document.write(obj3);

Problem is, i cant get the 2nd header to show on my grid.
I can get the text box to display in the header, but not second header.

Check also this post:
http://www.activewidgets.com/javascript.forum.13008.4/complex-html-form-in-a.html

AW.Grid.Extended is needed for multi-header rows.

do i use that in some place of another pate of my script?

var table = new AW.XML.Table;
var d = new Date();
table.setURL("data/"+document.getElementById('h_un_un').value+"_"+school_prefix+".xml?"+d.getTime());
table.request();

var columns = ["Display Name","Student ID","Grade","Class Of","Disabled","Disabled By Admin","Locked Out","Internet Access"];
var obj = new AW.UI.Grid;

obj.refresh();
obj.refresh();

var input1 = new AW.UI.Input;
input1.setControlText("input1");

var input2 = new AW.UI.Input;
input2.setControlText("input2");


obj.setId("myGrid");
obj.setHeaderCount(2);
obj.setHeaderTemplate(input1, 1); // first column, second header row
//obj.setHeaderTemplate(input2, 1); // second column, second header row
obj.setColumnCount(8);
obj.setHeaderText(columns);
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
obj.setSelectorWidth(40);
obj.setSelectionMode("multi-row");

cool i got it

So I have a function hooked to that text box like below.

input1.onControlValidated = function(text){
obj.setScrollTop(200 * 18);
}

When i trid to add that code to search the column, it threw an error.
I just wanted it to, if it had a match, to go to that spot in the grid.

Any ideas?

Here is what i have so far.


input1.onControlValidated = function(text){
        
        var i, rows = [], max = obj.getRowCount();
        for (i=0; i<max; i++){
            if (obj.getCellValue(1, i) < 20000){
                rows.push(i);
                alert(obj.getCellValue(1, i));
            }
        }

        obj.setScrollTop(200 * 18);
    }

The code above does alert me of anything, i press enter on the box, and it thats it.

So if i find a match in obj.getCellValue()
How do i get the id row to pas it to the setscrolltop function?

Any difference by using getCellText instead of getCellValue ?

dont know...
just dont know how to get the row id, if there is a match.

My search works fine with the data is unsorted.
If i sort by any column, and search, it only grabs the id of the old id of matching criterial, not new id.

Any ideas?

input1.onControlValidated = function(text){

var i, rows = [], max = obj.getRowCount();
for (i=0; i<max; i++){
if (obj.getCellValue(0, i).toLowerCase().search(text.toLowerCase()) > -1){
obj.selectRow(i);
obj.setScrollTop(i * 18);
}
}
}

Use:
obj.getRowPosition(i)
Please avoid open multiple threads for same issue.

I want to hide the column if it dosent match, and show if it does match, any ideas?

input1.onControlValidated = function(text){

var i, rows = [], max = obj.getRowCount();
for (i=0; i<max; i++){
if (obj.getCellValue(0, i).toLowerCase().search(text.toLowerCase()) > -1){
obj.selectRow(i);
obj.setScrollTop(i * 18);
//SHOW COLUMN
}else{
//SINCE NO MATCH HIDE COLUMN
}
}
}

I would like to know the above also.

How do you hide a row your currently on in the loop, or unhide it?

I just tried that code above, and when i hit enter for it to search it sits there and locked up.

Then pops up error "A script on this page is causing Internet Explorer to run slowly..." after 10 seconds or so.

I have around 2k records...

What is going on?

I am using 2.5
With IE7

It also looks like it removes the column that i just searched also.

I have a column of Names and ID's.

When i try that above,it looks like its searching, then i get that windows prompt, and it removes the whole column i just searched, and its not in my grid anymore.

anyone?

anyone?

anyone?

anyone?

anyone?

Do you have a working example that we can look at?

Guess that what Garret need is:
http://www.activewidgets.com/javascript.forum.19871.11/filter-built-into-header-in.html

I tried that above, and i cant get it to work.

All i need is a header row, to allow for search, it should search a specific row, and if the serch contains the search criterial to show those records.

if i search again, it should search all records again.

it should be that hard, i just cant figure it out, i looked through support and examples.

as you can see ive been looking for someone to reply for almost 7 days.
almost at the point of askin for a refund, i feel llike its pulling teeth trying to get anwsers, or searching the forum.

anyone?

Garret,

sorry, I don't understand your question. What exactly you want us to do?

I have a grid, the 2nd row is a row of text box's that when you enter something in them, it will search that column for any matching text, if it matches, the grid will only show matching items.

Then the user can search again, and have it search once again and follow the process.

We're using a search function that searches the first two columns of the grid and if it finds a match; jumps to that row and highlights it. You may be able to adapt this to your requirements...

The example code is not complete you would need a Grid (obviously) that's defined as "var grd = new AW.UI.Grid;" and you would need to document.write the Search Text box and Button..


var SearchBox = new AW.UI.Input;
SearchBox.setStyle("Width","250px");
    
var Search = new AW.UI.Button;
Search.setStyle('width','100px');
Search.setControlText('Search');
    
var C,R,Rc;
C = 0; //Sets the Column Count to Zero
R = 0; //Sets the Row Count to Zero
Rc = grd.getRowCount(); //Gets the Total number of rows
Search.onControlClicked = function(event){
var searchText = SearchBox.getControlText();
if(searchText=='') {alert(searchText+' Not Found!'); return false;}
for( r=R;r<Rc;r++) {
R = r;
for(var c=C;c<2;c++) {
var cellContent=grd.getCellText(c,r);
var pos=cellContent.indexOf(searchText);
if(pos !=-1) {
var desc = grd.getCellText(1,r);
grd.setSelectionMode("single-row");
grd.setSelectedRows([r]);
grd.setCurrentRow(r);
grd.setScrollTop( r * grd.getRowHeight());
//alert(R + '-' + C);
R ++;
C = 0;
return false;
}
}
}
alert('Search Finished');
R = 0;
}

i dont need a button to do the search
it should happen when you hit enter when your typing something into the grid like it does stock.../

Also i dont want it to go to the row if its found.
There can be multiple items found that match the criteria, the grid needs to either hide or do something with the rows that do not match, and only show rows that contain the searched criteria..

OK, try this one.
if tou are using different data model (csv/xml) just replace :
max = obj3.getRowCount();
with:
max = table.getCount();
HTH
var max, max2;

function filter3(objS, searchcriteria, Xcol){
searchcriteria=searchcriteria.toUpperCase();
var rows=[];

if(searchcriteria!=''){
for (var rw=0; rw<max2; rw++){
if ( objS.getCellValue(Xcol, rw).toUpperCase().indexOf(searchcriteria) >-1 ){
rows.push(rw);
}
}
}

objS.setTimeout(function(){

if(searchcriteria==''){
objS.setRowCount(max2);
objS.setRowIndices('');
objS.getRowsTemplate().refresh();
}


if(searchcriteria !=''){
if(rows.length >0){
objS.setRowCount(rows.length);
objS.setRowIndices(rows);
objS.getRowsTemplate().refresh();
}
else{
objS.setRowCount(max2);
objS.setRowIndices('');
objS.getRowsTemplate().refresh();
alert('no match');
objS.setHeaderText('',Xcol,1);
obj3.getHeadersTemplate(1, "center").refresh();
}
}
},200);

}




var obj3 = new AW.Grid.Extended;
obj3.setCellText(function(i, j){return j + "-" + i});
obj3.setHeaderText(["header1", "header2", "header3", "header4", "header5", "header6", "header7", "header8", "header9", "header10"], 0);
obj3.setHeaderCount(2);
obj3.setFixedLeft(0);
obj3.getHeadersTemplate(1, "center").setStyle('background', 'lightyellow');


obj3.setColumnCount(10);
obj3.setRowCount(100);

obj3.onHeaderClicked = function(event, col, header) {
if (header == 1) {

obj3.setHeaderText('', 0);
var inp = new AW.UI.Input;
inp.setStyle('background', 'lightyellow');
inp.getContent('box/text').setStyle('color', 'green');
obj3.setHeaderTemplate(inp, col, 1);
obj3.getHeaderTemplate(col, 1).onControlEditEnded = function() {
var text = this.getControlText();
obj3.setHeaderTemplate(new AW.Grid.Header, col, 1);
obj3.setHeaderText(text, col, 1);
obj3.getHeaderTemplate(col, 1).getContent('box/text').setStyle('color', 'green');

var scrollLeft = obj3.getViewTemplate("box", "top", "center").element().scrollLeft;
obj3.getHeadersTemplate(1, "center").refresh();
obj3.getViewTemplate("box", "top", "center").element().scrollLeft = scrollLeft;

if(text !=''){ filter3(obj3,text,col); }
if(text ==''){ filter3(obj3,'',col); }
}
var scrollLeft = obj3.getViewTemplate("box", "top", "center").element().scrollLeft;
obj3.getHeadersTemplate(1, "center").refresh();
obj3.getViewTemplate("box", "top", "center").element().scrollLeft = scrollLeft;

obj3.getHeaderTemplate(col, 1).focus();
}
}

max = obj3.getRowCount();
max2 = max;

document.write(obj3);

alrelady treid that one in the formum it didnt work, error all over the place.

Mmmmm,
alrelady treid that one in the formum?
Seems that your intention is different.
You might post a code snnipet,... or hire a javascript Guru.
Good luck.

That code you posted is the same code that is listed in another topic of the forum...

I am going to email support and ask for a refund, thanks AW

I emailed support with no reply about my refund!

I emailed support with no reply about my refund!

I did not receive anything - please try sending from a different email address.