ActiveWidgets • Grid on AW.UI.Tabs

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>

Thank you mono. I will give a try.

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

U can use XML, CSV, TXT, JS etc...
look in your /examples folder (activewidgets root folder).

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

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?

can i see ur code? its more easy to help.

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

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?

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.

Grid on AW.UI.Tabs

Forum search