3.0 beta 2

Problem with SORT method in Version 1.0

Hi, in reference at /datagrid.1394/textbox-template-edit-on-double.html

I have a problem with after edit a value of cell i execute the Sort method, this method replace all values of my grid by the last value modified.

Example:
1. Data of my Grid
col1 col2 col3 .... colN
1 2 3 N
4 5 6 N

2. DoubleClick for cell (row 1, col 1) and put the value 7.

3. Push in the header of column 2 and execute sort method, this method
replace all values by 7

col1 col2 col3 .... colN
7 7 7 7
7 7 7 7


some help, please !!!

my Code:
<html><head>
<link href="/js/grid/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="/js/grid/grid.js"></script>

<!-- grid format -->
<style>
body, html {margin:0px; padding: 0px; overflow: hidden; border: none;}
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {text-align:left;width:200px;}
.active-column-1 {width:200px; }
.active-column-2 {width:60px;}
.active-column-3 {text-align: right;width: 50px;}
.active-column-4 {width:60px;}
.active-column-5 {width:60px;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}

.active-grid-row {
height: 18px;
background: #fff;
}
.active-templates-row.gecko {
display: -moz-box;
width: auto;
min-width: 100%;
}
.active-edit-mode {
overflow: auto;
padding: 0px;
vertical-align: top;
}


.active-templates-input {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #3581FF;
vertical-align: middle;
font: menu;
line-height: 1.4em;
}

.active-templates-input.gecko {
display: block;
margin: 0px;
}

