3.2.0

example of paging on a server

This an example given as is - it is not complete and clean - but it has a few features that demonstrates "paging" on a server and a few things useful when dealing with a server (switch mode to edit or readonly, restore, add, delete, new, save, copy, paste, next, previous, first, last, error feedback). There is still a few things to go like combo, select, completion list when start editing, type and length control, md5 encoding of password.

The grid display a layout "topline" with three parts:
Left : is a tool bar for swithcing mode, copy in clipboard, increase line height, decrease line height

Center depends on mode:
In view mode it has first, previous, page, next, last
In edit mode it has add, duplicate, paste, delete, save

Right: display the current page and number of pages.

I apologize for the french tooltips ... and without the icons of the toolbars it lacks visuals.


<html>
<head>
    <script src="../../runtime/lib/aw.js"></script>
    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>

<style>
.aw-image-save			{background: url(save.gif) 50% 50% no-repeat;}
.aw-image-delete		{background: url(delete.gif)  50% 50% no-repeat;}
.aw-image-new			{background: url(new.gif)  50% 50% no-repeat;}
.aw-image-duplicate		{background: url(duplicate.gif)  50% 50% no-repeat;}
.aw-image-paste			{background: url(paste.gif)  50% 50% no-repeat;}
.aw-image-copy			{background: url(copy.gif)  50% 50% no-repeat;}
.aw-image-ligneplus		{background: url(ligneplus.gif)  50% 50% no-repeat;}
.aw-image-lignemoins		{background: url(lignemoins.gif)  50% 50% no-repeat;}
.aw-image-edit			{background: url(edit.gif)  50% 50% no-repeat;}
.aw-image-readonly		{background: url(readonly.png)  50% 50% no-repeat;}

.aw-grid {filter:none;}

* { 
   -moz-box-sizing: border-box; 
}

.aw-system-control2 { 
   box-sizing: border-box; 
   -moz-box-sizing: border-box; 
}

