Set the first row to enter search criteria

Hi All,

How do I do the following task on the grid?

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

November 10,

I use a tricky visual "effect" (two grids shows as just one) in a demo I made.
I explain it, the first gird have only headers and 1 row (editable) to enter search criteria, the second grid has column-headers (hiden), so looks like you are only into one grid.
Need to asign a function to grid1-headers to sort grid2-data.
The penalty is that you lost the resize-columns (not really sure if can be done programmatically) {I remember a post that tells how resize works}).
Hope given Ideas

Carlos

November 10,

Hi Carlos,

Can you post your example here please.

Binu Nadesan

November 12,

Unfortunately this example have an extremelly large number of code lines, but I try to make you a fast one by (copy-paste, so don't expect a cleany code) It's based on the two grids in one page.
Has some errors, but main functionallity works, also I could not locate the resize post , so it is disabled.
Hope helps

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>


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


<style>
#grid1 {height: 40px; border: 2px inset; background: LIGHTYELLOW}
#grid2 {height: 100px; border: 2px inset; background: white}

#grid1 .active-column-1 {width: 200px; }
#grid2 .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-row {border-bottom: 1px solid threedlightshadow;}
.active-grid-column {border-right: 1px solid threedlightshadow;}

</style>



</head>
<body>

<script>
var data2 = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"], ];

var data1 = [["", "", "", "", ""]];
var columns1 = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
var columns2 =[[" ", " ", " ", " ", " "]];

var colToBeSearched =0 ;
var toSearch = "" ;
var clonedata1 = [];

var obj1 = new Active.Controls.Grid;
obj1.setId("grid1");
obj1.setRowProperty("count", 1);
obj1.setColumnProperty("count", 5);
obj1.getDataText = function(i, j){return data1[i][j]};
obj1.setDataText = function(value, i, j){data1[i][j] = value};
obj1.setColumnProperty("text", function(i){return columns1[i]});

// set blank index column
obj1.setRowProperty("text", function(i){return ""});
obj1.setRowText("");

// disable sort in grid1 and assign to each header button another event (function call))
// in current sample sort in grid-2
obj1.getTemplate("top/item").setEvent("onmousedown", headerClickedfunc);

// function ( line above))
function headerClickedfunc(e) {

var botonfunc = e.srcElement.id;
var posbotonfunc = botonfunc.indexOf(":" ,12);
var numbotonfunc = botonfunc.charAt(posbotonfunc+1);

var lastcolord = obj2.getSortProperty("index");
var lastcoldir = obj2.getSortProperty("direction");

if(numbotonfunc=="0"){}
if(numbotonfunc=="2") {}
if(numbotonfunc=="3") {}
if(numbotonfunc=="4") {}

if (lastcolord == numbotonfunc)
{
if(lastcoldir == "ascending") { obj2.sort(numbotonfunc, "descending");}
else{obj2.sort(numbotonfunc, "ascending");}
}
else{obj2.sort(numbotonfunc, "ascending"); }

obj2.refresh();

}
//********************************

// ---------------------
obj1.styleSheet = document.styleSheets[document.styleSheets.length-1];

// disables all column resize
obj1.styleSheet.addRule("#grid1 .active-box-resize", "display: none;");

//disable select-row in grid-1
obj1.setAction("selectRow", null);
obj1.setEvent("onkeydown", null);

// set the focus (to this) on mouse over
function headerOVERfunc(e) {this.element().focus(); }
obj1.getTemplate("top/item").setEvent("onmouseover", headerOVERfunc);

// make input box selectable
obj1.getTemplate("top").setEvent("onselectstart", obj1.getEvent("onselectstart"));
obj1.setEvent("onselectstart", null);

obj1.setRowHeaderWidth("55px");

// asign Edit Templates
var inputsear1 = new My.Templates.Input;
obj1.setColumnTemplate(inputsear1, 0);

var inputsear2 = new My.Templates.Input;
obj1.setColumnTemplate(inputsear2, 1);

var inputsear3 = new My.Templates.Input;
obj1.setColumnTemplate(inputsear3, 2);

var inputsear4 = new My.Templates.Input;
obj1.setColumnTemplate(inputsear4, 3);

var inputsear5 = new My.Templates.Input;
obj1.setColumnTemplate(inputsear5, 4);

//text of top left corner
obj1.getLayoutTemplate().setContent("corner/box/item", "SEARCH");

//events for corner
var corner = obj1.getLayoutTemplate().getContent("corner");
corner.setEvent("onmouseover",CORNEROVERfunc);
corner.setEvent("onclick", GETVALUETHENSEARCH);

function CORNEROVERfunc(e) {corner.element().focus(); }

//clear all searching values / then refresh / then put only the last / then search
function GETVALUETHENSEARCH(){

for(var x=0; x< columns1.length; x++) {
var col = x;
if(obj1.getProperty("data/text", 0, x) != ""){
toSearch = obj1.getProperty("data/text", 0, x) ;
colToBeSearched = x;
clonedata1=data1;
break;}
else{toSearch = "";}
}

if(toSearch !=""){
searchGrid();
var data1 = [["", "", "", "", ""]];
data1=clonedata1;
obj1.refresh();

}
else {
for(var x=0; x< columns1.length; x++) {
obj2.getTemplate("row", x).setStyle("color", "black");
obj2.getTemplate("row", x).setStyle("background", "white");
}
}
}

document.write(obj1);

//****************************************************************
var obj2 = new Active.Controls.Grid;
obj2.setId("grid2");
obj2.setRowProperty("count", 5);
obj2.setColumnProperty("count", 5);
obj2.setDataProperty("text", function(i, j){return data2[i][j]});
obj2.setColumnProperty("text", function(i){return columns2[i]});
// obj2.getDataText = function(i, j){return data2[i][j]};
// obj2.setDataText = function(value, i, j){data2[i][j] = value};
// obj2.setColumnProperty("text", function(i){return columns2[i]});

// obj2.setAction("click", function(src){
//this.element().focus(); });

//Hide column-headers in grid2
obj2.setColumnHeaderHeight("1px");
obj2.setRowHeaderWidth("55px");

document.write(obj2);

//*********** FUNCTIONS ***********************
//**********************************************

//**************************************
// SEARCH (NORMAL)
//*************************************

function searchGrid()
{
for(var x=0; x<data2.length; x++)
{
if((data2[x][colToBeSearched].indexOf(toSearch)) >= 0)
{
obj2.getTemplate("row", x).setStyle("color", "white");
obj2.getTemplate("row", x).setStyle("background", "blue");
}
else {
obj2.getTemplate("row", x).setStyle("color", "black");
obj2.getTemplate("row", x).setStyle("background", "white");
}
}
obj2.refresh();
}

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

//**************************************
// ALEX EDIT ON DOUBLE CLICK
//************************
if (!window.My) My=[];
if (!My.Templates) My.Templates=[];

My.Templates.Input = Active.Templates.Text.subclass();

My.Templates.Input.create = function()
{
var obj = this.prototype;

// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text");
});

