3.2.0
Forum Demo Guide API Store

Grid on AW.UI.Tabs

I've followed the AW.UI.Tabs example and was able to put varies AW controls on different tabs. But when a grid was put on a tab, the grid shows on every tab. How can I attach the grid to a single tab?

Thank you.
wkim
May 27,
Here is the modified dialog.htm from "examples/new". Should work. 

<html>
<head>
<title>ActiveWidgets Examples</title>
<link href="../../runtime/styles/xp/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: 362px; border: 1px solid #999; background: #f9f8f4; position: absolute;}

    #group1  {left:  21px; top:  40px; width: 357px; height: 100px;}
    #label1	 {left:  70px; top:  60px; width: 300px; height:  16px;}
    #label2	 {left:  35px; top:  63px; width:  30px; height:  16px;}
    #label3	 {left:  71px; top:  82px; width:  50px; height:  16px;}
    #input1	 {left: 135px; top:  81px; width: 230px; height:  20px;}
    #button1 {left: 112px; top: 108px; width:  82px;}
    #button2 {left: 198px; top: 108px; width:  82px;}
    #button3 {left: 284px; top: 108px; width:  82px;}

    #group2  {left:  21px; top: 150px; width: 357px; height:  86px;}
    #label4	 {left:  70px; top: 167px; width: 310px; height:  28px;}
    #label5	 {left:  35px; top: 170px; width:  30px; height:  16px;}
    #button4 {left:  95px; top: 204px; width:  95px;}
    #button5 {left: 198px; top: 204px; width:  82px;}
    #button6 {left: 284px; top: 204px; width:  82px;}

    #group3  {left:  21px; top: 247px; width: 357px; height:  95px;}
    #label6	 {left:  70px; top: 265px; width: 310px; height:  28px;}
    #label7	 {left:  35px; top: 268px; width:  30px; height:  16px;}
    #label8	 {left:  71px; top: 305px; width: 150px; height:  16px;}
    #input2	 {left: 240px; top: 304px; width:  39px; height:  20px;}
    #button7 {left: 284px; top: 302px; width:  82px;}

    #button8 {left:  20px; top: 350px; width:  85px;}
    #button9 {left: 111px; top: 350px; width:  85px;}
    #button10{left: 202px; top: 350px; width:  85px;}
    #button11{left: 293px; top: 350px; width:  85px;}

    #button12{left: 154px; top: 400px; width:  75px;}
    #button13{left: 236px; top: 400px; width:  75px;}
    #button14{left: 318px; top: 400px; width:  75px;}

    #label9	 {left:  70px; top:  60px; width: 300px; 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(["General", "Security", "Privacy", "Content", "Connections", "Programs", "Advanced"]);
    tabs.setItemCount(7);
    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("Home page");

    var label1 = new AW.UI.Label;
    label1.setId("label1");
    label1.setControlText("You can change which page to use for your home page.");

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

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

    var input1 = new AW.UI.Input;
    input1.setId("input1");
    input1.setControlText("http://www.google.com/");

    var button1 = new AW.UI.Button;
    button1.setId("button1");
    button1.setControlText("Use Current");

    var button2 = new AW.UI.Button;
    button2.setId("button2");
    button2.setControlText("Use Default");

    var button3 = new AW.UI.Button;
    button3.setId("button3");
    button3.setControlText("Use Blank");

//	---

    var group2 = new AW.UI.Group;
    group2.setId("group2");
    group2.setControlText("Temporary Internet Files");

    var label4 = new AW.UI.Label;
    label4.setId("label4");
    label4.setControlText("Pages you view on the Internet are stored in a special folder for quick viewing later.");
    label4.setClass("text", "wrap");

    var label5 = new AW.UI.Label;
    label5.setId("label5");
    label5.setControlImage("favorites");

    var button4 = new AW.UI.Button;
    button4.setId("button4");
    button4.setControlText("Delete Cookies&hellip;");

    var button5 = new AW.UI.Button;
    button5.setId("button5");
    button5.setControlText("Delete Files&hellip;");

    var button6 = new AW.UI.Button;
    button6.setId("button6");
    button6.setControlText("Settings&hellip;");