.aw-alternate-even {background: #fff;}
.aw-alternate-odd  {background: #eee;}


.aw-grid-headers 		{
                            background: #E6E6F2;
                            font-family: Arial, Helvetica, sans-serif; 
                            font-size:10px;
                            }
.aw-header-1 		{
                            background: #E6E6E6;
                            font-size:9px;
                            }

.aw-grid-row      {
                            text-align:left;
                            vertical-align:middle;
                            font-family: Arial, Helvetica, sans-serif; 
                            font-size:10px;
                            }
.aw-row-selector  {
                            width: 25px; 
                            text-align: center;
                            background: #E6E6F2;
                            font-weight: bold;
                            }

.aw-items  			{
                            text-align:left;
                            vertical-align:middle;
                            font-family: Arial, Helvetica, sans-serif; 
                            font-size:10px;
                            }
                            
.aw-mouseover-row .aw-row-selector {color: red;}
.aw-mouseover-selector {background: green; cursor:pointer;}
.aw-rows-selected {background: #316ac5;}

</style>

<body>

<script>
function clip_paste(myText)
{
 if (window.clipboardData) {
 	return window.clipboardData.getData("Text");
 }
 else {
 	return "";
 }
}

function clip_copy(myText)
{
 if (window.clipboardData) 
   {
   // the IE-manier
   window.clipboardData.setData("Text", myText);
   }
   else if (window.netscape) 
   { 
   // you have to sign the code to enable this, or see notes below 
   netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
   var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
   if (!clip) return;
   var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
   if (!trans) return;
   trans.addDataFlavor('text/unicode');
   var str = new Object();
   var len = new Object();
   var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
   var copytext=myText;
   str.data=copytext;
   trans.setTransferData("text/unicode",str,copytext.length*2);
   var clipid=Components.interfaces.nsIClipboard;
   if (!clip) return false;
   clip.setData(trans,null,clipid.kGlobalClipboard);
   }
   //alert("Following info was copied to your clipboard:\n\n" + myText);
   return false;
}
//=func
function UtilQueryDeepCopy(vals)
{
    var res= new Array(vals.length);
    for (var i=0;i<vals.length;i++) {
        res[i]= vals[i].concat();
    }
    return res;
}


   //
   function displayGrid(myPage,myId,myEvos)
   {
   	//debugger;
        // setup the widget 
        var obj = new AW.Grid.Extended;
        
        obj.evos= myEvos;
        
        // general grid
        obj.setId(myId);	
        obj.setVirtualMode(false);
        obj.setSelectionMode("row");
        
        
        obj.setColumnCount(obj.evos.Headers.length);
        obj.setRowCount(obj.evos.NRows);
        obj.getRowTemplate().setClass("text", "wrap");
        // selector
        obj.setSelectorVisible(true);
        obj.setSelectorWidth(25);
       	obj.setSelectorResizable(false);
        obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
        

        // data, headers
        var nbheaders= 1;
        for (var i= 0;i<obj.evos.SubHeaders.length;i++) {
            if (obj.evos.SubHeaders[0]!=obj.evos.SubHeaders[i]) {
                nbheaders= 2;
                break;
            }
        }
        obj.setHeaderCount(nbheaders);
        obj.setHeaderText(obj.evos.Headers,0);
        if (nbheaders==2) obj.setHeaderText(obj.evos.SubHeaders,1);
        obj.setCellText(obj.evos.Data);
        obj.getHeaderTemplate().setStyle("text-align","center");

        // tooltip 
        for (var i= 0;i<obj.evos.Description.length;i++) {
            if (obj.evos.ColEdit[i]==0) {
                obj.setCellTooltip(obj.evos.Description[i]+",Colonne non éditable.", i);
                obj.setHeaderTooltip(obj.evos.Description[i]+",Colonne non éditable.", i);
            }
            else {
                obj.setCellTooltip(obj.evos.Description[i], i);
                obj.setHeaderTooltip(obj.evos.Description[i], i);
            }
        }
        // alignment 
        for (var i= 0;i<obj.evos.ColSizes.length;i++) {
             obj.setColumnWidth(obj.evos.ColSizes[i],i);
             if (obj.evos.ColAlign[i]==1)
                 obj.getCellTemplate(i).setStyle("text-align", "right");
        }
        obj.setControlSize(100, 55 + (2+obj.getRowHeight())*obj.evos.PageSize);
        obj.setStyle("width", "98%");
        
        // add evos data to the object
        obj.evos.ViewMode= 1;
        obj.evos.evosDelete= new Array();
        obj.evos.Page= myPage;
        obj.evos.DupliNb= 0;

        // default to view mode
        obj.setSelectionMode("single-row");
            
        //-------------------------------------------------------------
        // errors stuff
        //-------------------------------------------------------------
        if (obj.evos.TbErrors) {
            for (var i=0;i<obj.evos.TbErrors.length;i++) {
                if (obj.evos.TbErrors[i].length == 0) {
                    obj.getSelectorTemplate(i).setStyle("background-color", "#ADFF2F");
                }
                else {
                    obj.getSelectorTemplate(i).setStyle("background-color", "#FFC0CB");
                for (var j=0;j<obj.evos.TbErrors[i].length;j++) {
                    if (obj.evos.TbErrors[i][j] != '') {
                    	obj.setCellTooltip(obj.evos.TbErrors[i][j],j,i);
                    obj.getCellTemplate(j,i).setStyle("background-color", "#FFC0CB");
                    }
                }
                }
            }
        }		
            
        //-------------------------------------------------------------
        // add/delete stuff
        //-------------------------------------------------------------
        obj.onRowDeleting = function(row){
            return !confirm("Confirmez la suppression de la ligne sélectionnée?");
        };

        obj.onRowDeleted = function(row){
            this.evosDelete[ obj.evosDelete.length ]= this.evosIds[row];
            this.evos.DataIds[row] = '-1';
        };

        //-------------------------------------------------------------
        // GridNew		
        //-------------------------------------------------------------
        obj.GridNew = function() {
   		//debugger;
            this.addRow(this.evos.NRows);
            for (var i= 0;i<this.getColumnCount() ; i++) {
                this.setCellText("", i, this.evos.NRows);
            }
            this.evos.DataIds[this.evos.NRows++] = '';
        };
        //-------------------------------------------------------------
        // GridDuplicate		
        //-------------------------------------------------------------
        obj.GridDuplicate = function() {
   		//debugger;
            var cur = this.getCurrentRow();
            this.addRow(this.evos.NRows);
            for (var i= 0;i<this.getColumnCount() ; i++) {
                if (this.evos.ColEdit[i] == 0)
                    this.setCellText("", i, this.evos.NRows);
                else if (this.evos.ColEdit[i] == 2) {
                    this.setCellText(this.getCellText(i, cur)+ "_"+ obj.evos.DupliNb, i,this.evos.NRows );
                    obj.evos.DupliNb  += 1;
                }
                else 
                    this.setCellText(this.getCellText(i, cur), i,this.evos.NRows );
            }
            this.evos.DataIds[this.evos.NRows++] = '';
        };
        //-------------------------------------------------------------
        // GridSave		
        //-------------------------------------------------------------
        obj.GridSave = function() {
   		//debugger;
            var textdata="";
          		var ncol= this.getColumnCount();
            for (var i=0;i<this.evos.NRows;i++) {
                if (textdata!="") textdata += "\n";
                if (this.evos.DataIds[i] != '-1') {
                    textdata+= this.evos.DataIds[i] + "\t";
                    for (var j=0;j<ncol;j++) {
                        if (j!=0) textdata += "\t";
                        textdata+= this.getCellText(j,i) ;
                    }
                }
            }
            var textdelete="";
            for (var i=0;i<this.evos.evosDelete.length;i++) {
                if (textdelete!="") textdelete += "\t";
                textdelete+= this.evos.evosDelete[i] + "\t";
            }		
            var textsizes="";
            for (var j=0;j<ncol;j++) {
                if (j!=0) textsizes += "\t";
                textsizes+= this.getColumnWidth(j) ;
            }
            document.EvosGridSave.grid.value= textdata;
            document.EvosGridSave.sizes.value= textsizes;
            document.EvosGridSave.dele.value= textdelete;
            document.EvosGridSave.submit();
 		};
        //-------------------------------------------------------------
        // GridRestore		
        //-------------------------------------------------------------
        obj.GridRestore = function() {
            this.evos.Data= UtilQueryDeepCopy(this.evos.DataBackup);
            this.evos.DataIds= this.evos.IdsBackup.concat();
            this.setCellText(this.evos.Data);
            this.setRowCount(this.evos.DataIds.length);
            this.refresh();
        };
        //-------------------------------------------------------------
        // GridDelete		
        //-------------------------------------------------------------
        obj.GridDelete = function() {
            var i = this.getCurrentRow();
            this.deleteRow(i);
        };
        //-------------------------------------------------------------
        // GridCopy		
        //-------------------------------------------------------------
        obj.GridCopy = function() {
       	var nrow= this.getRowCount();
       	var ncol= this.getColumnCount();
       	// check if pkids are already in column
       	var pid= false;
       	for (var i=0;i<ncol;i++) {
   			if ((this.evos.SubHeaders[i] == "") && (this.evos.Headers[i] == "id")) {
       			pid= true;
       			break;
       		}
       	}
       	var text="";
       	if (pid == false) text= "pid\t";
    
       	for (var j=0;j<ncol;j++) {
       			if (j!=0) text += "\t";
       			text += this.evos.SubHeaders[j] + "." + this.evos.Headers[j];
       	}
       	for (var i=0;i<nrow;i++) {
       		text += "\n";
       		if (pid == false) text+= this.evos.DataIds[i] + "\t";
       		for (var j=0;j<ncol;j++) {
       			if (j!=0) text += "\t";
       			text += this.getCellText(j, i);
       		}
       	}
       	clip_copy(text);
        };
        //-------------------------------------------------------------
        // GridPaste		
        //-------------------------------------------------------------
        obj.GridPaste = function() {
   		var text= clip_paste();
   		var rows= UtilSplit(text,"\n");
   		var nrow= rows.length;
   		var ncol= this.evos.Headers.length;
   		var ididx= 0;
   		// check if pkids are already in column
   		var pid= false;
   		for (var i=0;i<ncol;i++) {
   			if ((this.evos.SubHeaders[i] == "") && (this.evos.Headers[i] == "id")) {
   				pid= true;
   				ididx= i;
   				break;
   			}
   		}
       	this.evos.Data = new Array();
       	this.evos.DataIds  = new Array();
       	for (var i=0;i<nrow;i++) {
       		//alert(rows[i]);
       		var tmp= UtilSplit(rows[i],"\t");
       		var idx=0;
       		var j=0;
       		var jmax= tmp.length;
       		if (jmax > ncol) jmax= ncol;
           	if (pid==false) {
           			this.evos.DataIds[i]= tmp[0];
           			j= 1;
           	}
           	this.evos.Data[i]= new Array();
           	this.evos.DataIds[i]= '';
       		for (;j<jmax;j++) {
       			this.evos.Data[i][idx++]= tmp[j];
       			if (j == ididx) this.evos.DataIds[i]= tmp[j];
       		}
       		for (j= jmax;j<ncol;j++) {
       			this.evos.Data[idx++]= '';
       		}
       	}
           this.setRowCount(nrow);
           this.setCellText(data);
           this.refresh();
        };
        //-------------------------------------------------------------
        // CellChanged		
        //-------------------------------------------------------------
        obj.onCellValidated = function(text, col, row){
            if (row < this.evos.DataBackup.length && text != this.evos.DataBackup[row][col])
                 	this.getCellTemplate(col, row).setStyle("color", "red");
            else
                 	this.getCellTemplate(col, row).setStyle("color", "#000");
            return true;
        };
        //-------------------------------------------------------------
        // Cancel line Changed		
        //-------------------------------------------------------------
        obj.onSelectorClicked = function(event, index){
            if (this.evos.viewMode == 0 && index < this.evos.DataBackup.length) {
                for (var c=0;c<obj.evos.Headers.length;c++) {
                this.setCellText(this.evos.DataBackup[index][c],c,index);
                	this.getCellTemplate(c, index).setStyle("color", "#000");
                }
            }
        };
        //-------------------------------------------------------------
        // GridModify		
        //-------------------------------------------------------------
        obj.GridModify = function() {
            //debugger;
            this.setSelectedRows([]);
            this.setSelectedColumns([]);
            this.setSelectionMode("single-cell");
            this.setStyle("cursor","default");
            this.evos.viewMode= 0;
            this.onRowClicked= function(event, index) { };
            // alignment and editable columns
            for (var i= 0;i<this.evos.ColSizes.length;i++) {
                 if (this.evos.ColEdit[i]==0) {
                 	this.setCellEditable(false,i);
                 }
                 else
                    this.setCellEditable(true,i);
            }
        };		
        //-------------------------------------------------------------
        // GridView		
        //-------------------------------------------------------------
        obj.GridView = function() {
            //debugger;
            this.setSelectedRows([]);
            this.setSelectedColumns([]);
            this.setSelectionMode("single-row");
            this.evos.viewMode= 1;
            this.setCellEditable(false);
            this.onRowMouseOver= function(event, index) { this.setStyle("cursor","pointer");};
            this.onRowMouseOut= function(event, index) { this.setStyle("cursor","default");};
            this.onRowClicked= function(event, index) { 
                var theURL= "index.html?ctrl:cmd=action&ctrl:id=window." + this.evos.Page + "&todo=view&objid=" + this.evos.DataIds[index];
                ww= window.open(theURL,"page"+this.evos.DataIds[index]);
                ww.focus();
            };
        };
        //-------------------------------------------------------------
        // GridIncLine		
        //-------------------------------------------------------------
        obj.GridIncLine = function() {
            var nb= this.getRowHeight() + 18;
            this.setRowHeight(nb);
            this.setStyle("height", 55 + (2+nb)*this.evos.PageSize);
            this.refresh();
        };
        //-------------------------------------------------------------
        // GridIncLine		
        //-------------------------------------------------------------
        obj.GridDecLine = function() {
            var nb= this.getRowHeight();
            if (nb > 35) {
                nb -= 18;
                this.setRowHeight(nb);
                this.setStyle("height", 55 + (2+nb)*this.evos.PageSize);
                this.refresh();
            }
        };
        
        //-------------------------------------------------------------
        // Layout		
        //-------------------------------------------------------------
        
        obj.EvosLeftBarTemplate = function(numpage,maxpage) {
            var ret= "<span style=\"border: solid 1px #7f9db9;background-color:#eee;\">";
            //edit
            var lnk= new AW.UI.Link;lnk.setId('edit');
            if (this.evos.viewMode == 0) {
                lnk.setControlImage("edit");
                lnk.setAttribute("title","Restaurer les valeurs");
            }
            else {
                lnk.setControlImage("readonly");
                lnk.setAttribute("title","Modifier la grille");
            }
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){
                if (this.evosGrid.evos.viewMode == 1) {
                    this.setControlImage("edit");
                    this.setAttribute("title","Modifier la grille");
                    this.evosGrid.GridModify();
                }
                else {
                    this.setControlImage("readonly");
                    this.setAttribute("title","Restaurer les valeurs");
                    this.evosGrid.GridRestore();
                    this.evosGrid.GridView();
                }
                this.evosGrid.refresh();
            };
            ret += lnk.toString();
            // copier
            lnk= new AW.UI.Link;lnk.setId('copy');lnk.setControlImage("copy");
            lnk.setAttribute("title","Copier les valeurs dans le clipboard");
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){this.evosGrid.GridCopy();};
            ret += lnk.toString();
            // inc line
            lnk= new AW.UI.Link;lnk.setId('incline');lnk.setControlImage("ligneplus");
            lnk.setAttribute("title","Augmenter la hauteur des lignes");
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){this.evosGrid.GridIncLine();};
            ret += lnk.toString();
            // dec line
            lnk= new AW.UI.Link;lnk.setId('decline');lnk.setControlImage("lignemoins");
            lnk.setAttribute("title","Réduire la hauteur des lignes");
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){this.evosGrid.GridDecLine();};
            ret += lnk.toString() +"</span>";
            return ret;
        };
        obj.EvosViewMiddleBarTemplate = function(numpage,maxpage) {
            var ret= "";
            var lnk= new AW.UI.Link;lnk.setId('first');lnk.setControlText("Première");
            if (numpage > 1) lnk.setControlLink(obj.evos.ActionURL + "&todo=firstpage"); 
            ret= ret + lnk.toString();
            ret = ret + ",&nbsp";
            lnk= new AW.UI.Link;lnk.setId('previous');lnk.setControlText("Précédente");
            if (numpage > 1) lnk.setControlLink(obj.evos.ActionURL + "&todo=previouspage"); 
            ret= ret + lnk.toString();
            ret = ret + ",&nbsp";
            var npt= new AW.UI.Input;npt.setId("page");ret= ret + npt.toString();
            ret = ret + "&nbsp";
            lnk= new AW.UI.Link;lnk.setId('next');lnk.setControlText("Suivante");
            if (numpage < maxpage) lnk.setControlLink(obj.evos.ActionURL + "&todo=nextpage");
            ret= ret + lnk.toString();
            ret = ret + ",&nbsp";
            lnk= new AW.UI.Link;lnk.setId('last');lnk.setControlText("Dernière");
            if (numpage < maxpage) lnk.setControlLink(obj.evos.ActionURL + "&todo=lastpage");
            ret= ret + lnk.toString();
            return ret;
        };
        obj.EvosEditMiddleBarTemplate = function(numpage,maxpage) {
            var ret= "<span style=\"border: solid 1px #7f9db9;background-color:#eee;\">";
            // new
            var lnk= new AW.UI.Link;lnk.setId('new');lnk.setControlImage("new");
            lnk.setAttribute("title","Ajouter une ligne");
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){this.evosGrid.GridNew();};
            ret += lnk.toString();
            // duplicate
            lnk= new AW.UI.Link;lnk.setId('duplicate');lnk.setControlImage("duplicate");
            lnk.setAttribute("title","Dupliquer la ligne sélectionnée");
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){this.evosGrid.GridDuplicate();};
            ret += lnk.toString();
            // paste
            lnk= new AW.UI.Link;lnk.setId('paste');lnk.setControlImage("paste");
            lnk.setAttribute("title","Coller les données du clipboard");
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){this.evosGrid.GridPaste();};
            ret += lnk.toString();
            // delete
            lnk= new AW.UI.Link;lnk.setId('delete');lnk.setControlImage("delete");
            lnk.setAttribute("title","Supprimer la ligne sélectionnée");
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){this.evosGrid.GridDelete();};
            ret += lnk.toString();
            // save
            lnk= new AW.UI.Link;lnk.setId('save');lnk.setControlImage("save");
            lnk.setAttribute("title","Enregistrer les modifications");
            lnk.onControlMouseOver= function() {this.setStyle("background","white");};
            lnk.onControlMouseOut= function() {this.setStyle("background","#eee");};
            lnk.evosGrid= this;
            lnk.onControlClicked = function(event){this.evosGrid.GridSave();};
            ret += lnk.toString() +"</span>";
            return ret;
        };
        
        obj.defineTemplate("topLine", function()
        {
            var numpage = Math.ceil((this.evos.CurrentResult+1) / this.evos.PageSize); if (numpage == 0) numpage= 1;
            var maxpage = Math.ceil(this.evos.NbResults / this.evos.PageSize);
            
            var ret= "<table width='100%'  ><tr ><td width=\"20%\" style=\"text-align:left;\">";
            // left bar
            ret += this.EvosLeftBarTemplate();
                
            ret += "&nbsp;</td><td width=\"60%\" style=\"text-align:center;\">";
            // middle bar			
            if (this.evos.viewMode == 1)
                ret += this.EvosViewMiddleBarTemplate(numpage,maxpage);
            else
                ret += this.EvosEditMiddleBarTemplate(numpage,maxpage);
                        
            ret += "<td width=\"20%\" style=\"text-align:right;\" >";
            // right bar			
            if (maxpage > 0) {
                var lbl= new AW.UI.Label;
                lbl.setControlText("Page " + numpage + " sur " + maxpage);
                ret += lbl.toString();
            }
            return ret+"</td></tr></table>";
        });
        
        obj.defineTemplate("bottomLine", function(){return "";});
        obj.setLayoutTemplate(new AW.Panels.Horizontal);
        obj.setPanelTemplate(function(i){
            switch(i){
                    case 0: return this.getTopLineTemplate();
                    case 1: return this.getScrollTemplate();
                    case 2: return this.getBottomLineTemplate();
                }
            });

        obj.setPanelHeight(35, 0); //top line
        obj.setPanelHeight(0, 2); //bottom line
        
        //-------------------------------------------------------------
        // Default to view		
        //-------------------------------------------------------------
        obj.GridView();
        //alert(obj.toString());
        
        
        return obj;
   }   