// template variable provides temporary reference
// to the parent template during edit mode.
var template;

function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick",editor.element().focus());
}

obj.setEvent("ondblclick", switchToEditMode);

function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
</script>
</body>
</html>

Carlos

November 14,

Hi carlos,

When I try the Above Example, the sort does work perfectly but the sort indicator arrow is not displayed Can you let me know why this is not displaying the grid.png image

Binu

February 28,

Somehow when you disable the default sorting, and asign the headers a different function (in current sample):
obj1.getTemplate("top/item").setEvent("onmousedown", headerClickedfunc);
arrows are not displayed, note that this function sorts a second grid with it's headers "hiden" (in wich the arrows must be shown).
Thanks

Carlos

February 28,

So, solution is to sort in grid1 also, and then refresh it.
Just replace the function with this one:

function headerClickedfunc(e) {

var botonfunc = e.srcElement.id;
var posbotonfunc = botonfunc.indexOf(":" ,12);
var numbotonfunc = botonfunc.charAt(posbotonfunc+1);

var lastcolord = obj2.getSortProperty("index");
var lastcoldir = obj2.getSortProperty("direction");

if(numbotonfunc=="0"){}
if(numbotonfunc=="2") {}
if(numbotonfunc=="3") {}
if(numbotonfunc=="4") {}

if (lastcolord == numbotonfunc)
{
if(lastcoldir == "ascending") { obj2.sort(numbotonfunc, "descending");
obj1.sort(numbotonfunc, "descending");
}
else{obj2.sort(numbotonfunc, "ascending");
obj1.sort(numbotonfunc, "ascending");
}
}
else{obj2.sort(numbotonfunc, "ascending");
obj1.sort(numbotonfunc, "ascending");
}
obj1.refresh();
obj2.refresh();
}
//********************************

Carlos

February 28,

HI Carlos,

How do I resize the columns of the second grid when I resize the columns of the first grid?

Stephen

April 14,

This topic is archived.

Set the first row to enter search criteria

See also:

Search

New Data Grid

Version 2