3.2.0
Forum Demo Guide API Store

Searchable Grid

Hi,
I have put togather a code which searches the grid for a keyword in a particular column. But need a lot of improvement.
Note: Please make necessary changes in the includes of css and .js to make it work
Regards,
Nilesh Manohar
Code : 
<html>
<head>
    <title>ActiveWidgets - Grid widget</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="activeui.css" rel="stylesheet" type="text/css" ></link>
    <script src="activeui.js"></script>

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

        .active-column-0 {width:  80px;}
        .active-column-1 {width: 200px;}
        .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;background-color: white;}
    </style>
    <script>
        var obj = new Active.Controls.Grid;
        var myData = [
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"]
            ];

        var myColumns = ["Ticker", "Company Name", "Products"];
            function drawGrid()
                    {
                        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){window.status = src.getProperty("item/text")});
                        document.write(obj);
        }
        function populateListBox()
                {
                    for(var c=0; c<myColumns.length; c++)
                    {
                        document.write("<option value="+c+">"+myColumns[c]+"</option>");
                    }
        }
        function searchGrid()
        {
            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>";
        }
</script>
</head>
<body>
<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();">
</form>
</td>
</tr>
<tr>
<td>
<div id=result>
</div>
<tr>
<td width=650 height=300>
    <script>
    drawGrid();
    </script>
    </td>
    </tr>
    </table>
</body>
</html>
Nilesh Manohar
March 25,
Cool! Many thanks for posting this example!
Alex (ActiveWidgets)
March 28,
Hi Alex,
I am also working on the paging of data. Hope I will be able to post that code soon as well.
Regards,
Nilesh Manohar
Nilesh Manohar
March 29,
This example takes Nilesh's code a little further and sorts the table so that the items found in the search go to the top of the table. To do this, as well as changing the colors of the matching rows, it adds "<!--A--> to the cells that matched and "<!--x--> to those that did not. This allows it to sort but does not change the visable contents (because they are HTML comments). Sorry it is crude but I am a 'C' programmer and only just learning JavaScript. 

<html>
<head>
    <title>ActiveWidgets - Grid widget</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

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

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

        .active-column-0 {width:  80px;}
        .active-column-1 {width: 200px;}
        .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;background-color: white;}
    </style>
    <script>
        var obj = new Active.Controls.Grid;
        var myData = [
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"],
            ["MSFT","Microsoft Corporation", "Windows"],
            ["REDH","Red Hat Linux", "Linux"],
            ["Suse","Suse Linux", "Linux"],
            ["IBM","IBM Ltd.", "Websphere"],
            ["BEA","BEA Systems", "Weblogic"],
            ["APAC","Apache Org", "Tomcat"]
            ];

        var myColumns = ["Patient", "Accession", "File name"];
            function drawGrid()
                    {
                    	   
                        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){window.status = src.getProperty("item/text")});
                        document.write(obj);
        }
        function populateListBox()
                {
                    for(var c=0; c<myColumns.length; c++)
                    {
                        document.write("<option value="+c+">"+myColumns[c]+"</option>");
                    }
        }
        function searchGrid()
        {
            var colToBeSearched = document.forms['gridSearchForm'].colSearchName.value;
            var toSearch = document.forms['gridSearchForm'].keyword.value;
            var res = 0;
           
            // scan through the table and add an HTML comment "A" to the lines that match
            // and a "X" to the lines that do not
            for(var x=0; x<myData.length; x++)
            {
                if((myData[x][colToBeSearched].indexOf(toSearch)) >= 0)
                {
                    myData[x][colToBeSearched] = "<!--A-->"+myData[x][colToBeSearched];
                    res++;
                }
                else
                {
                    myData[x][colToBeSearched] = "<!--x-->"+myData[x][colToBeSearched];
                }
            }
            
            // re-srt the table so the rows with the "A" comment float to the top
            obj.sort(colToBeSearched, "ascending");
            obj.refresh();
            
            // now scan through the table again, changing the colors of the rows we marked
            // as matching the sort criteria
            for(var x=0; x<myData.length; x++)
            {
                if((myData[x][colToBeSearched].indexOf("<!--A-->")) >= 0)
                {
                    obj.getTemplate("row", x).setStyle("color", "white");
                    obj.getTemplate("row", x).setStyle("background", "blue");
                    myData[x][colToBeSearched] = "<!--A-->"+myData[x][colToBeSearched];
                    res++;
                }
                else
                {
                    obj.getTemplate("row", x).setStyle("color", "black");
                    obj.getTemplate("row", x).setStyle("background", "white");
                    myData[x][colToBeSearched] = "<!--x-->"+myData[x][colToBeSearched];
                }
            }
            document.getElementById('result').innerHTML = "<b>Number of matches : "+res+"</b>";
        }
