3.2.0
Forum Demo Guide API Store

Problem with SORT method in Version 1.0

Hi, in reference at http://www.activewidgets.com/javascript.forum.1394.55/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
http://www.activewidgets.com/javascript.forum.6959.6/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:

PAGING with Version 2.0 K.P (28)
Problem in Sorting - When Using Currency Symbol Fahad Hanif (9)
date column sorting problem Bart (9)
Sorting on second header row. Sudhaker Raj (15)
Height Percentage Problems ... Tony (13)
AW version 2.5.6 detection problems with IE 6 (and 7 ?) Roland Bär (6)
Upgrading from earlier version -- problem JOhn Kiernan, TBC Software (6)
Mouse Wheel not working in version 2.0.1 Brian McCrary (11)
Alex ... Beta4 problem Rob Francis (11)
AW.Input control in a grid header row - problem in FF Will (11)

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