//	---

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

    var label6 = new AW.UI.Label;
    label6.setId("label6");
    label6.setControlText("The History folder contains links to pages you've visited, for quick access to recently viewed pages.");
    label6.setClass("text", "wrap");

    var label7 = new AW.UI.Label;
    label7.setId("label7");
    label7.setControlImage("search");

    var label8 = new AW.UI.Label;
    label8.setId("label8");
    label8.setControlText("Days to keep pages in history:");

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

    var button7 = new AW.UI.Button;
    button7.setId("button7");
    button7.setControlText("Clear History");

//	---

    var button8 = new AW.UI.Button;
    button8.setId("button8");
    button8.setControlText("Colors&hellip;");

    var button9 = new AW.UI.Button;
    button9.setId("button9");
    button9.setControlText("Fonts&hellip;");

    var button10 = new AW.UI.Button;
    button10.setId("button10");
    button10.setControlText("Languages&hellip;");

    var button11 = new AW.UI.Button;
    button11.setId("button11");
    button11.setControlText("Accessibility&hellip;");

//	---


    var label9 = new AW.UI.Label;
    label9.setId("label9");
    label9.setControlText("Other pages not yet implemented");
    label9.setControlImage("favorites");

//	---


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

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

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

//	---

    button1.onClick = function(){
        input1.setControlText("http://www.activewidgets.com/");
    }

    button2.onClick = function(){
        input1.setControlText("http://www.google.com/");
    }

    button3.onClick = function(){
        input1.setControlText("");
    }

    button4.onClick = function(){
        alert("Not implemented");
    }

    button5.onClick = function(){
        alert("Not implemented");
    }

    button6.onClick = function(){
        alert("Not implemented");
    }