</script>
</head>
<body>
<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();">
</form>
</td>
</tr>
<tr>
<td>
<div id=result>
</div>
<tr>
<td width=650 height=300>
    <script>
    drawGrid();  
    </script>
    </td>
    </tr>
    </table>
</body>
</html>
Steve Beaver
February 16,
That is a great idea Steve, well done
AcidRaZor
February 17,
I have found that pressing the Enter key after entering data in the search box causes the page to reload immediately after the search has been performed causing the search results to be lost.

I have tried a umber of remedies for this but without success.

<input type=text name=keyword onchange="javascript:searchGrid();">

seemed like a good idea but did not change the behavior.

Any ideas?
Steve Beaver
February 17,

Guess that input is inside some form, if yes then adding onsubmit="return false" will make you happy :-) do similar work-around if no form.

Cheers,
Sudhaker Raj
http://theJ2EE.com
Sudhaker Raj
February 17,
Thank you. That causes it to take no action when the Enter key is pressed which effectively makes the user use the proper button!

I have made a couple of other refinements to the code. If you make a second search right after the first one, you must remove the HTML comments that were poked into the data before adding new ones. I also found that the library does not sort a table if it was already sorted this way. A work around is add obj.sort(colToBeSearched, "decending"); before the line obj.sort(colToBeSearched, "ascending"); above.

I'll post the finished example if anyone wants it.
Steve Beaver
February 17,
In Steve's example, the two loops end up adding stacks of <--x--><--x--><--A--> strings in the underlying values for the selected column.

The following modified loop removes these strings after the table has been sorted, during the process of colouring rows. This helps when retrieving values to carry forward. 

for(var x=0; x<myData.length; x++) {
  var str = myData[x][colToBeSearched];
  if((str.indexOf("<!--A-->")) >= 0) { 
    obj.getTemplate("row", x).setStyle("color", "white"); 
    obj.getTemplate("row", x).setStyle("background", "blue"); 
    myData[x][colToBeSearched] = str.substr(8,20); 
    res++; 
  } else {
    obj.getTemplate("row", x).setStyle("color", "black"); 
    obj.getTemplate("row", x).setStyle("background", "white");
    myData[x][colToBeSearched] = str.substr(8,20); 
  } 
}
Christian (siliconbrits)
February 27,
Hmmm...

I have some wierd behaviour using this method that I can't figure out.

This behaviour occurs when I am using the Steve Beavers codebase, with or without the modified function I last posted.

The problem is that sometimes fields do not move to the top of the table. Try it with the following code/data and do a search for the string "02-26" on Date. Try it as the first search, or another search later, its entirely reproducable, and having reviewed the code, I dont think it is Steve's Algorithm - it may be something deeper in the AW code. (but then, its late, I'm tired.....)

Anyway, try it out and let me know what you think. I've added a function resetGrid(), which solves a bunch of other issues, but apart from that there's no real code modifications. 

function resetGrid() {
    obj.sort(0, "ascending"); 
    obj.refresh();
    obj.setSelectionProperty("values", []);
    for(var x=0; x<myData.length; x++) {
        obj.getTemplate("row", x).setStyle("color", "white"); 
        obj.getTemplate("row", x).setStyle("background", "blue"); 
    }	  
}


Note: There's still a bunch of formatting stuff in this code, but I dont have the time to strip it down further, and make sure it will work it you cut&paste, so please accept my apologies for the lengthy post.

Here's the code: 

