3.2.0
Forum Demo Guide API Store

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:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Example - saving editable grid data to the server Alex (ActiveWidgets) (18)
PAGING with Version 2.0 K.P (28)
Column Header DropdownBox Filter Example Required Andy (28)
Filter, Expert Footer, Expert ToolBar and more - Examples Paulo Cesar Silva Reis (PC from Brazil). (24)
Simple PHP/MySQL example Alex (ActiveWidgets) (22)
Server side filtering AJAX-style Rick Jordan (17)
2.0 examples Jim (15)
when will ajax paging be available? Joe Hudson (13)
RC1 Example & Question: Combo in a grid column. Rob Francis (13)

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