this is old topic,Set the first row to enter search criteria

this is old topic, i want to know how to resolve this problem in 2.0 .

I just want the first row of the grid to enter the search criteria. Some of the columns of the first row can include Select template/input template. The search results are populated in the same grid excluding the first row. I should be able to sort on the column headers, but the sorting process should not consider the first row into consideration

In short, the first row should the editable where I can have select boxes and text boxes in the columns, but the displayed result rows should be read-only.

Hope somebody can really help me to resolve this problem.

Binu Nadesan
Wednesday, November 10, 2004
http://www.activewidgets.com/javascript.forum.2603.7/set-the-first-row-to.html

sxf

October 21,

One possible way of doing so using AW.UI.Inputs as 2nd column (text-array) and using "onControlTextChanged" (like autocomplete filtering)
Is:

var obj = new AW.Grid.Extended;
obj.setHeaderCount(2);

  for (i=0;i<myHeaders.length;i++){
 eval("var MyInp" + i + "= new AW.UI.Input");
 eval("MyInp" + i + ".setId('MyInpId" + i + "')");
 document.styleSheets[document.styleSheets.length-1].addRule("#MyInpId" + i , "width: 100%;"); 
 eval("MyInp" + i + ".onControlTextChanged = function(){SearchFunction (" + i + ")};");
 }

  obj.setHeaderText(function(){
  for (i=0;i<myHeaders.length;i++){ return eval("MyInp" + i ,i); }
  });	

Function SearchFunction(col){
////// search code here 
}

 obj.setCellText(myData);
 obj.setHeaderText(myHeaders,0);// replace previous text(inputs) with normal array-text for column header 0
 obj.setColumnCount(5); 
 obj.setRowCount(20); 
 document.write(obj);

But would be other and/or better ways to do it.
HTH

Carlos

October 24,

Add this line to reduce the input height.
document.styleSheets[document.styleSheets.length-1].addRule("#MyInpId" + i , "height: 87%;");

Carlos

October 24,

Thanks Carlos.
It's a good idear. It works very well.
but i think it has a little bug?

obj.setHeaderText(function(){
for (i=0;i<myHeaders.length;i++){ return eval("MyInp" + i ,i); }
});

will be changed to

obj.setHeaderText(function(i){
return eval("MyInp" + i ,i);
});

October 24,

Yes, Thanks for review it (four eyes can see more than two)...;-)

Carlos

October 24,

And also join both style lines in one:
document.styleSheets[document.styleSheets.length-1].addRule("#MyInpId" + i , "width: 100%; height: 87%;");

October 24,

The above is a good exmaple.
But I'm facing a problem if the result of search data are too few(I'm not sure this is the REAL problem?!) in HTML FRAME, the FIRST COLUMN of grid will be disappered. But no problem without FRAME.

Pls read the code below,
-------------------
frame.html
-------------------
<html>
<head>
<title>Grid</title>
</head>
<frameset rows="*,22" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
<frame src="main.html" name="mainpg" noresize scroll="no">
<frame src="bottom.html" name="bottompg">
</frameset>
</html>
****************************
-------------------
bottom.html
-------------------
<html>
<head>
<title></title>
<style>
body, html, td {margin:0px; padding: 0px; overflow: hidden;font: menu;border: none;}
input {font: menu}
</style>
<script language="javascript">

</script>
</head>
<body>
<form name="mmfm" action="main.html" target="mainpg" method="post">
<table width="100%">
<tr>
<td nowrap="nowrap">
Status
<select name="srhstatu" onchange="go2(this, '')" style="font:messagebox">
<option value=""></option>
<option value="1">All</option>
</select>
<input type="button" value="new window" onclick="go2('a', 'abc')" />
</td>
<td nowrap="nowrap"width="50"></td>
</tr>
</table>
</form>
</body>
</html>
************************
-------------------
main.html
-------------------
<HTML><HEAD>
<TITLE>Grid</TITLE>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>

<STYLE>.aw-grid-control {
BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT: menu; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none; HEIGHT: 100%
}
.aw-column-0 {
WIDTH: 65px
}
.aw-column-1 {
WIDTH: 70px
}
.aw-row-1 {
BORDER-RIGHT: buttonshadow 1px solid
}
.aw-row-selector {
WIDTH: 16px; TEXT-ALIGN: center
}
.aw-grid-cell {
BORDER-RIGHT: buttonshadow 1px solid
}
.aw-grid-row {
BORDER-BOTTOM: threedlightshadow 1px solid
}
.aw-mouseover-row .aw-row-selector {
BACKGROUND: #ccc
}
</STYLE>

</HEAD>
<BODY>
<xml id=xmlDataOrder>
<Document>
<Invoice>
<invno>0002000</invno>
<itemno>0000468</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0001156</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0001172</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0001172</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0001173</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0001173</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0002390</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0006077</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0006078</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0006080</itemno>
</Invoice>
<Invoice>
<invno>0002000</invno>
<itemno>0012436</itemno>
</Invoice>
</Document>
</xml>
<SCRIPT>

// create ActiveWidgets data model - XML-based table
var table = new AW.XML.Table;

// get reference to the xml data island node
var xml, node = document.getElementById("xmlDataOrder");

// IE
if (window.ActiveXObject) {
xml = node;
}
// Mozilla
else {
xml = document.implementation.createDocument("","", null);
xml.appendChild(node.selectSingleNode("*"));
}

// provide data XML
table.setXML(xml);

// define column labels
var columns = ["Invoice", "ORDER NO"];
var flds = ["invno", "itemno"];

// create ActiveWidgets Grid javascript object
var obj = new AW.Grid.Extended;
obj.setHeaderCount(2);

for (i=0;i<flds.length;i++){
eval("var MyInp" + i + "= new AW.UI.Input");
eval("MyInp" + i + ".setId('" + flds[i] + "')");
document.styleSheets[document.styleSheets.length-1].addRule("#" + flds[i] , "width: 100%; height: 87%;");
eval("MyInp" + i + ".onControlTextChanged = function(){SearchFunction ()};");
}

obj.setHeaderText(function(i){
return eval("MyInp" + i ,i);
});

function SearchFunction(){
var boxes = document.getElementsByTagName("input");
var inp = "";
var qrystr = "?act=srh";
for (var i=0; i<boxes.length; i++) {
inp = boxes(i);
if (inp.value != "") {
qrystr = qrystr + "&" + inp.id + "=" + inp.value;
}
}
window.location = "http://localhost:8080/inv.do"+qrystr;
return true;
}
obj.setHeaderText(columns, 0);
obj.setColumnCount(columns.length);
obj.setVirtualMode(true);
obj.setSelectionMode("single-row");
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
obj.setSelectorWidth(18);
obj.setFixedLeft(1);

obj.setRowCount(11);
obj.setCellModel(table);
document.write(obj);
</SCRIPT>
</BODY></HTML>
************************
Any help would be appreciated.
Thanks

Jarlau

November 5,

This topic is archived.

this is old topic,Set the first row to enter search criteria

See also:

Search

New Data Grid

Version 2