:: Forum >>

problems to hide a grid in a dialog with tabs

Hi everybody, i'm new on this, so I have problems to hide a grid in a page into a dialog, so when I try to change to another tab in the dialog, the grid stays there, insted of change like the rest of the elements in the first tab on the dialog.

The real problem in that i'm calling the grid with the tipic <span id.... so anybody could tell me the easyest way to calling the grid from the dialog and avoiding to user the html tag (<span id="mygrid"></span><br><span id="mylabel"></span>)

Could anybody give me a clue???
CBT
Friday, August 31, 2007
Check the example code in examples/controls - tabs/ directory.
Alex (ActiveWidgets)
Monday, September 3, 2007
This is part of the code I been wrinting, as you see, there are to set of scritps, one belong to the dialog and the other is for the little grid, however to calling the grid, a Span is declared, what i tried to do is calling the span with AW.HTML.SPAN, but doen't work.

<html>
<head>
<title>Seguridad Medusa</title>
<link href="runtime/styles/mono/aw.css" rel="stylesheet">
</link>
<script src="runtime/lib/aw.js"></script>
<link href="mini.css" rel="stylesheet">
</link>
<style>
.aw-system-control {position: absolute}

#box {left: 0px; top: 0px; width: 398px; height: 432px; border: 1px solid #999; background: #ece9d8; position: absolute;}
#tabs {left: 6px; top: 6px; width: 386px; height: 22px;}
#frame {left: 6px; top: 28px; width: 386px; height: 365px; border: 1px solid #999; background: #f9f8f4; position: absolute;}
/* -------------------------------------------------------------------- */
#group1 {left: 21px; top: 40px; width: 357px; height: 338px;}
#label1 {left: 70px; top: 60px; width: 300px; height: 16px;}
#label2 {left: 35px; top: 63px; width: 30px; height: 16px;}
#label3 {left: 71px; top: 90px; width: 50px; height: 16px;}
#input1 {left: 135px; top: 89px; width: 100px; height: 20px;}
#label4 {left: 71px; top: 120px; width: 50px; height: 16px;}
#input2 {left: 135px; top: 119px; width: 230px; height: 20px;}
#label5 {left: 71px; top: 150px; width: 50px; height: 16px;}
#input3 {left: 135px; top: 149px; width: 100px; height: 16px;}
#input4 {left: 250px; top: 149px; width: 100px; height: 16px;}
#group2 {left: 31px; top: 170px; width: 337px; height: 137px;}
#roles {left: 41px; top: 190px; width: 227px; height: 107px;}
#label6 {left: 71px; top: 315px; width: 100px; height: 16px;}
#label7 {left: 71px; top: 335px; width: 100px; height: 16px;}
#input6 {left: 253px; top: 335px; width: 70px; height: 16px;}
#label8 {left: 71px; top: 355px; width: 100px; height: 16px;}
#label9 {left: 240px; top: 355px; width: 100px; height: 16px;}
#input8 {left: 287px; top: 354px; width: 70px; height: 16px;}
/* -------------------------------------------------------------------- */
#group3 {left: 21px; top: 40px; width: 357px; height: 338px;}
/* -------------------------------------------------------------------- */
#group4 {left: 21px; top: 40px; width: 357px; height: 338px;}
#label10 {left: 71px; top: 90px; width: 50px; height: 16px;}
#label11 {left: 71px; top: 120px; width: 50px; height: 16px;}
#input10 {left: 210px; top: 120px; width: 25px; height: 16px;}
#label12 {left: 71px; top: 150px; width: 50px; height: 16px;}
#label13 {left: 71px; top: 180px; width: 50px; height: 16px;}
#label14 {left: 71px; top: 210px; width: 50px; height: 16px;}
#label15 {left: 223px; top: 210px; width: 50px; height: 16px;}
#input14 {left: 263px; top: 211px; width: 30px; height: 16px;}
#label16 {left: 300px; top: 210px; width: 50px; height: 16px;}
#label17 {left: 71px; top: 240px; width: 50px; height: 16px;}
#label18 {left: 235px; top: 240px; width: 50px; height: 16px;}
#input16 {left: 275px; top: 240px; width: 20px; height: 16px;}
#label19 {left: 303px; top: 240px; width: 50px; height: 16px;}
#label20 {left: 71px; top: 270px; width: 50px; height: 16px;}
#input17 {left: 251px; top: 271px; width: 25px; height: 16px;}
#label21 {left: 71px; top: 300px; width: 50px; height: 16px;}
#input18 {left: 204px; top: 301px; width: 75px; height: 16px;}
#label22 {left: 71px; top: 330px; width: 50px; height: 16px;}
#input19 {left: 294px; top: 331px; width: 30px; height: 16px;}
#label23 {left: 330px; top: 330px; width: 50px; height: 16px;}