//---------------------------------------------------------------------------------------
// configure before calling displayGrid()
//---------------------------------------------------------------------------------------

            var F71Evos= new Object;
            
            // Sub headers
            F71Evos.SubHeaders= ['Entité',"","","","","","","","","","",""]; 
            
            // Headers
            F71Evos.Headers= ['Nom','Visible','Mel affichée','Nom','Prénom','Password','id','Mel réel','Date','Nom (login)','Cache mel','Type']; 

            // column sizes
            F71Evos.ColSizes= [100,100,100,100,100,100,80,80,80,80,80,80]; 
            
            // alignment (0 : left, 1: right)
            F71Evos.ColAlign= [0,0,0,0,0,0,0,0,0,0,0,0]; 
            
            // types of each comlumn
            F71Evos.ColTypes= ['string','boolean','string','string','string','password','long','string','date','string','boolean','string']; 

            // alow edition on column (0 : non editable, 1: editable, 2: add a suffix when duplicating this cell
            F71Evos.ColEdit= [1,1,1,1,1,1,1,1,1,2,1,1];
            
            // columns that are ruled by a typology (non editable combo list : select)
            F71Evos.Typos= ['','','','','','','','','','','','RE01_TYPE']; 
            
            // tool tips for each column
            F71Evos.Description= ["null","Visible","Adresse mel affichée","Nom","Prénom","Mot de passe","null","Adresse mel réelle","Date d'enregistrement","Nom utilisateur (login)","Cache l'adresse mel réelle","Type de user"]; 

            // data key ids
            F71Evos.DataIds= [4304,4305,4306,4307,4308,4309,4310,4311,4312,4313,4314,4315,4316,4317,4318,4319,4320,4321,4322,4323,4324,4325,4326,4327,4328]; 

            // errors returned after a save on the server : [] : no error on this row, else [array of errors one per attribute in the row]
            F71Evos.TbErrors= null;
            /*  = [
            	 []
            	,[]
                ,["err 1","err 2","err 3","","err 3","err 3","err 3","err 3","err 3","err 3","err 3","err 3"]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            	,[]
            ]; 
            */
            
            // data for the grid
            F71Evos.Data= [['MOA DV DEV','Vrai','','Abderrahmani','Karim','......','4304','karim.abderrahmani@creditfoncier.fr','','','Vrai','EXT'],['MOA DV EI','Vrai','','Achte','André','......','4305','andre.achte@creditfoncier.fr','','','Vrai','CFF'],['MOA FR DOF','Vrai','','Acquaviva','Frédéric','......','4306','','','','Vrai','EXT'],['SCR','Vrai','','Adabunu','Francis','......','4307','','','','Vrai','Int'],['MOA FR DOF','Vrai','','Adam','Estelle','......','4308','estelle.adam@creditfoncier.fr','','','Vrai','CFF'],['MOE','Vrai','','Adrouche','Omar','......','4309','omar.adrouche@creditfoncier.fr','','','Vrai','Int'],['PROD','Vrai','','Agasse','Julien','......','4310','julien.agasse@creditfoncier.fr','','','Vrai','Int'],['MOA FR CPT','Vrai','','Agius','Fabrice','......','4311','fabrice.agius@creditfoncier.fr','','','Vrai','CFF'],['MOA','Vrai','','Aimelafille','Jacques','......','4312','jacques.aimelafille@creditfoncier.fr','','','Vrai','CFF'],['MOA FR DOF','Vrai','','Akoun','Véronique','......','4313','veronique.akoun@creditfoncier.fr','','','Vrai','CFF'],['MOE','Vrai','','Albani','Stefano','......','4314','stefano.albani@creditfoncier.fr','','','Vrai','Int'],['DILC','Vrai','','Albaret','Laurent','......','4315','laurent.albaret@creditfoncier.fr','','','Vrai','Int'],['D8','Vrai','','Albert','Eric','......','4316','eric.albert@creditfoncier.fr','','','Vrai','Int'],['SCR','Vrai','','Alegre De Vega','Jean-paul','......','4317','','','','Vrai','Int'],['DRSD','Vrai','','Alexandre','Roch','......','4318','roch.alexandre@creditfoncier.fr','','','Vrai','Int'],['DILC','Vrai','','Alix','Didier','......','4319','didier.alix@creditfoncier.fr','','','Vrai','Int'],['MOA FR GDC','Vrai','','Allart','Guy','......','4320','guy.allart@creditfoncier.fr','','','Vrai','CFF'],['MOA','Vrai','','Allory','Isabelle','......','4321','isabelle.allory@creditfoncier.fr','','','Vrai','EXT'],['MOA','Vrai','','Allou','Augustin','......','4322','augustin.allou@creditfoncier.fr','','','Vrai','CFF'],['MOA FR GDC','Vrai','','Almeida','Dinis','......','4323','dinis.almeida-lemos@creditfoncier.fr','','','Vrai','EXT'],['MOA DV EI','Vrai','','Alrivie','Marie-christine','......','4324','marie-christine.alrivie@creditfoncier.fr','','','Vrai','CFF'],['DRSD','Vrai','','Amade','Gilles','......','4325','gilles.amade@creditfoncier.fr','','','Vrai','Ext'],['MOE','Vrai','','Amadou','Ly','......','4326','amadou.ly@creditfoncier.fr','','','Vrai','Int'],['SCR','Vrai','','Amar','Sydney','......','4327','sydney.amar@creditfoncier.fr','','','Vrai','Ext'],['MOA FR GDC','Vrai','','Amblard','Dominique','......','4328','dominique.amblard@creditfoncier.fr','','','Vrai','CFF']]; 

            // a copy of the data for RESTORE
            F71Evos.DataBackup= UtilQueryDeepCopy(F71Evos.Data);
            
            // a copy of Ids for RESTORE
            F71Evos.IdsBackup= F71Evos.DataIds.concat();

            // action URL for the save form
            F71Evos.ActionURL= "/portal/auth/index.html?ctrl:cmd=action&ctrl:window=Test.Cfg.User.Main.ListWindow";

            // used for uniqueness in portal context
            F71Evos.Instance= 'F71';
            
            // function title
            F71Evos.EvosFunction= 'User';
            
            // number of rows in the data
            F71Evos.NRows= 25;
            
            // total number of results
            F71Evos.NbResults= 85;
            
            // index of the first result returned in this page
            F71Evos.CurrentResult= 0;
            
            // size of the page
            F71Evos.PageSize= 25;

            // combo list for the typology
            var kbRE01_TYPE= ['CDD','CFF','CNCE','EXT','Girce','ITM','Int','MOA','ND']; 
