3.2.0
Forum Demo Guide API Store

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
August 31,
Check the example code in examples/controls - tabs/ directory.
Alex (ActiveWidgets)
September 3,
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
September 3,
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
September 3,
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
September 3,
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
September 3,
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
September 3,

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)
Search Grid Column For Match Joe (45)
Grid in Grid - Inner grid lacks scroolbars Diego Vilar (13)
2.0 - I need a Grid inside a Grid Rob Francis (17)
Refresh Grid joe (27)
tabbing from cell to cell Josh (22)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
AW.Input control in a grid header row - problem in FF Will (11)
Problem with scrolling when grid's width and height is set in percentage Andrew (9)
problem with grid in a AW.UI.Tabs Rodrigo (9)

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