3.2.0
Forum Demo Guide API Store

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

}
Joe
August 6,
Anyone?
August 8,
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.
August 8,
anyone?
August 10,
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);
C++
August 10,
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.
Jill
August 10,
Check also this post:
http://www.activewidgets.com/javascript.forum.13008.4/complex-html-form-in-a.html
C++
August 10,
AW.Grid.Extended is needed for multi-header rows.
C++
August 10,
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");
Jill
August 10,
cool i got it
Jill
August 10,
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?
Jill
August 10,
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);
    }
Jill
August 10,
The code above does alert me of anything, i press enter on the box, and it thats it.
Jill
August 10,
So if i find a match in obj.getCellValue()
How do i get the id row to pas it to the setscrolltop function?
Jill
August 10,
Any difference by using getCellText instead of getCellValue ?
C++
August 10,
dont know...
just dont know how to get the row id, if there is a match.
Jill
August 10,
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); 
            }  
        }  
    }
August 11,
Use:
obj.getRowPosition(i)
Please avoid open multiple threads for same issue.
August 11,
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
}
        }   
    }
Tiff
August 11,
I would like to know the above also.

How do you hide a row your currently on in the loop, or unhide it?
Garret
August 12, 
var totcols=obj.getColumnCount();

function searchwithhideshow(text, col){ 
  var visiblecolmatch=[];
var visiblecolNOmatch=[];
      for (k=0; k<totcols; k++){   
visiblecolmatch[k]=k;
if (col<k){ visiblecolNOmatch[k] = k}
if ( col>k){ visiblecolNOmatch[k-1] = k }
  }      
        var i, rows = [], max = obj.getRowCount();   

        for (i=0; i<max; i++){   
 if (obj.getCellValue(col,i).toLowerCase().search(text.toLowerCase()) > -1){   
                obj.selectRow(i);  
                obj.setScrollTop(obj.getRowPosition(i) * 18);  
//SHOW COLUMN
obj.setColumnCount(totcols);
obj.setColumnIndices(visiblecolmatch);
            }else{
//SINCE NO MATCH HIDE COLUMN
obj.setColumnCount(totcols-1);
obj.setColumnIndices(visiblecolNOmatch);
}
obj.refresh();
        }   
    }  

input1.onControlValidated = function(text){ 
searchwithhideshow(text, 1) }
August 12, 
var totcols=obj.getColumnCount();

function searchwithhideshow(text, col){ 
  var visiblecolmatch=[];
var visiblecolNOmatch=[];
      for (k=0; k<totcols; k++){   
visiblecolmatch[k]=k;
if (k<col){ visiblecolNOmatch[k] = k} //////
if ( k>col){ visiblecolNOmatch[k-1] = k } //////
  }      
        var i, rows = [], max = obj.getRowCount();   

        for (i=0; i<max; i++){   
 if (obj.getCellValue(col,i).toLowerCase().search(text.toLowerCase()) > -1){   
                obj.selectRow(i);  
                obj.setScrollTop(obj.getRowPosition(i) * 18);  
//SHOW COLUMN
obj.setColumnCount(totcols);
obj.setColumnIndices(visiblecolmatch);
            }else{
//SINCE NO MATCH HIDE COLUMN
obj.setColumnCount(totcols-1);
obj.setColumnIndices(visiblecolNOmatch);
}
        }   
obj.refresh(); //////
    }  

input1.onControlValidated = function(text){ 
searchwithhideshow(text, 1) }
August 12,
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?
Garret
August 12,
I am using 2.5
With IE7
Garret
August 12,
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.
Garret
August 12,
anyone?
Garret
August 12,
anyone?
Garret
August 13,
anyone?
Garret
August 16,
anyone?
Garret
August 17,
anyone?
Garret
August 18,
Do you have a working example that we can look at?
Erik Dobrie
August 18,
Guess that what Garret need is:
http://www.activewidgets.com/javascript.forum.19871.11/filter-built-into-header-in.html
August 18,
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.
Garret
August 18,
anyone?
Garret
August 19,
Garret,

sorry, I don't understand your question. What exactly you want us to do?
Alex (ActiveWidgets)
August 19,
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.
Garret
August 20,
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;	
}
Jez (True Track Software)
August 21,
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.../
Garret
August 23,
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..
Garret
August 23,
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);
C++
August 23,
alrelady treid that one in the formum it didnt work, error all over the place.
Garret
August 24,
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.
August 24,
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
Garret
August 26,
I emailed support with no reply about my refund!
Garret
August 30,
I emailed support with no reply about my refund!
Garret
August 30,
I did not receive anything - please try sending from a different email address.
Alex (ActiveWidgets)
August 30,

This topic is archived.

See also:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Grid in Grid - Inner grid lacks scroolbars Diego Vilar (13)
2.0 - I need a Grid inside a Grid Rob Francis (17)
How do you add an image to the first column in a grid? L. Aragon (17)
Column Header DropdownBox Filter Example Required Andy (28)
RC1 Example & Question: Combo in a grid column. Rob Francis (13)
Refresh Grid joe (27)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
Grid Header Column and Data rows column width do not match Ravindra Joshi (5)
Hiding columns Kwooda (16)

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