/* -------------------------------------------------------------------- */
</style>
</head>
<body>
<script>

var box = new AW.HTML.DIV;
box.setId("box");
document.write(box);

var tabs = new AW.UI.Tabs;
tabs.setId("tabs");
tabs.setItemText(["Usuarios", "Perfiles", "Generales"]);
//tabs.setItemImage(["user", "alert", "favorites", "settings"]);
tabs.setItemCount(3);
tabs.setSelectedItems([0]);
document.write(tabs);

var frame = new AW.HTML.DIV;
frame.setId("frame");
document.write(frame);

var container = new AW.HTML.SPAN;
document.write(container);

//--

var group1 = new AW.UI.Group;
group1.setId("group1");
group1.setControlText("Datos del Usuario");

var label1 = new AW.UI.Label;
label1.setId("label1");
label1.setControlText("Por favor capture o modifique los datos del usuario");

var label2 = new AW.UI.Label;
label2.setId("label2");
label2.setControlImage("user");

//--

var label3 = new AW.UI.Label;
label3.setId("label3");
label3.setControlText("UserId:");

var input1 = new AW.UI.Input;
input1.setId("input1");
input1.setControlText("Capture UserId");

//--

var label4 = new AW.UI.Label;
label4.setId("label4");
label4.setControlText("Nombre:");

var input2 = new AW.UI.Input;
input2.setId("input2");
input2.setControlText("Nombre del Usuario");

//--

var label5 = new AW.UI.Label;
label5.setId("label5");
label5.setControlText("Password:");

var input3 = new AW.UI.Input;
input3.setId("input3");
input3.getContent('box/text').setAttribute('type', 'password');

var input4 = new AW.UI.Input;
input4.setId("input4");
input4.getContent('box/text').setAttribute('type', 'password');

//--


//--

var group2 = new AW.UI.Group;
group2.setId("group2");
group2.setControlText("Roles");

var obj = new AW.HTML.SPAN;
obj.setId("roles");
document.write(obj);

var obj1 = new AW.HTML.SPAN;
obj.setId("myLabel");
document.write(obj1);


var button7 = new AW.UI.Button;
button7.setId("button7");
button7.setControlText("Editar Perfil");

//--


var label6 = new AW.UI.Label;
label6.setId("label6");
label6.setControlText("Propiedades de Administracion:");

var input5 = new AW.UI.CheckBox;
input5.setId("checkbox");
input5.setControlText("");
input5.setControlValue(false);
input5.setPosition(249, 312);

var label7 = new AW.UI.Label;
label7.setId("label7");
label7.setControlText("Fecha de creación de usuario:");

var input6 = new AW.UI.Input;
input6.setId("input6");
input6.setControlText("");

var label8 = new AW.UI.Label;
label8.setId("label8");
label8.setControlText("El usuario esta bloqueado:");

var input7 = new AW.UI.CheckBox;
input7.setId("checkbox1");
input7.setControlText("");
input7.setControlValue(false);
input7.setPosition(218, 352);

var label9 = new AW.UI.Label;
label9.setId("label9");
label9.setControlText("desde:");

var input8 = new AW.UI.Input;
input8.setId("input8");
input8.setControlText("");
//--

var button12 = new AW.UI.Button;
button12.setId("button12");
button12.setControlText("Aceptar");
document.write(button12);

var button13 = new AW.UI.Button;
button13.setId("button13");
button13.setControlText("Cancelar");
document.write(button13);

var button14 = new AW.UI.Button;
button14.setId("button14");
button14.setControlText("Aplicar");
document.write(button14);

// -----------------------------------------------------------------------------------------------

