3.2.0
Forum Demo Guide API Store

AW Grid's girlfriend

Alex ..Forgiveme this, ... but your Grid shouldn't be alone any more, after a hard work I finally create a pretty partner for him , AW-EFV you can call her ...... Form-Validator. "She" is not perfect , I'm still looking for "his" adecuate "wife" ;-)
COMMENTS IN : http://www.activewidgets.com/messages/2731-0.htm

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

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

<style>

#grid1 {height: 200px; width: 760px; border: 2px inset; background: white}
#grid1 .active-column-1 {width: 200px; background-color: threedlightshadow;}
.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;}

#grided1 {FONT: menu; WIDTH: 337px; HEIGHT: 25px; TEXT-ALIGN: middle}
#grided1 .active-column-0 {WIDTH: 110px; TEXT-ALIGN: center;}
#grided1 .active-column-1 {WIDTH: 100px; TEXT-ALIGN: center;}
#grided1 .active-column-2 {WIDTH: 100px; TEXT-ALIGN: center;}
#grided1 .active-scroll-bars {overflow-y: hidden}
#grided1 .active-scroll-corner {WIDTH: 45px}
#grided1 .active-scroll-corner .active-box-item {BACKGROUND-COLOR: YELLOW}

#gridok {FONT: menu; WIDTH: 248px; HEIGHT: 25px; TEXT-ALIGN: left}
#gridok .active-column-0 {WIDTH: 120px; TEXT-ALIGN: center;}
#gridok .active-column-1 {WIDTH: 100px; TEXT-ALIGN: center;}
#gridok .active-scroll-bars {overflow-y: hidden}
#gridok .active-scroll-corner {WIDTH: 55px}
#gridok .active-scroll-corner .active-box-item {BACKGROUND-COLOR: YELLOW}
</style>
</head>
<body>
<script>
//*********************
var lastactioned1="";
var idxofrowY = 0;
var RecordOK = "";
var SHOWERROR="";
//*********************