//	---

    var page1 = [group1, label1, label2, label3, input1, button1, button2, button3,
                 group2, label4, label5, button4, button5, button6,
                 group3, label6, label7, label8, input2, button7,
                 button8, button9, button10, button11];

    var grid = new AW.UI.Grid;
    grid.setSize(350, 300);
    grid.setPosition(20, 50);
    grid.setCellText("cell");
    grid.setHeaderText("header");
    grid.setColumnCount(10);
    grid.setRowCount(10);
    grid.setCellEditable(true);
    grid.getSeparatorTemplate().setEvent("ondblclick", function(event){
        this.raiseEvent("onSeparatorDoubleClicked", event, this.$0);
    });


    grid.onSeparatorDoubleClicked = function(event, column){
        alert(column);
    };

    var page2 = [grid];

    var page3 = ["not implemented"];

    var pages = [page1, page2, page3, page3, page3, page3, 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>
mono
May 30,
Thank you mono. I will give a try.
wkim
May 30,
I just had a follow-up question on this. How can i get the grid to load from an XML file instead of entering values manually. Also, are there other ways of populating the grid? For instance, directly from the database via a query?
Thanks
Pratik
June 26,
U can use XML, CSV, TXT, JS etc...
look in your /examples folder (activewidgets root folder).
Paulo Cesar Silva Reis (PC from Brazil).
June 26,
ok, so i just had a look at that folder and all the examples presented there
but do i have to use Active.XML.Table if i want to use XML import or is there a way to use Active.Controls.Grid
the grids are just way more fancy looking than the tables
and also, is there documentation on these controls?
like i wanna know what properties i can set for the table/grids
thanks paulo
Pratik
June 26,
actually sorry bout that....i have to use grid no matter what...just that when i use Active.XML.Table, the table looks pretty bad...is there a way out of that?
Pratik
June 26,
can i see ur code? its more easy to help.
Paulo Cesar Silva Reis (PC from Brazil).
June 26,
alright...so the code is the almost the same as above...except that this is the change that i am making in the end 

<!--
 var grid = new AW.UI.Grid;
    grid.setSize(350, 300);
    grid.setPosition(20, 50);
    grid.setCellText('grid.xml');
    grid.setHeaderText(["Source System","Customer Name","Request Number","Offer-Oppty ID","Term", "Commitment","Create Date","eSign Receive Timestamp"]);
    grid.setColumnCount(8);
    grid.setRowCount(10);
    grid.setCellEditable(true);
    grid.getSeparatorTemplate().setEvent("ondblclick", function(event){
        this.raiseEvent("onSeparatorDoubleClicked", event, this.$0);
    });

    grid.onSeparatorDoubleClicked = function(event, column){
        alert(column);
    };
 -->
 
 	var table = new Active.XML.Table;
    table.setURL("grid.xml");
    table.request();
    var columns = ["Source System","Customer Name","Request Number","Offer-Oppty ID","Term", "Commitment","Create Date","eSign Receive Timestamp"];
    var obj = new Active.Controls.Grid;
    obj.setColumnProperty("texts", columns);
    obj.setDataModel(table);
    document.write(obj);

    var page1 = [table];

    var page2 = [grid];

    var page3 = [grid];


the commented part is the one that is there above and the table which i am replacing the original grid with is below that.
so supposing there is some grid.xml is my root folder, i want that to display on my first tab (when that works, i have 2 more xml files which i need on the next 2 tabs)
moreover, it should behave like a normal grid, for instance sorting, adjusting length
plus, i really need to know properties that i can set, like double click events and cells shouldn't be able to be changed
(and the fancier it is, the better; however, that can be taken care of after functionality)
if there is anyway that u cud all these questoins, that wud be just great
i have been breaking my head over this for days...already tried so many different ways
thanks a lot for all the help paulo
Pratik
June 26,
Also, i will be using this tab on an official website so i dont think i can use it wihtout purchasing the license, can i?
if i cant, is there any other website where i can find tabs and be able to incorporate grids into them?
Pratik
June 26,
ok, sry the delay, i made a example for u. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<script src="../runtime/lib/aw.js"></script>
<link href="../runtime/styles/xp/aw.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
    .aw-container-normal { width:200px; }
    .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: 362px; border: 1px solid #999; background: #f9f8f4; position: absolute;}

    #group1  {left:  21px; top:  40px; width: 357px; height: 100px;}
    #label1	 {left:  70px; top:  60px; width: 300px; height:  16px;}
    #label2	 {left:  35px; top:  63px; width:  30px; height:  16px;}
    #label3	 {left:  71px; top:  82px; width:  50px; height:  16px;}
    #input1	 {left: 135px; top:  81px; width: 230px; height:  20px;}
    #button1 {left: 112px; top: 108px; width:  82px;}
    #button2 {left: 198px; top: 108px; width:  82px;}
    #button3 {left: 284px; top: 108px; width:  82px;}

    #group2  {left:  21px; top: 150px; width: 357px; height:  86px;}
    #label4	 {left:  70px; top: 167px; width: 310px; height:  28px;}
    #label5	 {left:  35px; top: 170px; width:  30px; height:  16px;}
    #button4 {left:  95px; top: 204px; width:  95px;}
    #button5 {left: 198px; top: 204px; width:  82px;}
    #button6 {left: 284px; top: 204px; width:  82px;}

    #group3  {left:  21px; top: 247px; width: 357px; height:  95px;}
    #label6	 {left:  70px; top: 265px; width: 310px; height:  28px;}
    #label7	 {left:  35px; top: 268px; width:  30px; height:  16px;}
    #label8	 {left:  71px; top: 305px; width: 150px; height:  16px;}
    #input2	 {left: 240px; top: 304px; width:  39px; height:  20px;}
    #button7 {left: 284px; top: 302px; width:  82px;}

    #button8 {left:  20px; top: 350px; width:  85px;}
    #button9 {left: 111px; top: 350px; width:  85px;}
    #button10{left: 202px; top: 350px; width:  85px;}
    #button11{left: 293px; top: 350px; width:  85px;}

    #button12{left: 154px; top: 400px; width:  75px;}
    #button13{left: 236px; top: 400px; width:  75px;}
    #button14{left: 318px; top: 400px; width:  75px;}

    #label9	 {left:  70px; top:  60px; width: 300px; height:  16px;}

</style>
</head>

<body>
<script>
var div = new AW.HTML.DIV;
div.setId("box");
document.write(div);
var tab = new AW.UI.Tabs;
tab.setId("tabs");
tab.setItemText(["Stuffs", "GRID"]);
tab.setItemCount(2);
tab.setSelectedItems([1]);
document.write(tab);

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("Home page");

var label1 = new AW.UI.Label;
label1.setId("label1");
label1.setControlText("You can change which page to use for your home page.");

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

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

var input1 = new AW.UI.Input;
input1.setId("input1");
input1.setControlText("http://www.google.com/");

var button1 = new AW.UI.Button;
button1.setId("button1");
button1.setControlText("Use Current");

var button2 = new AW.UI.Button;
button2.setId("button2");
button2.setControlText("Use Default");

var button3 = new AW.UI.Button;
button3.setId("button3");
button3.setControlText("Use Blank");

//	---

var group2 = new AW.UI.Group;
group2.setId("group2");
group2.setControlText("Temporary Internet Files");

var label4 = new AW.UI.Label;
label4.setId("label4");
label4.setControlText("Pages you view on the Internet are stored in a special folder for quick viewing later.");
label4.setClass("text", "wrap");

var label5 = new AW.UI.Label;
label5.setId("label5");
label5.setControlImage("favorites");

var button4 = new AW.UI.Button;
button4.setId("button4");
button4.setControlText("Delete Cookies&hellip;");

var button5 = new AW.UI.Button;
button5.setId("button5");
button5.setControlText("Delete Files&hellip;");

var button6 = new AW.UI.Button;
button6.setId("button6");
button6.setControlText("Settings&hellip;");

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

var label6 = new AW.UI.Label;
label6.setId("label6");
label6.setControlText("The History folder contains links to pages you've visited, for quick access to recently viewed pages.");
label6.setClass("text", "wrap");

var label7 = new AW.UI.Label;
label7.setId("label7");
label7.setControlImage("search");

var label8 = new AW.UI.Label;
label8.setId("label8");
label8.setControlText("Days to keep pages in history:");

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

var button7 = new AW.UI.Button;
button7.setId("button7");
button7.setControlText("Clear History");

var button8 = new AW.UI.Button;
button8.setId("button8");
button8.setControlText("Colors&hellip;");

var button9 = new AW.UI.Button;
button9.setId("button9");
button9.setControlText("Fonts&hellip;");

var button10 = new AW.UI.Button;
button10.setId("button10");
button10.setControlText("Languages&hellip;");

var button11 = new AW.UI.Button;
button11.setId("button11");
button11.setControlText("Accessibility&hellip;");

// GRID MODEL
var table = new AW.XML.Table;

//	provide data URL
table.setURL("../examples/data/companies-simple.xml");

//	start asyncronous data retrieval
table.request();

// GRID UI
//	create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
//	define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

obj.setColumnCount(5);

//	provide column labels
obj.setHeaderText(columns);

//	enable row selectors
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)});
obj.setSelectorWidth(25);
obj.setSize(380, 330)

//	set row selection
obj.setSelectionMode("single-row");

//	define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;

obj.setCellFormat([str, str, num, num, num]);

//	provide external model as a grid data source
obj.setCellModel(table);

var page1 = [group1, label1, label2, label3, input1, button1, button2, button3,
             group2, label4, label5, button4, button5, button6,
             group3, label6, label7, label8, input2, button7,
             button8, button9, button10, button11];
var page2 = ["<br>", "<br>", obj];			 
var pages = [page1, page2];
container.element().innerHTML = page2.join("");

tab.onCurrentItemChanged = function(i) {
    container.element().innerHTML = pages[i].join("");

    if (container.$browser=="opera"){document.body.className += ""}
}
</script>
</body>
</html>

Using version 2.0.1, hope this help.
cya.
June 27,
ops, forgot my signature :)
Paulo Cesar Silva Reis (PC from Brazil).
June 27,
thanks loads dude....really appreciate the help
Pratik
June 27,

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)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
Correct way to update table model in Extended Grid Curt K. (19)
problem with grid in a AW.UI.Tabs Rodrigo (9)
Example - saving editable grid data to the server Alex (ActiveWidgets) (18)
How do you add an image to the first column in a grid? L. Aragon (17)

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