var group3 = new AW.UI.Group;
group3.setId("group3");
group3.setControlText("Perfiles");

// -----------------------------------------------------------------------------------------------


var group4 = new AW.UI.Group;
group4.setId("group4");
group4.setControlText("Generales");



var page1 = [group1, label1, label2, label3, input1, label4, input2, label5, input3, input4, group2, obj, obj1, label6, input5, label7,input6, label8, input7, label9, input8, button7];

var page2 = [group3];

var page3 = [group4];

var pages = [page1,page2,page3];

container.element().innerHTML = page1.join("");

tabs.onCurrentItemChanged = function(i) {

container.element().innerHTML = pages[i].join("");

if (container.$browser=="opera"){document.body.className += ""}
}


</script>
<span id="roles"></span><br />
<span id="myLabel"></span>
<script>
var myData = [
[1, "Rol"],
[2, "Rol2"],
[3, "Rol3"],
[4, "Rol4"],
[5, "Rol5"],
[6, "Rol6"],
[7, "Rol7"],
[8, "Rol8"],
[9, "Rol9"],
[10, "Rol10"] // no comma in the last line

];

var Encabezados = ["Num.", "Roles"];


var grid = new AW.UI.Grid;
grid.setId("roles");
grid.setHeaderText(Encabezados);
grid.setCellData(myData);
grid.setColumnCount(2);
grid.setRowCount(10);
grid.setSelectionMode("multi-row-marker"); // set selection mode to multiple rows with checkboxes
grid.refresh();

var label = new AW.UI.Label;
label.setId("myLabel");
label.refresh();

enable row selectors;
grid.setSelectorVisible(false);
grid.setSelectorText(function(i){return this.getRowPosition(i)+1});
grid.setSelectorWidth(25);
windows.state(false);

grid.onSelectedRowsChanged = function(rowIndicesArray){
label.setControlText("rows: [" + rowIndicesArray + "]");
}

</script>

</body>
</html>
CBT
Monday, September 3, 2007
CBT, Your sample just need a small remake.

- Erase the line -- grid.refresh();
- Move this 'block' to the end of the script --
(pls note I include the var 'grid' into var 'page1')
var page1 = [group1, label1, label2, label3, input1, label4, input2, label5, input3, input4, group2, obj, grid, obj1, label6, input5, label7,input6, label8, input7, label9, input8, button7];
var page2 = [group3];
var page3 = [group4];
var pages = [page1,page2,page3];
container.element().innerHTML = page1.join("");
tabs.onCurrentItemChanged = function(i) {
container.element().innerHTML = pages[i].join("");
if (container.$browser=="opera"){document.body.className += ""}
}

And that's All, now the grid is shown/hiden on tabs selection.
HTH
Carlos
Monday, September 3, 2007
Thanks for the help and sorry for bother, but, i did what you indicate, and doen't work, perhaps, what i miss is the fact that there are two scripts.

what you proposes is make just one script?

Thanks for the help again
CBT
Monday, September 3, 2007
You can also do it in one script and remove the html spans as you said.
Here is what I do ( to compare it with the original)
Note: I commented the line : //windows.state(false);
and removed:
<link href="mini.css" rel="stylesheet">

<html>
<head>
<title>Seguridad Medusa</title>
<link href="runtime/styles/mono/aw.css" rel="stylesheet"></link>
<script src="runtime/lib/aw.js"></script>
<style>
.aw-system-control {position: absolute}

