Image on a Cell
Hi Everybody... I'm trying to work out something easy, as far as i can see... I've got a grid which work in this way:
Some javascript function execute the AddRow() function whith some values to add in my grid. When this values are added, i wrote some others check functions that validate their contents. So far so good..
My client is very confort with the grid and how it works... buuuut... He wants to show some images in cells indicating some kind of "flags". I've seen a lot of examples of how to use images on a cell... but no one with the AddRow() event... The image to show deppends on a cell value... So, i'm going to copy my script so you can see what i'm talking about:
</script>
var string = new AW.Formats.String;
var number = new AW.Formats.Number;
number.setTextFormat("$ #,###.##");
var number1 = new AW.Formats.Number;
number1.setTextFormat("$ #,###.###");
var number2 = new AW.Formats.Number;
number2.setTextFormat("#,###.##");
var obj = new AW.UI.Grid;
var myHeaders = ["Cod. Artículo", "Detalle", "Cantidad", "Unidad", "Precio", "Disponibilidad", "Bonif.(%)", "I.V.A.(%)", "Importe", "I.V.A.", "48Hrs", "96Hrs", "10dias", "oc10dias", "Descuento"];
obj.setStyle("width", "100%");
obj.setStyle("height", "350");
obj.setHeaderText(myHeaders);
obj.setCellData(myCells);
obj.setCellFormat([string, string, number2, string, number1, string, number2, number2, number, number, number2, number2, number2, string, string]);
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
obj.setColumnWidth(400, 1);
obj.setColumnWidth(80, 2);
obj.setColumnWidth(80, 3);
obj.setColumnWidth(80, 4);
obj.setColumnWidth(200, 5);
obj.setColumnWidth(80, 6);
obj.setColumnWidth(80, 7);
obj.setColumnWidth(80, 8);
obj.setColumnWidth(80, 9);
obj.setColumnWidth(80, 10);
obj.setColumnWidth(80, 11);
obj.setColumnWidth(80, 12);
obj.setColumnWidth(80, 13);
obj.setColumnWidth(80, 14);
obj.setColumnWidth(200, 15);
obj.setColumnWidth(80, 16);
obj.setVirtualMode(false);
obj.setColumnCount(16);
obj.setRowCount(0);
obj.setCellEditable(true);
obj.setCellEditable(false, 0);
obj.setCellEditable(false, 1);
obj.setCellEditable(false, 3);
obj.setCellEditable(false, 4);
obj.setCellEditable(false, 5);
obj.setCellEditable(false, 6);
obj.setCellEditable(false, 7);
obj.setCellEditable(false, 8);
obj.setCellEditable(false, 9);
obj.setCellEditable(false, 10);
obj.setCellEditable(false, 11);
obj.setCellEditable(false, 12);
obj.setCellEditable(false, 13);
obj.setCellEditable(false, 14);
obj.setCellEditable(false, 15);
obj.setCellEditable(false, 16);
obj.setColumnIndices([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 16]); //Solo visualiza las columnas que necesito ver.
document.write(obj);
function addRow(){
var xDisp = Disponibilida(document.getElementById("txtcanti").value, document.getElementById("48hrs").value, document.getElementById("96hrs").value, document.getElementById("10dias").value, document.getElementById("oc10dias").value);
var xDesc = BuscaDescuento(document.getElementById("txtcanti").value, document.getElementById("xDesc").value);
var i = myCells.length;
var xImpo = document.getElementById("txtcanti").value * document.getElementById("txtprecio").value * 1.00;
var xImpoIva = xImpo * document.getElementById("txtiva").value / 100;
var xLinea = CheckArti(document.getElementById("txtcodarti").value);
if (xLinea != -1) {
i = xLinea;
}
// add row to the datasource
myCells[i] = [document.getElementById("txtcodarti").value, document.getElementById("txtdetalle").value, parseFloat(document.getElementById("txtcanti").value), document.getElementById("txtunidad").value, document.getElementById("txtprecio").value, xDisp, parseFloat(xDesc), document.getElementById("txtiva").value, xImpo, xImpoIva, document.getElementById("48hrs").value, document.getElementById("96hrs").value, document.getElementById("10dias").value, document.getElementById("oc10dias").value, document.getElementById("xDesc").value];
// update grid
if (xLinea == -1) {
obj.addRow(i);
}
// Reload();
// RefTotal();
}
obj.onCellValidating = function(text, col, row){
var value = Number(text);
if (!((value > 0) && (value < 1000000))) {
alert("Error de validación - Item: "+ (eval(row) + eval(1)) +" valor: " + text + ", Solo se permiten números entre 1 y 1.000.000... Para recuperar el valor original, presione dos veces la tecla 'Esc', o una vez 'Enter' y luego la tecla 'Esc'.");
return true;
}
}
function Disponibilida(xText, x48hrs, x96Hrs, x10dias, xOc10dias){
var xDisp = "";
// some code
return xDisp;
}
function BuscaDescuento(xCanti, xCampoDts){
var xDesc = 0;
// some code
return xDesc;
}
function CheckArti(xArti){
var Existe = -1;
// some code
return Existe;
}
</script>
As you can see, i've got some textboxes in my form where i write some texts and numbers... Then, with a button, I execute the AddRow function. So... How in the "#$"! hell do I put an image on cell 16 when cell 15 is 0 or not???? Where do i have to write it??? In the addrow()? In the obj.onCellValidating ?? I've no idea...
Thanks for your time... See you!
Some javascript function execute the AddRow() function whith some values to add in my grid. When this values are added, i wrote some others check functions that validate their contents. So far so good..
My client is very confort with the grid and how it works... buuuut... He wants to show some images in cells indicating some kind of "flags". I've seen a lot of examples of how to use images on a cell... but no one with the AddRow() event... The image to show deppends on a cell value... So, i'm going to copy my script so you can see what i'm talking about:
</script>
var string = new AW.Formats.String;
var number = new AW.Formats.Number;
number.setTextFormat("$ #,###.##");
var number1 = new AW.Formats.Number;
number1.setTextFormat("$ #,###.###");
var number2 = new AW.Formats.Number;
number2.setTextFormat("#,###.##");
var obj = new AW.UI.Grid;
var myHeaders = ["Cod. Artículo", "Detalle", "Cantidad", "Unidad", "Precio", "Disponibilidad", "Bonif.(%)", "I.V.A.(%)", "Importe", "I.V.A.", "48Hrs", "96Hrs", "10dias", "oc10dias", "Descuento"];
obj.setStyle("width", "100%");
obj.setStyle("height", "350");
obj.setHeaderText(myHeaders);
obj.setCellData(myCells);
obj.setCellFormat([string, string, number2, string, number1, string, number2, number2, number, number, number2, number2, number2, string, string]);
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
obj.setColumnWidth(400, 1);
obj.setColumnWidth(80, 2);
obj.setColumnWidth(80, 3);
obj.setColumnWidth(80, 4);
obj.setColumnWidth(200, 5);
obj.setColumnWidth(80, 6);
obj.setColumnWidth(80, 7);
obj.setColumnWidth(80, 8);
obj.setColumnWidth(80, 9);
obj.setColumnWidth(80, 10);
obj.setColumnWidth(80, 11);
obj.setColumnWidth(80, 12);
obj.setColumnWidth(80, 13);
obj.setColumnWidth(80, 14);
obj.setColumnWidth(200, 15);
obj.setColumnWidth(80, 16);
obj.setVirtualMode(false);
obj.setColumnCount(16);
obj.setRowCount(0);
obj.setCellEditable(true);
obj.setCellEditable(false, 0);
obj.setCellEditable(false, 1);
obj.setCellEditable(false, 3);
obj.setCellEditable(false, 4);
obj.setCellEditable(false, 5);
obj.setCellEditable(false, 6);
obj.setCellEditable(false, 7);
obj.setCellEditable(false, 8);
obj.setCellEditable(false, 9);
obj.setCellEditable(false, 10);
obj.setCellEditable(false, 11);
obj.setCellEditable(false, 12);
obj.setCellEditable(false, 13);
obj.setCellEditable(false, 14);
obj.setCellEditable(false, 15);
obj.setCellEditable(false, 16);
obj.setColumnIndices([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 16]); //Solo visualiza las columnas que necesito ver.
document.write(obj);
function addRow(){
var xDisp = Disponibilida(document.getElementById("txtcanti").value, document.getElementById("48hrs").value, document.getElementById("96hrs").value, document.getElementById("10dias").value, document.getElementById("oc10dias").value);
var xDesc = BuscaDescuento(document.getElementById("txtcanti").value, document.getElementById("xDesc").value);
var i = myCells.length;
var xImpo = document.getElementById("txtcanti").value * document.getElementById("txtprecio").value * 1.00;
var xImpoIva = xImpo * document.getElementById("txtiva").value / 100;
var xLinea = CheckArti(document.getElementById("txtcodarti").value);
if (xLinea != -1) {
i = xLinea;
}
// add row to the datasource
myCells[i] = [document.getElementById("txtcodarti").value, document.getElementById("txtdetalle").value, parseFloat(document.getElementById("txtcanti").value), document.getElementById("txtunidad").value, document.getElementById("txtprecio").value, xDisp, parseFloat(xDesc), document.getElementById("txtiva").value, xImpo, xImpoIva, document.getElementById("48hrs").value, document.getElementById("96hrs").value, document.getElementById("10dias").value, document.getElementById("oc10dias").value, document.getElementById("xDesc").value];
// update grid
if (xLinea == -1) {
obj.addRow(i);
}
// Reload();
// RefTotal();
}
obj.onCellValidating = function(text, col, row){
var value = Number(text);
if (!((value > 0) && (value < 1000000))) {
alert("Error de validación - Item: "+ (eval(row) + eval(1)) +" valor: " + text + ", Solo se permiten números entre 1 y 1.000.000... Para recuperar el valor original, presione dos veces la tecla 'Esc', o una vez 'Enter' y luego la tecla 'Esc'.");
return true;
}
}
function Disponibilida(xText, x48hrs, x96Hrs, x10dias, xOc10dias){
var xDisp = "";
// some code
return xDisp;
}
function BuscaDescuento(xCanti, xCampoDts){
var xDesc = 0;
// some code
return xDesc;
}
function CheckArti(xArti){
var Existe = -1;
// some code
return Existe;
}
</script>
As you can see, i've got some textboxes in my form where i write some texts and numbers... Then, with a button, I execute the AddRow function. So... How in the "#$"! hell do I put an image on cell 16 when cell 15 is 0 or not???? Where do i have to write it??? In the addrow()? In the obj.onCellValidating ?? I've no idea...
Thanks for your time... See you!
Marcos A. Guardia
August 29,