</script>


<div class='evos-grid' id='UserList'> 
   <script>         
            // call to display the grid
            // first parameter : used to build the URL to a detailed page when clicking on the row (in view mode)
            // second parameter: the object id for the grid
            // third parameter : the configuration parameter described above
            var F71Grid= displayGrid('Test.Cfg.User.Detail.MenudetailWindow','F71Grid',F71Evos);            
            if (F71Grid!=null) document.write(F71Grid);
    </script>
</div>

<FORM action='/portal/auth/index.html?ctrl:cmd=action&ctrl:window=Test.Cfg.User.Main.ListWindow&todo=save' method='post' name='EvosGridSave' >
            <input type='hidden' name='grid' value='' >
            <input type='hidden' name='dele' value='' >
            <input type='hidden' name='ids' value='' >
            <input type='hidden' name='sizes' value='' >
</FORM>

</body>
</html>
Philippe
March 22,
This is for the newbees, I consider myself as one.

If anyone find it hard to retrieve clipboard data in Mozilla, go to the link below, I am sure you will find your answer:

http://www.krikkit.net/howto_javascript_copy_clipboard.html

It show how you can enable access of browser APIs using XPConnect ;-)

Anyways the code above is awsome and quite helpful.Thanks!! Philippe.
Sumit4u
December 19,
je ne trouve la maniére de verifier l'existance d'une page parametrée avant de faire le window.navigate
December 24,
How it can be use in IIS servers. any body have some idea?
rajendra
December 26,

This topic is archived.

See also:


Back to support forum