#box {left: 0px; top: 0px; width: 398px; height: 432px; border: 1px solid #999; background: #ece9d8; position: absolute;}
#tabs {left: 6px; top: 6px; width: 386px; height: 22px;}
#frame {left: 6px; top: 28px; width: 386px; height: 365px; border: 1px solid #999; background: #f9f8f4; position: absolute;}
/* -------------------------------------------------------------------- */
#group1 {left: 21px; top: 40px; width: 357px; height: 338px;}
#label1 {left: 70px; top: 60px; width: 300px; height: 16px;}
#label2 {left: 35px; top: 63px; width: 30px; height: 16px;}
#label3 {left: 71px; top: 90px; width: 50px; height: 16px;}
#input1 {left: 135px; top: 89px; width: 100px; height: 20px;}
#label4 {left: 71px; top: 120px; width: 50px; height: 16px;}
#input2 {left: 135px; top: 119px; width: 230px; height: 20px;}
#label5 {left: 71px; top: 150px; width: 50px; height: 16px;}
#input3 {left: 135px; top: 149px; width: 100px; height: 16px;}
#input4 {left: 250px; top: 149px; width: 100px; height: 16px;}
#group2 {left: 31px; top: 170px; width: 337px; height: 137px;}
#roles {left: 41px; top: 190px; width: 227px; height: 107px;}
#label6 {left: 71px; top: 315px; width: 100px; height: 16px;}
#label7 {left: 71px; top: 335px; width: 100px; height: 16px;}
#input6 {left: 253px; top: 335px; width: 70px; height: 16px;}
#label8 {left: 71px; top: 355px; width: 100px; height: 16px;}
#label9 {left: 240px; top: 355px; width: 100px; height: 16px;}
#input8 {left: 287px; top: 354px; width: 70px; height: 16px;}
/* -------------------------------------------------------------------- */
#group3 {left: 21px; top: 40px; width: 357px; height: 338px;}
/* -------------------------------------------------------------------- */
#group4 {left: 21px; top: 40px; width: 357px; height: 338px;}
#label10 {left: 71px; top: 90px; width: 50px; height: 16px;}
#label11 {left: 71px; top: 120px; width: 50px; height: 16px;}
#input10 {left: 210px; top: 120px; width: 25px; height: 16px;}
#label12 {left: 71px; top: 150px; width: 50px; height: 16px;}
#label13 {left: 71px; top: 180px; width: 50px; height: 16px;}
#label14 {left: 71px; top: 210px; width: 50px; height: 16px;}
#label15 {left: 223px; top: 210px; width: 50px; height: 16px;}
#input14 {left: 263px; top: 211px; width: 30px; height: 16px;}
#label16 {left: 300px; top: 210px; width: 50px; height: 16px;}
#label17 {left: 71px; top: 240px; width: 50px; height: 16px;}
#label18 {left: 235px; top: 240px; width: 50px; height: 16px;}
#input16 {left: 275px; top: 240px; width: 20px; height: 16px;}
#label19 {left: 303px; top: 240px; width: 50px; height: 16px;}
#label20 {left: 71px; top: 270px; width: 50px; height: 16px;}
#input17 {left: 251px; top: 271px; width: 25px; height: 16px;}
#label21 {left: 71px; top: 300px; width: 50px; height: 16px;}
#input18 {left: 204px; top: 301px; width: 75px; height: 16px;}
#label22 {left: 71px; top: 330px; width: 50px; height: 16px;}
#input19 {left: 294px; top: 331px; width: 30px; height: 16px;}
#label23 {left: 330px; top: 330px; width: 50px; height: 16px;}

/* -------------------------------------------------------------------- */
</style>
</head>
<body>
<script>

var box = new AW.HTML.DIV;
box.setId("box");
document.write(box);

var tabs = new AW.UI.Tabs;
tabs.setId("tabs");
tabs.setItemText(["Usuarios", "Perfiles", "Generales"]);
//tabs.setItemImage(["user", "alert", "favorites", "settings"]);
tabs.setItemCount(3);
tabs.setSelectedItems([0]);
document.write(tabs);

var frame = new AW.HTML.DIV;
frame.setId("frame");
document.write(frame);

var container = new AW.HTML.SPAN;
document.write(container);

//--

var group1 = new AW.UI.Group;
group1.setId("group1");
group1.setControlText("Datos del Usuario");

var label1 = new AW.UI.Label;
label1.setId("label1");
label1.setControlText("Por favor capture o modifique los datos del usuario");

var label2 = new AW.UI.Label;
label2.setId("label2");
label2.setControlImage("user");

//--

var label3 = new AW.UI.Label;
label3.setId("label3");
label3.setControlText("UserId:");

var input1 = new AW.UI.Input;
input1.setId("input1");
input1.setControlText("Capture UserId");

//--

var label4 = new AW.UI.Label;
label4.setId("label4");
label4.setControlText("Nombre:");

var input2 = new AW.UI.Input;
input2.setId("input2");
input2.setControlText("Nombre del Usuario");

//--

var label5 = new AW.UI.Label;
label5.setId("label5");
label5.setControlText("Password:");

