How to set up radio button group in a Grid AW2.0.1
Hi
I wanted to create a AW grid with radio buttons in each row first column.When I click on a radio button, the button is not selected and if I sort the radio button column , then the button which I clicked, shows selected.
Please suggest me the better workaround for the same
Thanks
Vikramaditya Garg
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
<!-- grid format -->
<style>
.aw-grid-control {height: 100%; width: 100%; margin: 0px; border: none; font: menu;}
.aw-row-selector {text-align: center}
.aw-column-0 {width: 80px;}
.aw-column-1 {width: 200px;}
.aw-column-2 {text-align: right;}
.aw-column-3 {text-align: right;}
.aw-column-4 {text-align: right;}
.aw-grid-cell {border-right: 1px solid threedlightshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
<!-- grid data -->
<script>
var myData = [
["","MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["","ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["","SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["","CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["","ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["","SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["","VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["","SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["","INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["","INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["","ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["","PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["","SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["","BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["","SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["","CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["","MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["","DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["","CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["","KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = ["",
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<script>
// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
obj.setCellFormat([str, str, num, num, num]);
// provide cells and headers text
obj.setCellText(myData);
obj.setHeaderText(myColumns);
// set number of rows/columns
obj.setRowCount(20);
obj.setColumnCount(6);
obj.setCellTemplate(new AW.Templates.Radio, 0);
obj.setCellValue(true, 0, 0);
// enable row selectors
// set headers width/height
obj.setSelectorWidth(28);
obj.setHeaderHeight(20);
// set row selection
obj.setSelectionMode("single-row");
//obj.setSelectedRow(0);
// set click action handler
obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};
// write grid html to the page
document.write(obj);
</script>
</body>
</html>
I wanted to create a AW grid with radio buttons in each row first column.When I click on a radio button, the button is not selected and if I sort the radio button column , then the button which I clicked, shows selected.
Please suggest me the better workaround for the same
Thanks
Vikramaditya Garg
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
<!-- grid format -->
<style>
.aw-grid-control {height: 100%; width: 100%; margin: 0px; border: none; font: menu;}
.aw-row-selector {text-align: center}
.aw-column-0 {width: 80px;}
.aw-column-1 {width: 200px;}
.aw-column-2 {text-align: right;}
.aw-column-3 {text-align: right;}
.aw-column-4 {text-align: right;}
.aw-grid-cell {border-right: 1px solid threedlightshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
<!-- grid data -->
<script>
var myData = [
["","MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["","ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["","SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["","CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["","ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["","SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["","VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["","SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["","INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["","INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["","ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["","PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["","SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["","BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["","SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["","CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["","MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["","DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["","CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["","KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = ["",
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<script>
// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
obj.setCellFormat([str, str, num, num, num]);
// provide cells and headers text
obj.setCellText(myData);
obj.setHeaderText(myColumns);
// set number of rows/columns
obj.setRowCount(20);
obj.setColumnCount(6);
obj.setCellTemplate(new AW.Templates.Radio, 0);
obj.setCellValue(true, 0, 0);
// enable row selectors
// set headers width/height
obj.setSelectorWidth(28);
obj.setHeaderHeight(20);
// set row selection
obj.setSelectionMode("single-row");
//obj.setSelectedRow(0);
// set click action handler
obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};
// write grid html to the page
document.write(obj);
</script>
</body>
</html>
Vikramaditya Garg
December 4,