.active-row-highlight {background-color: #ddeeff!important}
.active-row-highlight .active-row-cell {background-color: #ddeeff;}
.active-box-input {border: none;font: menu;background-color: #ff0000;}

.barra {
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #999999;
scrollbar-base-color: #F0F0F0;
scrollbar-darkshadow-color: #F0F0F0;
scrollbar-face-color: #F0F0F0;
scrollbar-highlight-color: #F0F0F0;
scrollbar-shadow-color: #999999;
}
</style>
<script>
var myData = [[...]];
var myValues = [[...]];
var myColumns = [[...]];
</script>
</head>
<body class="barra" oncontextmenu="return true;">
<script>

// MONTAMOS EL INPUT
// ###################################

if (!window.My) My=[];
if (!My.Templates) My.Templates=[];

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

My.Templates.Currency.create = function()
{
var obj2 = 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");

//En el atributo name nos guardamos el codigo de cuenta.
editor.setAttribute("name", function(){
return template2.getItemProperty("value");
});
editor.setAttribute("value", function(){
return template2.getItemProperty("text");
});

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

function switchToEditMode(){
if (template2) {
switchToTextMode();
}
// Celdas undefined no editables
if (this.element().innerHTML == "undefined") return;

template2 = this;
template.element().className += "active-edit-mode";
//template2.element().style.padding = 0;
//Actualizamos los nuevos valores del editor.
editor.setAttribute("value",template2.element().innerHTML);
editor.setAttribute("name",template2.getItemProperty("value"));

template2.element().innerHTML = editor;
editor.element().focus();
}

obj2.setEvent("ondblclick", this.focus);
obj2.setEvent("ondblclick", switchToEditMode);


function switchToTextMode(){
var originalVal = template2.getItemProperty("text");
var value = editor.element().value;
var vError = 0;
// Controlamos que en el código postal solo se introduzcan números.
if (template2.getColumnProperty("index") == 3){
try {
if(isNaN(value)) {
alert("Solo se pueden introducir números.");
vError = 1;
}
// Por si queremos poner mascara.
//var format = new Active.Formats.Number;
//format.setTextFormat("#,###.##");
//value = format.dataToText(value);
}
catch(error){
//ignore errors
}
}
// Comprobamos si ha cambiado el valor.
if(originalVal != value && vError == 0){
// value changed, call the callback function
var row = template2.getRowProperty("index");
var col = template2.getColumnProperty("index");

// Insertamos el nuevo valor
alert(template2.element().innerHTML);// = value;

//template2.setDataProperty("text", value);
template2.setDataProperty("text", value, row);


//Actualizamos
//updateData(editor.element().name,col,value);
}
template2.refresh();
template2 = null;
}

editor.setEvent("onblur", switchToTextMode);
};

My.Templates.Currency.create();

// ##############################################
// ##############################################


// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// Ponemos el rollover de la fila
var alternate = function(){
return this.getProperty("row/order") % 2 ? "#fcfaf6" : "#ffffff";
}

var row = new Active.Templates.Row;
row.setStyle("background", alternate);
row.setEvent("onmouseover", "mouseover(this, ''active-row-highlight'')");
row.setEvent("onmouseout", "mouseout(this, ''active-row-highlight'')");
obj.setTemplate("row", row);


// Creamos la plantilla para poner el campo editable (input).
// ######################################################
var template = new My.Templates.Currency;

// Asignamos el campo editable al grid
obj.setColumnTemplate(template);

// Con esto evitamos que cuando estamos dentro del input si pulsamos
// alguna flecha no se salga de éste.
obj.setEvent("onkeydown", null);
obj.getTemplate("top").setEvent("onselectstart", obj.getEvent("onselectstart"));
obj.setEvent("onselectstart", null);


// ######################################################



// Rellenamos los datos del GRID.
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setDataProperty("value", function(i, j){return myValues[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

// Nº de filas y Nº de columnas del GRID. Las columnas empiezan por 0.
obj.setRowProperty("count", "6");
obj.setColumnProperty("count", "");

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

</script>
</body>
</html>







APerez
November 5,
Hi, I think that the problem is in the next line of my code:

template2.setDataProperty("text", value, row);

when i commented this line my code works fine, but does not replace the cell value by the value entered in the input.

any solution !!
APerez
November 5,
Sorry, I forgot, I have changed the method SORT to order by text and not by value.

original:

obj.sort = function(index, direction){
...

for (i=0; i<rows.length; i++) {
value[rows[i]] = this.getDataProperty("value", rows[i], index); pos[rows[i]] = i;
}

...
}

new code:
obj.sort = function(index, direction){
...

for (i=0; i<rows.length; i++) {
value[rows[i]] = this.getDataProperty("text", rows[i], index); pos[rows[i]] = i;
}

...
}

APerez
November 5,
Hi, APerez ,
Quite a long time since coding any AW Version 1 Examples, but as there is No V1 support since ages (officially), I'll try to remember the old times ;-).
I Made your sample working by:
-Rebuilt the Currency template ( just took Sudhaker Raj code from the post you mentioned and add lines 111 , 123-127

-Corrected 167-168 and replaced 189-190 with 192-193

-Ah!, and you don't need to modify/create a new sort function.
(it is working without any sort change now)
But if you apply formating to currency (lines 130-132) you just need to
do setTextFormat() , please reffer to
/datagrid.6959/howto-format-numbers.html
Hope this Helps
<html><head>
<link href="/js/grid/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="/js/grid/grid.js"></script>
rel="stylesheet"></link>  

<!-- grid format --> 
<style> 
body, html {margin:0px; padding: 0px; overflow: hidden; border: none;} 
.active-controls-grid {height: 100%; font: menu;} 

.active-column-0 {text-align:left;width:200px;}
.active-column-1 {width:200px; }
.active-column-2 {width:60px;}
.active-column-3 {text-align: right;width: 50px;}
.active-column-4 {width:60px;}
.active-column-5 {width:60px;}

.active-grid-column {border-right: 1px solid threedlightshadow;} 
.active-grid-row {border-bottom: 1px solid threedlightshadow;} 

.active-grid-row { 
height: 18px; 
background: #fff; 
}
.active-templates-row.gecko {
display: -moz-box;
width: auto;
min-width: 100%;
}
.active-edit-mode {
overflow: auto;
padding: 0px;
vertical-align: top;
}


.active-templates-input { 
overflow: hidden; 
width: 100%; 
height: 100%; 
padding: 0px 5px; 
margin: -1px 0px; 
border: 1px solid #3581FF; 
vertical-align: middle; 
font: menu; 
line-height: 1.4em; 
} 

.active-templates-input.gecko { 
display: block; 
margin: 0px; 
}

.active-row-highlight {background-color: #ddeeff!important}
.active-row-highlight .active-row-cell {background-color: #ddeeff;}
.active-box-input {border: none;font: menu;background-color: #ff0000;}

.barra {
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #999999;
scrollbar-base-color: #F0F0F0;
scrollbar-darkshadow-color: #F0F0F0;
scrollbar-face-color: #F0F0F0;
scrollbar-highlight-color: #F0F0F0;
scrollbar-shadow-color: #999999;
}
</style>
<script>
var myData = [['column1','column2'],['column1','column2']];
var myValues = [['column1','column2'],['column1','column2']];
var myColumns = ['column1','column2'];
</script>
</head> 
<body class="barra" oncontextmenu="return true;">
<script> 

// MONTAMOS EL INPUT
// ###################################

// ****************************************************************  
  //     Currency Cell Template.  
  // ********************************************* 
  if (!window.My) My=[]; 
if (!My.Templates) My.Templates=[]; 

My.Templates.Currency = Active.Templates.Text.subclass(); 
   
 My.Templates.Currency.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").replace(/\,/g,''); 
 }); 
   
 // 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 originalVal = template.getItemProperty("text"); 
 var LastVal = template.getItemProperty("value"); 
 var value = editor.element().value; 
 try { 
 if(isNaN(value)) {
 alert('Please enter numbers only.'); 
 // quita caracteres alfabeticos.
 //value = value.replace(/[^\d\.]/g,''); 
       
 // Si ,queremos volver al valor anterior.
 value = LastVal;
 } 
 // Por si queremos poner mascara.
 //var format = new Active.Formats.Number; 
 //format.setTextFormat("#,###.##"); 
 //value = format.dataToText(value); 
 } 
 catch(error){ 
 //    ignore errors 
 } 
 if(originalVal != value){ 
 template.setItemProperty("text", value); 
 } 
 template.refresh(); 
 template = null; 
 } 

 editor.setEvent("onblur", switchToTextMode); 
 }; 
 
 My.Templates.Currency.create();  

// ##############################################
// ##############################################

// create ActiveWidgets Grid javascript object 
var obj = new Active.Controls.Grid; 

// Ponemos el rollover de la fila
var alternate = function(){
return this.getProperty("row/order") % 2 ? "#fcfaf6" : "#ffffff";
}

var row = new Active.Templates.Row;
row.setStyle("background", alternate);
row.setEvent("onmouseover", mouseover(this, 'active-row-highlight') );
row.setEvent("onmouseout", mouseout(this, 'active-row-highlight') );
obj.setTemplate("row", row);


// Creamos la plantilla para poner el campo editable (input).
// ##################################################
var template = new My.Templates.Currency; 

// Asignamos el campo editable al grid 
obj.setColumnTemplate(template);

// Con esto evitamos que cuando estamos dentro del input si pulsamos
// alguna flecha no se salga de éste. 
obj.setEvent("onkeydown", null); 
obj.getTemplate("top").setEvent("onselectstart", obj.getEvent("onselectstart")); 
obj.setEvent("onselectstart", null); 


// ############################################

// Rellenamos los datos del GRID.
//obj.setDataProperty("text", function(i, j){return myData[i][j]}); 
//obj.setDataProperty("value", function(i, j){return myValues[i][j]}); 

 obj.getDataText = function(i, j){return myData[i][j]}; 
 obj.setDataText = function(value, i, j){myData[i][j] = value}; 

obj.setColumnProperty("text", function(i){return myColumns[i]}); 

// Nº de filas y Nº de columnas del GRID. Las columnas empiezan por 0. 
obj.setRowProperty("count", "2"); 
obj.setColumnProperty("count", "2"); 

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

</script> 
</body> 
</html>
Carlos
November 5,
Hi Carlos, thank you for your help but your solution does not work, i have the same problem, when i sort the any column the system replace all columns values by the last value modified.


any solution, please!!
APerez
November 10,
Try adding this new line:

editor.setEvent("ondblclick", editor.element().focus());
}
editor.setEvent("onblur", switchToTextMode); /// New Line

obj.setEvent("ondblclick", switchToEditMode);

function switchToTextMode(){
November 10,
Does not work !!

My new Code:
<html><head>
<link href="/cmn/css/mypyme.css" rel="stylesheet" type="text/css">
<link href="/js/grid/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="/js/grid/grid.js"></script>

<!-- grid format -->
<style>
body, html {margin:0px; padding: 0px; overflow: hidden; border: none;}
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {text-align:left;width:200px;}
.active-column-1 {width:200px; }
.active-column-2 {width:60px;}
.active-column-3 {text-align: right;width: 50px;}
.active-column-4 {width:60px;}
.active-column-5 {width:60px;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}

.active-grid-row {
height: 18px;
background: #fff;
}
.active-templates-row.gecko {
display: -moz-box;
width: auto;
min-width: 100%;
}
.active-edit-mode {
overflow: auto;
padding: 0px;
vertical-align: top;
}


.active-templates-input {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #3581FF;
vertical-align: middle;
font: menu;
line-height: 1.4em;
}

.active-templates-input.gecko {
display: block;
margin: 0px;
}

.active-row-highlight {background-color: #ddeeff!important}
.active-row-highlight .active-row-cell {background-color: #ddeeff;}
.active-box-input {border: none;font: menu;background-color: #ff0000;}

.barra {
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #999999;
scrollbar-base-color: #F0F0F0;
scrollbar-darkshadow-color: #F0F0F0;
scrollbar-face-color: #F0F0F0;
scrollbar-highlight-color: #F0F0F0;
scrollbar-shadow-color: #999999;
}
</style>
<script>
var myColumns = ["Cuenta","Dirección","Población","C. Postal","NOMBRE COMERCIAL","OPERADOR DE COMUNICACIONES"];
var myData = [["ANA M. MUÐOZ FERRER33", "ALMUSAFES POG IND, 2", "BENIPARRELL", "46469", "datadeWEc", "ddol"],
["ANGEL FERRER CERCOS", "CALLE DELS FUSTER (PL. LA MINA) 0 ", "PAIPORTA", "46200"],
["ASENSI FERRER, S.L.", "PZ PROFESOR LÓPEZ IBOR 12", "VALENCIA", "96015", "DSdataDd", "ddol"],
["ASESORIA FERRER MELIA, S.L.3", "CL HERRERÍAS 5 2º", "BENIDORM", "96015", "dataSD3e", "ddol"],
["BRUNO ANDREOLETTI FERRERES", "ADOR, 52 3 11", "MANISES", "46026"],
["CARAVANAS FERRERO, S.L.", "Cr Valencia - Lg. Santa Faz 3", "SAN JUAN DE ALICANTE", "3559", "TTdatae", "ddol"],
["CASA FERRERES 1915 S.L.L.", "SAN BENITO, 9", "ALCALA DE XIVERT", "12570", "dsdata", "ddol"],
["CHAPAS Y MADERAS FERRERO, S.A.", "Cr Fuente de En Corts 1", "VALENCIA", "46013", "ddata", "ddol"],
["COMERCIAL VICENTE TARAZONA FERRERO, S.L.", "Av Espioca s/n", "SILLA", "46460", "eedata", "ddol"],
["CONCA Y FERRER, S.L.", "P.I.EL CARRASCOT, PARC.21", "LÓLLERIA", "46850", "data", "ddol"]];
var myValues = [["DDOL2341521578", "DDOL2341521578", "DDOL2341521578", "DDOL2341521578", "DDOL2341521578$52", "DDOL2341521578$57"],
["DDOL272847628", "DDOL272847628", "DDOL272847628", "DDOL272847628"],
["DDOL1961631046", "DDOL1961631046", "DDOL1961631046", "DDOL1961631046", "DDOL1961631046$52", "DDOL1961631046$57"],
["DDOL2205028047", "DDOL2205028047", "DDOL2205028047", "DDOL2205028047", "DDOL2205028047$52", "DDOL2205028047$57"],
["DDOL2873821289", "DDOL2873821289", "DDOL2873821289", "DDOL2873821289"],
["DDOL2728628330", "DDOL2728628330", "DDOL2728628330", "DDOL2728628330", "DDOL2728628330$52", "DDOL2728628330$57"],
["DDOL1993622372", "DDOL1993622372", "DDOL1993622372", "DDOL1993622372", "DDOL1993622372$52", "DDOL1993622372$57"],
["DDOL1880726406", "DDOL1880726406", "DDOL1880726406", "DDOL1880726406", "DDOL1880726406$52", "DDOL1880726406$57"],
["DDOL2321334250", "DDOL2321334250", "DDOL2321334250", "DDOL2321334250", "DDOL2321334250$52", "DDOL2321334250$57"],
["DDOL2178110838", "DDOL2178110838", "DDOL2178110838", "DDOL2178110838", "DDOL2178110838$52", "DDOL2178110838$57"]];
</script>

</head>
<body class="barra" oncontextmenu="return true;">
<script>
function updateData(pCode,pColumn,pValue){
var objectToAppend = document.createElement("iframe");
objectToAppend.setAttribute("id","ifr"+pCode);
objectToAppend.src = "DDOL_PK_ATRIBUTOS_GES.UPDATE_DATA?P_CODIGO="+pCode+"&P_COLUMNA="+pColumn+"&P_VALOR="+pValue;
document.body.appendChild(objectToAppend);
}
function removeIfr(theid){
var vIfrm = document.getElementById(theid);
document.body.removeChild(vIfrm);
}

// MONTAMOS EL INPUT
// ###################################

if (!window.My) My=[];
if (!My.Templates) My.Templates=[];

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

My.Templates.Currency.create = function()
{
var obj2 = 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");

//En el atributo name nos guardamos el codigo de cuenta.
editor.setAttribute("name", function(){
return template2.getItemProperty("value");
});
editor.setAttribute("value", function(){
return template2.getItemProperty("text");
});

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

function switchToEditMode(){
if (template2) {
switchToTextMode();
}
// Celdas undefined no editables
if (this.element().innerHTML == "undefined") return;

template2 = this;
//template.element().className += "active-edit-mode";
template2.element().style.padding = 0;
//Actualizamos los nuevos valores del editor.
//editor.setAttribute("value",template2.element().innerHTML);
//editor.setAttribute("name",template2.getItemProperty("value"));

template2.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick", editor.element().focus());
editor.setEvent("onblur", switchToTextMode);
}

obj2.setEvent("ondblclick", this.focus);
obj2.setEvent("ondblclick", switchToEditMode);


function switchToTextMode(){
var originalVal = template2.getItemProperty("text");
var value = editor.element().value;
var vError = 0;
// Controlamos que en el código postal solo se introduzcan números.
if (template2.getColumnProperty("index") == 3){
try {
if(isNaN(value)) {
alert("Solo se pueden introducir números.");
vError = 1;
}
// Por si queremos poner mascara.
//var format = new Active.Formats.Number;
//format.setTextFormat("#,###.##");
//value = format.dataToText(value);
}
catch(error){
//ignore errors
}
}
// Comprobamos si ha cambiado el valor.
if(originalVal != value && vError == 0){
// value changed, call the callback function
var row = template2.getRowProperty("index");
var col = template2.getColumnProperty("index");

// Insertamos el nuevo valor
//template2.setDataProperty("text", value);
template2.setDataProperty("text", value, row);

//Actualizamos
//updateData(editor.element().name,col,value);

}
template2.refresh();
template2 = null;
}

editor.setEvent("onblur", switchToTextMode);
};

My.Templates.Currency.create();

// ##############################################
// ##############################################


// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// Ponemos el rollover de la fila
var alternate = function(){
return this.getProperty("row/order") % 2 ? "#fcfaf6" : "#ffffff";
}

var row = new Active.Templates.Row;
row.setStyle("background", alternate);
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
obj.setTemplate("row", row);


// Creamos la plantilla para poner el campo editable (input).
// ######################################################
var template = new My.Templates.Currency;

// Asignamos el campo editable al grid
obj.setColumnTemplate(template);

// Con esto evitamos que cuando estamos dentro del input si pulsamos
// alguna flecha no se salga de éste.
obj.setEvent("onkeydown", null);
obj.getTemplate("top").setEvent("onselectstart", obj.getEvent("onselectstart"));
obj.setEvent("onselectstart", null);

// Para que no se ordenen las columnas.
//obj.getTemplate("top/item").setEvent("onmousedown", null);

// ######################################################


// Rellenamos los datos del GRID.
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setDataProperty("value", function(i, j){return myValues[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

// Nº de filas y Nº de columnas del GRID. Las columnas empiezan por 0.
obj.setRowProperty("count", "10");
obj.setColumnProperty("count", 6);

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

</script>
</body>
</html>
APerez
November 11,
Seems that is gone just by Uncomment (removing '//') the line:
editor.setAttribute("value",template2.element().innerHTML);
Carlos
November 11,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.