var myData =[
["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", "CLOSED"],
["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", "CLOSED"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254", ""]];

var myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees", "Status"];

var headerlen = myColumns.length;
var datalen = myData.length;


// create javascript object
var obj = new Active.Controls.Grid;
// set unique id
obj.setId("grid1");
obj.setRowCount(datalen);
obj.setColumnCount(headerlen);
obj.setDataText(function(i, j){return myData[i][j]});
obj.setColumnText(function(i){return myColumns[i]});

var yesselectrow = obj.getAction("selectRow")

obj.setAction("click", function(src){
if(lastactioned1 !=""){alert("Please click on SAVE OR CANCEL"); }
if(lastactioned1 =="0" || lastactioned1 =="1" ){}
else{
idxofrowY = src.getRowProperty("index");
pickrecordY();}});

// disable arrow key nevigation
obj.setEvent("onkeydown", null);

/// FUCTION PICKRECORD
//**************************************

function pickrecordY() {
// DataTempY =[];
var res = 0;
for(var x=0; x< headerlen; x++) {
fieldvalY = obj.getProperty("data/text", [idxofrowY], [x]);
eval('DataFV' + x + "[0][1]=fieldvalY");
eval('FV' + x + '.getRowTemplate(0).getItemTemplate(1).refresh()');
res++;}
objed1.getLayoutTemplate().setContent("corner/box/item", "SHOW");
objed1.refresh();
}

//**************************************
/// FUCTION PICKRECORD FOR APPEND

function pickrecordW() {
// DataTempY =[];
var res = 0;
for(var x=0; x< headerlen; x++) {
fieldvalY = "";
eval('DataFV' + x + "[0][1]=''");
eval('FV' + x + '.getRowTemplate(0).getItemTemplate(1).refresh()');
res++;}
}

/// FUCTION PICKRECORD EMPTY
//**************************************

function pickrecordZ() {
// DataTempY =[];
var res = 0;
for(var x=0; x< headerlen; x++) {
eval('DataFV' + x + "[0][1]='NONE-SELECTED'");
eval('FV' + x + '.getRowTemplate(0).getItemTemplate(1).refresh()');
res++;}
}

//***********************************************************
// RECORD myData FROM ARRAYS DataA0 ...DataAnnn

function RecordmyData() {
idxofrowY = obj.getSelectionProperty("index");
for(var x=0; x< headerlen; x++) {
eval('myData[idxofrowY][' + x + '] = DataFV' + x + '[0][1]');
}
obj.getTemplate("row", [idxofrowY]).refresh();
}

//***********************************************************
// APPLY TEMPLATES to column 1 IN OBJ's (FV0 ........FVnnnn)

function ApplyTemplate() {
for(var x=0; x< headerlen; x++) {
stylesheetX.addRule('#' + IDobjects[x] + ' .active-column-1', 'background-color: #ffcc99;');

eval('FV' + x + ".setColumnTemplate(FVTA" + x + ", 1)");
eval('FV' + x + '.getRowTemplate(0).getItemTemplate(1).refresh()');

//search for locked fields
if(Fieldlocked[x]=="Y"){
stylesheetX.addRule('#' + IDobjects[x] + ' .active-column-1', 'background-color: #ffffcc;');
eval('FV' + x + ".setColumnTemplate(FVTR" + x + ", 1)");
eval('FV' + x + '.getRowTemplate(0).getItemTemplate(1).refresh()');
}
Fieldlocked[x]="";
}
}

//***********************************************************
// RESTORE TEMPLATES to column 1 IN OBJ's (FV0 ........FVnnnn)

function RestoreTemplate() {
for(var x=0; x< headerlen; x++) {
stylesheetX.addRule('#' + IDobjects[x] + ' .active-column-1', 'background-color: #ffffcc;');

eval('FV' + x + ".setColumnTemplate(FVTR" + x + ", 1)");
eval('FV' + x + '.getRowTemplate(0).getItemTemplate(1).refresh()');
}
}

//****************************
//***** VALIDS *******

// FIELD-LOCK ON EDIT
function LockonEdit() {
//if employees>25000 fields except sales should not be editable
if(DataFV4[0][1] > 25000){ Fieldlocked[0]="Y";Fieldlocked[1]="Y";Fieldlocked[2]="Y";Fieldlocked[4]="Y";}
Fieldlocked[0]="Y";
//add here any other field lock for edition
}

// FIELD-LOCK ON APPEND
function LockonAppend() {
//it is mostly for user rights, but could be used for add just non-critical fields
Fieldlocked[2]="Y";
//add here any other field lock for append
}

// RECORD-LOCK ON EDIT
function RLonEdit() {
if(DataFV5[0][1].toUpperCase()=="CLOSED"){ RecordOK="N"; SHOWERROR="EDIT NOT ALLOWED FOR " + DataFV5[0][0] + ":" + DataFV5[0][1] }
//add here any other record lock for edit
}

// RECORD-LOCK ON APPEND
function RLonAppend() {
//it is mostly for user rights,
//---------
//add here any other record-lock condition for append
}

// RECORD-LOCK ON DELETE
function RLonDelete() {
//it is mostly for user rights, but could be used for add just non-critical fields
if(DataFV5[0][1].toUpperCase() !="CLOSED"){ RecordOK="N"; SHOWERROR="DELETION NOT ALLOWED FOR " + DataFV5[0][0] + ":" + DataFV5[0][1] }
//add here any other record lock for delete
}

// VALIDATION WHEN SAVE EDIT/APPEND
function RLonSave() {
if(DataFV1[0][1] ==""){ RecordOK="N"; SHOWERROR="EMPTY " + DataFV1[0][0] + ":" + DataFV1[0][1] }
//add here any other validations for save button
}

// VALIDATION WHEN APPEND
function VALIDONAPPENDSAVE() {
for(var x=0; x< datalen; x++) {
if(DataFV0[0][1].toUpperCase() == myData[x][0].toUpperCase()){
RecordOK="N";
SHOWERROR="DUPLICATED " + DataFV0[0][0] + ":" + DataFV0[0][1] }
}
//add here any other validations for save
}

//***********************************
//********************************************************************
// GRID BUTTONS APPEND, EDIT , DELETE

var myColumed1 = ["EDIT", "APPEND", "DELETE"];

var objed1 = new Active.Controls.Grid;
objed1.setId("grided1");
objed1.setColumnProperty("count", 3);
objed1.setColumnProperty("text", function(i){return myColumed1[i]});

objed1.getLayoutTemplate().setContent("corner/box/item", "SHOW");

objed1.styleSheet = document.styleSheets[document.styleSheets.length-1];

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

//DISABLE SELECT ROW
objed1.setAction("selectRow", null);
objed1.setEvent("onkeydown", null);

// disable sort on column headers-click and asign other function
objed1.getTemplate("top/item").setEvent("onmousedown", headerClickeded1);
function headerClickeded1(e) {

if(obj.getSelectionIndex("index")>-1){
var botoned1 = e.srcElement.id;
var posbotoned1 = botoned1.indexOf(":" ,9);
var posendbotoned1 = botoned1.indexOf("/" ,9);
var numbotoned1 = botoned1.substring((posbotoned1+1),(posendbotoned1));

// editar
if(numbotoned1=="0"){

RLonEdit();

if(RecordOK==""){
lastactioned1 ="0"
objok.getLayoutTemplate().setContent("corner/box/item", "EDIT");
pickrecordY();
LockonEdit();
ApplyTemplate();
objok.setStyle("display", "block");
objok.refresh();
objed1.setStyle("display", "none");
objed1.refresh();
obj.setAction("selectRow", null);
}
else{alert(SHOWERROR);}
RecordOK="";
}
// APPEND
if(numbotoned1=="1"){
RLonAppend();

if(RecordOK==""){
lastactioned1 ="1"
objok.getLayoutTemplate().setContent("corner/box/item", "APPEND");
pickrecordW();
LockonAppend();
ApplyTemplate();
objok.setStyle("display", "block");
objok.refresh();
objed1.setStyle("display", "none");
objed1.refresh();
obj.setAction("selectRow", null);
}
else{alert(SHOWERROR);}
RecordOK="";
}

// DELETE
if(numbotoned1=="2"){
RLonDelete();

if(RecordOK==""){
lastactioned1 ="2"
objok.getLayoutTemplate().setContent("corner/box/item", "DELETE");
objok.setStyle("display", "block");
objok.refresh();
objed1.setStyle("display", "none");
objed1.refresh();
obj.setAction("selectRow", null);
}
else{alert(SHOWERROR);}
RecordOK="";
}
//********generic code when EDIT - APPEND - DELETE is pressed
}

// ******** else for no record selected --> if(obj.getSelectionIndex("index")>-1){
else{ alert("Please Select a Record"); }
}

//*******************************************
//*******************************************
// GRID BUTTONS SAVE - CANCEL

var myColumok = ["SAVE", "CANCEL"];

var objok = new Active.Controls.Grid;
objok.setId("gridok");
objok.setColumnProperty("count", 2);
objok.setColumnProperty("text", function(i){return myColumok[i]});

//objed1.getLayoutTemplate().setContent("corner/box/item", "---");

// disables all column resize
objok.styleSheet = document.styleSheets[document.styleSheets.length-1];
objok.styleSheet.addRule("#gridok .active-box-resize", "display: none;");

//disable SELECT ROW
objok.setAction("selectRow", null);
objok.setEvent("onkeydown", null);

//onmouseover buttons save or cancel to lost focus from edit ( available value into the cell)
objok.setEvent("onmouseover", function(){this.element().focus(); } );

// disable sort on column headers-click and asign other function
objok.getTemplate("top/item").setEvent("onmousedown", headerClickedok);
function headerClickedok(e)
{

var botonok = e.srcElement.id;
var posbotonok = botonok.indexOf(":" ,9);
var posendbotonok = botonok.indexOf("/" ,9);
var numbotonok = botonok.substring((posbotonok+1),(posendbotonok));

////// SAVE
if(numbotonok =="0"){

//****** save on edit
if(lastactioned1 =="0"){
RLonSave()
if(RecordOK==""){
RecordmyData();
pickrecordY();
RestoreTemplate();
obj.setAction("selectRow", yesselectrow);
objed1.getLayoutTemplate().setContent("corner/box/item", "SHOW");
objok.setStyle("display", "none");
objok.refresh();
objed1.setStyle("display", "block");
objed1.refresh();
lastactioned1 ="" ;
}
else{alert(SHOWERROR);}
RecordOK="";
}

//******* save on append
if(lastactioned1 =="1"){
VALIDONAPPENDSAVE()
RLonSave()
if(RecordOK==""){
var TEMPROW = [] ;
obj.setSelectionIndex(0);
myData.unshift(TEMPROW);
obj.setDataProperty("text", function(i, j){return myData[i][j]});
//obj.setSelectionIndex(0);
RecordmyData();
resetRowValuesGrid1();
obj.refresh();
obj.setSelectionIndex(0);
this.element().focus();
idxofrowY = obj.getSelectionProperty("index");
pickrecordY();
RestoreTemplate();
obj.setAction("selectRow", yesselectrow);
objed1.getLayoutTemplate().setContent("corner/box/item", "SHOW");
objok.setStyle("display", "none");
objok.refresh();
objed1.setStyle("display", "block");
objed1.refresh();
lastactioned1 ="" ;
}
else{alert(SHOWERROR);}
RecordOK="";
}

//***********save on delete
if(lastactioned1 =="2"){


if (confirm("Wanna delete me?")) { pickrecordY();
returnMessage = myData[obj.getSelectionProperty("values")][0] + ' ' + myData[obj.getSelectionProperty("values")][1];
returnVal = myData.splice(obj.getSelectionProperty("values"),1);
resetRowValuesGrid1();
obj.setSelectionIndex(0);
obj.refresh();
obj.setSelectionIndex(-1);
pickrecordZ();
alert ("Deleted: " + returnMessage );
RestoreTemplate();
obj.setAction("selectRow", yesselectrow);
objed1.getLayoutTemplate().setContent("corner/box/item", "SHOW");
objok.setStyle("display", "none");
objok.refresh();
objed1.setStyle("display", "block");
objed1.refresh();
lastactioned1 ="" ;
}
}
//********generic code when save is pressed
}
//*****-------------------------------
/////// CANCEL
if(numbotonok =="1"){
//***********cancel on edit
if(lastactioned1 =="0"){
pickrecordY();
}
//**********cancel on append
if(lastactioned1 =="1"){
pickrecordY();
}
//**********cancel on delete
if(lastactioned1 =="2"){
//lastactioned1 =""
}
//********generic code when cancel
RestoreTemplate();
obj.setAction("selectRow", yesselectrow);
objok.setStyle("display", "none");
objok.refresh();
objed1.getLayoutTemplate().setContent("corner/box/item", "SHOW");
objed1.setStyle("display", "block");
objed1.refresh();
lastactioned1 ="" ;
}
//********generic code when either save/cancel is pressed
}

//**************************************
// RELOAD ROW-VALUES (AFTER ROWCOUNT IS NEEDED)

function resetRowValuesGrid1()
{
obj.setRowCount(datalen);
var rowValues = [];
for(var i=0; i < datalen; ++i) { rowValues.push(i);}
obj.setRowProperty("values", rowValues);
obj.setSortProperty("index", null);
}

//*******************************************
// SHOW PAGE

// write grid html to the page
document.write(obj);
document.write(".");

//***********************************
//****** ENTRY-FORM **********
//********************************
var IDobjects = [];
var Fieldlocked = [];

for(var x=0; x< headerlen; x++) {
IDobjects.push(["gridFV" + x]);
Fieldlocked.push([""]);

eval('var DataFV' + x + '=new Array()');
eval('DataFV' + x + "=[[myColumns[x], 'NONE-SELECTED']]");
eval('var FV' + x + '= new Active.Controls.Grid');
eval('FV' + x + ".setId('gridFV" + x +"')");
eval('FV' + x + ".setDataProperty('text', function(i, j){return DataFV" + x + '[i][j]})');
eval('FV' + x + ".setDataText = function(value, i, j){DataFV" + x + '[i][j]=value}');
eval('FV' + x + '.setRowCount(1)');
eval('FV' + x + '.setColumnCount(2)');
eval('FV' + x + ".setColumnHeaderHeight('1px')");
eval('FV' + x + ".setRowHeaderWidth('0px')");
eval('FV' + x + ".setAction('selectRow', null)");
eval('FV' + x + ".setEvent('onkeydown', null)");
eval('FV' + x + ".getTemplate('top').setEvent('onselectstart', FV" + x + ".getEvent('onselectstart'))");
eval('FV' + x + ".setEvent('onselectstart', null)");
eval('var FVTA' + x + "= new My.Templates.Input");
eval('var FVTR' + x + "= new Active.Templates.Text");

var stylesheetX = document.styleSheets[document.styleSheets.length-1];
stylesheetX.addRule('#' + IDobjects[x], 'FONT: MENU');
stylesheetX.addRule('#' + IDobjects[x], 'WIDTH: 540px');
stylesheetX.addRule('#' + IDobjects[x], 'HEIGHT: 22px');
stylesheetX.addRule('#' + IDobjects[x], 'TEXT-ALIGN: left');
stylesheetX.addRule('#' + IDobjects[x] + ' .active-scroll-bars', 'overflow-x: hidden');
stylesheetX.addRule('#' + IDobjects[x] + ' .active-scroll-bars', 'overflow-y: hidden');
stylesheetX.addRule('#' + IDobjects[x] + ' .active-column-0', 'WIDTH: 120px; background-color: #f0ece0; TEXT-ALIGN: right;');
stylesheetX.addRule('#' + IDobjects[x] + ' .active-column-1', 'WIDTH: 100px; background-color: #ffffcc; TEXT-ALIGN: right;');

if(IDobjects[x]=='gridFV0'){stylesheetX.addRule('#' + IDobjects[x] + ' .active-column-1', 'WIDTH: 60px; TEXT-ALIGN: left;')}
if(IDobjects[x]=='gridFV1'){stylesheetX.addRule('#' + IDobjects[x] + ' .active-column-1', 'WIDTH: 380px; TEXT-ALIGN: left;')}
if(IDobjects[x]=='gridFV5'){stylesheetX.addRule('#' + IDobjects[x] + ' .active-column-1', 'WIDTH: 80px; TEXT-ALIGN: left;')}
//to hide fields, exclude it from next line by a if ...clause....
eval('document.write(FV' + x +')');
}

document.write(".");
document.write(objed1);
document.write(".");
document.write(".");
document.write(objok);
objok.setStyle("display", "none");
objok.refresh();

</script>
</body>
</html>
girlfriedsfinder
November 29,
Sorry I found a mistake on deleting:
LINE 409
just before this:
resetRowValuesGrid1();
Insert this:
datalen=myData.length;

Thanks
Carlos
November 29,
The page loads fine, but after I click on something, I receive a javascript error "DataFV1" is not undefined.
Mobasoft
November 29,
Need to put the "edit on double click" patch into grid.js because is load in line 499.
Carlos
November 29,
Carlos,

that looks very impressive, great job!

BTW, the 'edit on click' code (should be added) is here:

http://www.activewidgets.com/messages/1394-29.htm
Alex (ActiveWidgets)
December 1,
How to solve the error:
"DataFV1" is not undefined"
BDC
January 3,
Here is samples page link:
http://activewidgets.com/grid.examples/moving-resizing.html
Carlos
January 3,

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)
Searchable Grid Nilesh Manohar (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