var input3 = new AW.UI.Input;
input3.setId("input3");
input3.getContent('box/text').setAttribute('type', 'password');

var input4 = new AW.UI.Input;
input4.setId("input4");
input4.getContent('box/text').setAttribute('type', 'password');

//--

//--

var group2 = new AW.UI.Group;
group2.setId("group2");
group2.setControlText("Roles");

var obj = new AW.HTML.SPAN;
obj.setId("roles");
//document.write(obj);

var obj1 = new AW.HTML.SPAN;
obj.setId("myLabel");
//document.write(obj1);


var button7 = new AW.UI.Button;
button7.setId("button7");
button7.setControlText("Editar Perfil");

//--

var label6 = new AW.UI.Label;
label6.setId("label6");
label6.setControlText("Propiedades de Administracion:");

var input5 = new AW.UI.CheckBox;
input5.setId("checkbox");
input5.setControlText("");
input5.setControlValue(false);
input5.setPosition(249, 312);

var label7 = new AW.UI.Label;
label7.setId("label7");
label7.setControlText("Fecha de creación de usuario:");

var input6 = new AW.UI.Input;
input6.setId("input6");
input6.setControlText("");

var label8 = new AW.UI.Label;
label8.setId("label8");
label8.setControlText("El usuario esta bloqueado:");

var input7 = new AW.UI.CheckBox;
input7.setId("checkbox1");
input7.setControlText("");
input7.setControlValue(false);
input7.setPosition(218, 352);

var label9 = new AW.UI.Label;
label9.setId("label9");
label9.setControlText("desde:");

var input8 = new AW.UI.Input;
input8.setId("input8");
input8.setControlText("");
//--

var button12 = new AW.UI.Button;
button12.setId("button12");
button12.setControlText("Aceptar");
document.write(button12);

var button13 = new AW.UI.Button;
button13.setId("button13");
button13.setControlText("Cancelar");
document.write(button13);

var button14 = new AW.UI.Button;
button14.setId("button14");
button14.setControlText("Aplicar");
document.write(button14);

// -----------------------------------------------------------------------------------------------

var group3 = new AW.UI.Group;
group3.setId("group3");
group3.setControlText("Perfiles");

// -----------------------------------------------------------------------------------------------

var group4 = new AW.UI.Group;
group4.setId("group4");
group4.setControlText("Generales");

var myData = [
[1, "Rol"],
[2, "Rol2"],
[3, "Rol3"],
[4, "Rol4"],
[5, "Rol5"],
[6, "Rol6"],
[7, "Rol7"],
[8, "Rol8"],
[9, "Rol9"],
[10, "Rol10"] // no comma in the last line

];

var Encabezados = ["Num.", "Roles"];

var grid = new AW.UI.Grid;
grid.setId("roles");
grid.setHeaderText(Encabezados);
grid.setCellData(myData);
grid.setColumnCount(2);
grid.setRowCount(10);
grid.setSelectionMode("multi-row-marker"); // set selection mode to multiple rows with checkboxes
//grid.refresh();

var label = new AW.UI.Label;
label.setId("myLabel");
label.refresh();

//enable row selectors;
grid.setSelectorVisible(false);
grid.setSelectorText(function(i){return this.getRowPosition(i)+1});
grid.setSelectorWidth(25);
//windows.state(false);

grid.onSelectedRowsChanged = function(rowIndicesArray){
label.setControlText("rows: [" + rowIndicesArray + "]");
}

var page1 = [group1, label1, label2, label3, input1, label4, input2, label5, input3, input4, group2, obj, grid, obj1, label6, input5, label7,input6, label8, input7, label9, input8, button7];
var page2 = [group3];
var page3 = [group4];
var pages = [page1,page2,page3];
container.element().innerHTML = page1.join("");
tabs.onCurrentItemChanged = function(i) {
container.element().innerHTML = pages[i].join("");
if (container.$browser=="opera"){document.body.className += ""}
}

</script>
</body>
</html>
Carlos
Monday, September 3, 2007
Thank you very much, there was a couple of little details that I was wrinting without need it, now i see it.

Thans you very much again
CBT
Monday, September 3, 2007

This topic is archived.


Back to support forum

Forum search