<html> 
<head> 
<title>ActiveWidgets - Grid widget</title>
<style> 
   table,tr,td{border-bottom: 1px solid threedlightshadow;background:#ebeadb;font-size: 9pt;}
   :hover input {background: #fcfdff; border-color: #fcc247}
   body {overflow: hidden;background:#EEEEEE;color:#000066;padding:20px;font-family:Helvetica;font-size:9pt;}
</style> 

<!-- ActiveWidgets stylesheet and scripts --> 

<link href="script/ActiveWidgets/runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="script/ActiveWidgets/runtime/lib/grid.js"></script>

<!-- grid format --> 
<style> 
   .active-controls-grid {height: 100%; font: menu;} 
   .active-column-0 {width: 120px; text-align: center;} 
   .active-column-1 {width: 60px; text-align: center;} 
   .active-column-2 {width: 120px; text-align: left;} 
   .active-column-3 {width: 60px;text-align: center;} 
   .active-column-4 {width: 80px;text-align: right;} 
   .active-column-5 {width: 80px;text-align: right;}    
   .active-grid-column {test-align: left;border-right: 1px solid threedshadow;} 
   .active-grid-row {border-bottom: 1px solid threedlightshadow; background-color: white;}
</style> 

<script> 
var obj = new Active.Controls.Grid;

var myData = [
["2005-02-25 04:31:04","WT-00-01","Willmotts","FR0001","10000.00","10000.00"],
["2005-02-25 04:31:34","WT-00-02","Parkinson Farms","FR0002","10000.00","9800.00"],
["2005-02-25 04:31:50","WT-00-03","Dibble & Scrubbit","FR0003","3000.00","3500.00"],
["2005-02-25 04:32:30","WT-00-04","Shovel and Diggitt","FR0004","4000.00","3000.00"],
["2005-02-25 04:32:57","WT-00-05","Not Set","FR0001","10000.00","10000.00"],
["2005-02-25 04:34:25","WT-00-06","Not Set","FR0002","6200.00","6000.00"],
["2005-02-26 09:15:54","WT-00-07","Not Set","FR0003","3000.00","2000.00"],
["2005-02-26 09:16:13","WT-00-08","Not Set","FR0001","3000.00","2000.00"],
["2005-02-27 03:30:01","WT-00-09","Not Set","FR0003","9000.00","2000.00"],
["2005-02-27 03:30:29","WT-88-78","Not Set","FR0001","789.00","567.00"],
["2005-02-27 03:30:48","WT-00-10","Stepsons","FR0005","10000.00","9000.00"],
["2005-02-27 03:31:12","WT-00-11","Stepsons","FR0005","5678.00","4564.00"],
["2005-02-27 03:31:32","WT-00-12","Stepsons","FR0006","12990.00","11922.98"],
["2005-02-27 03:32:05","WT-00-13","Not Set","FR0001","6578.00","4568.00"],
["2005-02-27 03:32:27","WT-00-14","Stepsons","FR0005","4568.00","3465.67"]];

var myColumns = ["Date","Ticket","Grower","Field", "Loaded KG", "Washed KG"];	

/**
 * Extract the value of column 'ticket' from the current selected row
 * to a form field
 *
 */
function setTicket (src) {
   var index=src.getProperty("item/index");
   document.ticketSelector.ticket.value=myData[index]['1'];
}

/**
 * Reset the Grid object to its initial state, including selects and colours.
 */
function resetGrid() {
    obj.sort(0, "ascending"); 
    obj.refresh();
    obj.setSelectionProperty("values", []);
    for(var x=0; x<myData.length; x++) {
        obj.getTemplate("row", x).setStyle("color", "white"); 
        obj.getTemplate("row", x).setStyle("background", "blue"); 
    }	  
}
    
function drawGrid() { 
    var row = new Active.Templates.Row;
    row.setEvent("ondblclick", function(){this.action("myAction")});
    obj.setTemplate("row", row);
    obj.setAction("myAction", setTicket);
    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){window.status = src.getProperty("item/text")}); 
    document.write(obj); 
} 
   
function populateListBox() { 
    for(var c=0; c<myColumns.length; c++) { 
        document.write("<option value="+c+">"+myColumns[c]+"</option>"); 
    } 
} 
    
function searchGrid() {
    var colToBeSearched = document.forms['gridSearchForm'].colSearchName.value; 		
    var toSearch = document.forms['gridSearchForm'].keyword.value; 
        
    resetGrid();		
    var res = 0; 
    
    for(var x=0; x<myData.length; x++) { 
      if((myData[x][colToBeSearched].indexOf(toSearch)) >= 0) { 
    myData[x][colToBeSearched] = "<!--A-->"+myData[x][colToBeSearched]; 
    res++; 
      } else  { 
          myData[x][colToBeSearched] = "<!--x-->"+myData[x][colToBeSearched]; 
      } 
    } 

    // re-sort the table so the rows with the "A" comment float to the top 
    obj.sort(colToBeSearched, "ascending"); 
    obj.refresh(); 
     
    // now scan through the table again, changing the colors of the rows we marked 
    // as matching the sort criteria 
    for(var x=0; x<myData.length; x++) 
    {
        var str = myData[x][colToBeSearched];
        if((str.indexOf("<!--A-->")) >= 0) { 
            myData[x][colToBeSearched] = str.substr(8,20); 
            obj.getTemplate("row", x).setStyle("color", "white");
            obj.getTemplate("row", x).setStyle("background", "blue");
        } else { 
            myData[x][colToBeSearched] = str.substr(8,20); 
            obj.getTemplate("row", x).setStyle("color", "black"); 
            obj.getTemplate("row", x).setStyle("background", "white");					
        } 
    }
    document.getElementById('gridSearchForm').matches.value = res+" matches";

} 
</script>
</head> 
<body> 
    <table width="575" >
        <tr> 
        <form name="ticketSelector" id="ticketSelector">
            <td colspan="3" align="left" >Double-Click on a row to get the value of 'Ticket' column:
            </td>
            <td align="center"> 
            <input type="text" name="ticket" readonly="readonly" tabindex="-1">
            </td> 			
        </form> 
            <td>&nbsp</td> 			
        </tr> 
        <tr>
        <form name="gridSearchForm" id="gridSearchForm" onsubmit="return false"> 
            <td>
            Keyword:
                <input type="text" name="keyword"> 
            </td>
            <td align="center"> 
                    <select name="colSearchName">
                        <script>
                            populateListBox();
                        </script>
                    </select>
            </td>
            <td align="center"> 
                <a href="#"><input type="button" value="Search" onclick="javascript:searchGrid();"></a>
            </td>
            <td align="center"> 
                <input type="text" name="matches" readonly="readonly"> 	
            </td> 					
        </form>		
            <td>&nbsp</td> 			
        </tr>
        <tr> 
            <td colspan="4" width=575 height=300> 
                <script> 
                drawGrid(); 
                </script> 
            </td> 
            <td>&nbsp</td> 			
        </tr> 	
    </table>
</body> 
</html>
Christian (siliconbrits)
February 27,
The 1st example works great for me. However, I do not want to manualy load all the values of the table.

I am looking to replace this part of the code:
****************************************
var myData = [
["2005-02-25 04:31:04","WT-00-01","Willmotts","FR0001","10000.00","10000.00"],
["2005-02-25 04:31:34","WT-00-02","Parkinson Farms","FR0002","10000.00","9800.00"],
["2005-02-25 04:31:50","WT-00-03","Dibble & Scrubbit","FR0003","3000.00","3500.00"],
["2005-02-25 04:32:30","WT-00-04","Shovel and Diggitt","FR0004","4000.00","3000.00"],
["2005-02-25 04:32:57","WT-00-05","Not Set","FR0001","10000.00","10000.00"],
["2005-02-25 04:34:25","WT-00-06","Not Set","FR0002","6200.00","6000.00"],
["2005-02-26 09:15:54","WT-00-07","Not Set","FR0003","3000.00","2000.00"],
["2005-02-26 09:16:13","WT-00-08","Not Set","FR0001","3000.00","2000.00"],
["2005-02-27 03:30:01","WT-00-09","Not Set","FR0003","9000.00","2000.00"],
["2005-02-27 03:30:29","WT-88-78","Not Set","FR0001","789.00","567.00"],
["2005-02-27 03:30:48","WT-00-10","Stepsons","FR0005","10000.00","9000.00"],
["2005-02-27 03:31:12","WT-00-11","Stepsons","FR0005","5678.00","4564.00"],
["2005-02-27 03:31:32","WT-00-12","Stepsons","FR0006","12990.00","11922.98"],
["2005-02-27 03:32:05","WT-00-13","Not Set","FR0001","6578.00","4568.00"],
["2005-02-27 03:32:27","WT-00-14","Stepsons","FR0005","4568.00","3465.67"]];
*****************************************


With something like this:
*****************************************
// provide data URL - plain text comma-separated file
table.setURL("../data/companies.csv");
*****************************************

So that all the table values are in a file, and dont have to be manually put on the page. Can someone PLEASE help!!!
Ian
March 8,
ian,

did you ever figure out how to use the above examples of the searchable grid to work using data from a csv file as you requested?

i DESPERATELY need a searchable grid, that is populated using a csv file, ideally returning the results.

please!

someone?

thanks!
dano
April 27,
what i have so far . . .

yes . . . it's got some issues.

please help?

anyone?

_____________________________________

<html>
<head>
<title>Inventory List</title>
<style>
table,tr,td{border-bottom: 1px solid threedlightshadow;background:#ebeadb;font-size: 9pt;}
:hover input {background: #fcfdff; border-color: #fcc247}
body {
overflow: hidden;
background:#EEEEEE;
color:#000066;
padding:20px;
font-family:Helvetica;
font-size:9pt;
background-color: #EBEADB;
margin-left: 0px;
margin-top: 0px;
}
</style>

<!-- ActiveWidgets stylesheet and scripts -->

<link href="script/ActiveWidgets/runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="script/ActiveWidgets/runtime/lib/grid.js"></script>

<!-- grid format -->
<style>
.active-controls-grid {height: 100%; font: menu;}
.active-column-0 {width: 120px; text-align: left;}
.active-column-1 {width: 120px; text-align: left;}
.active-column-2 {width: 75px; text-align: left;}
.active-column-3 {width: 75px; text-align: left;}
.active-column-4 {width: 150px; text-align: left;}
.active-column-5 {width: 75px; text-align: left;}
.active-grid-column {test-align: left;border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow; background-color: white;}
.style1 {
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
</style>

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>
<script>

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

// URL - Location of csv file
table.setURL("ActiveWidgets/data/inventory.csv");

var myData = ("ActiveWidgets/data/inventory.csv");

// Start of asyncronous data retrieval
table.request();

// Column Labels
var columns = ["PART #", "MFG", "D/C", "QTY", "DESC", "PART PKG"];

// ActiveWidgets Grid javascript objects
var obj = new Active.Controls.Grid;

// Provide column labels
obj.setColumnProperty("texts", columns);

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

</script>
<script>

function drawGrid() {
var row = new Active.Templates.Row;
obj.setTemplate("row", row);
obj.setDataText(function(i, j){return myData[i][j]});
obj.setProperty("selection/multiple", true);
obj.setAction("click", function(src){window.status = src.getProperty("item/text")});
document.write(obj);
}

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

function searchGrid() {
var toSearch = document.forms['gridSearchForm'].keyword.value;

resetGrid();
var res = 0;

for(var x=0; x<myData.length; x++) {
if((myData[x][colToBeSearched].indexOf(toSearch)) >= 0) {
myData[x][colToBeSearched] = "<!--A-->"+myData[x][colToBeSearched];
res++;
} else {
myData[x][colToBeSearched] = "<!--x-->"+myData[x][colToBeSearched];
}
}

// re-sort the table so the rows with the "A" comment float to the top
obj.sort(colToBeSearched, "ascending");
obj.refresh();

// now scan through the table again, changing the colors of the rows we marked
// as matching the sort criteria
for(var x=0; x<myData.length; x++)
{
var str = myData[x][colToBeSearched];
if((str.indexOf("<!--A-->")) >= 0) {
myData[x][colToBeSearched] = str.substr(8,20);
obj.getTemplate("row", x).setStyle("color", "white");
obj.getTemplate("row", x).setStyle("background", "blue");
} else {
myData[x][colToBeSearched] = str.substr(8,20);
obj.getTemplate("row", x).setStyle("color", "black");
obj.getTemplate("row", x).setStyle("background", "white");
}
}
document.getElementById('gridSearchForm').matches.value = res+" matches";

}
</script>
<table width="666" >
<tr>
<form name="InventorySearch" id="InventorySearch">
<td colspan="4" align="left" ><div align="center"><span class="style1">Search the Current Part Inventory</span> </div></td>
</form>
</tr>
<tr>
<form name="gridSearchForm" id="gridSearchForm" onsubmit="return false">
<td width="221" nowrap>
<span class="style1">Keyword:</span>
<input type="text" name="keyword">
</td>
<td width="56" align="center">
<div align="left"><a href="#">
<input type="button" class="active-grid-column" onclick="javascript:searchGrid();" value="Search">
</a>
</div></td>
<td width="377" colspan="2" align="center">
<textarea name="matches" readonly="readonly"></textarea>
</td>
</form>
</tr>
<tr>
<td colspan="4" height=300>
<script>
drawGrid();
</script>
</td>
</tr>
</table>
</body>
</html>
dano
April 27,
I almost got it to work (the search on data coming from CSV). Getting the data to show, but the search isn't quite working.

will post actual useful info if I get it to work.
ted
April 28,
If you could post the code for that, you would be a lifesaver!

THANKS!!

Dano
April 29,
I cheated because I gave up on making the searchable grid work. Here is an asp file that I created that takes a "case sensitive" keyword, searches for that keyword in the csv file, for each line with that keyword, it writes that line to a new temp csv file, then uses the temp csv file to display a grid.

<%
'---- format Values ----
Const ForAppending = 8
Const ForReading = 1
Const ForWriting = 2

'---- format Values ----
Const TristateFalse = 0
Const TristateMixed = -2
Const TristateTrue = -1
Const TristateUseDefault = -2


Set FSO = CreateObject("Scripting.FileSystemObject")
if (fso.FileExists("D:\web\access\site4\maps\Search.csv")) THEN
fso.DeleteFile("D:\web\access\site4\maps\Search.csv")
End If
Set f = fso.CreateTextFile("D:\web\access\site4\maps\Search.csv", True)
Set CSVFile = fso.GetFile("D:\web\site4\maps\data\maps.csv")
Set ts = CSVFile.OpenAsTextStream(ForReading, TristateUseDefault)

Do While ts.AtEndOfStream <> True
linestr = ts.readline
strSearch = request("strSearch")

if instr(linestr, strSearch) then
f.writeline linestr
end if
Loop
f.close
ts.close

Set FSO = Nothing
Response.Redirect "ViewSearchResults.htm"
%>
KuHwkFan
July 21,
Hi,

How to use the searchable grid with an xml file.
I ve tried many ways but it doesn't work.
I use this schema for the xml file
<Tickets>
<TicketType>
<Date>2005-02-25 04:31:04</Date>
<Ticket>WT-00-01</Ticket>
<Grower>Willmotts</Grower>
<Field>FR0001</Field>
<LoadKG>55000</LoadKG>
<WashedKG>55000</WashedKG>
</TicketType>
</Tickets>

If anybody could help..


Stan
September 1,
Im doing an app with XML data files involving filters and search fields. I use ASP and XSL to tranform my XML file on the fly and send it to the grid (filtered)...
Olivier
November 15,

This topic is archived.

See also:

Does grid template support mysql? VERY-UPSET-DUDE (40)
Firefox problem with grid inside a div Corbin (27)
is there a way to get the first 15 rows of the grid? JJ (24)
Scrolling / Grid height bug when grid not first thing in window. Adrien de Croy (11)
Dropdown Grid Template Austin Mayberry (21)
Add and Delete a row in Grid MAK (21)
TagLib for ActiveWidgets Grid Sudhaker Raj (17)
Eventhandler collision between jscalendar and grid with Firefox Dietrich (18)
disabling entire grid? Sergei (17)
Client side Grid Export To Excel Leon Van Zyl (17)

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