Saving grid back to xml file.
Hi,
I'm just experimenting with Active Widgets, so apologies it thi is a stupid question!
I have an xml file that I want to display in a grid, make the cells editable, and have any edits sent back to the xml file.
I have modified one of the example to get the grid editable but I cannot work out how I send the user edits back to the xml file.
I am not sure whether the xml file is truly 'bound' to the grid and this should be automatic, or whether I need to code it.
Any help appreciated.
Thanks
Wayne
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ActiveWidgets Examples</title>
<!-- fix box model in firefox/safari/opera -->
<style type="text/css">
.aw-quirks * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {font: 12px Tahoma}
</style>
<!-- include links to the script and stylesheet files -->
<script src="runtime/lib/aw.js" type="text/javascript"></script>
<link href="runtime/styles/system/aw.css" rel="stylesheet">
<!-- change default styles, set control size and position -->
<style type="text/css">
#myGrid {height: 200px; width: 500px;}
#myGrid .aw-row-selector {text-align: center}
#myGrid .aw-column-0 {width: 80px;}
#myGrid .aw-column-1 {width: 200px;}
#myGrid .aw-column-2 {text-align: right;}
#myGrid .aw-column-3 {text-align: right;}
#myGrid .aw-column-4 {text-align: right;}
#myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}
/* box model fix for strict doctypes, safari */
.aw-strict #myGrid .aw-grid-cell {padding-right: 3px;}
.aw-strict #myGrid .aw-grid-row {padding-bottom: 3px;}
</style>
</head>
<body>
<script type="text/javascript">
// create data formats
var string = new AW.Formats.String;
var number1 = new AW.Formats.Number;
var number2 = new AW.Formats.Number;
var date = new AW.Formats.Date;
// define formatting rule for text output
number1.setTextFormat("#,###.##");
number2.setTextFormat("");
date.setTextFormat("dd mmm yy");
date.setDataFormat("ISO8601");
// create ActiveWidgets data model - XML-based table
var table = new AW.XML.Table;
// provide data URL
table.setURL("dataset.xml");
// set rows XPath
table.setRows("//NewDataSet/*");
// set columns XPath
table.setColumns(["ticker", "name", "mktcap", "sales", "employees", "timestamp"]);
// start asynchronous data retrieval
table.request();
// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees", "Date"];
// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
// assign unique id for the grid element
obj.setId("myGrid");
// set number of columns
obj.setColumnCount(6);
// provide column labels
obj.setHeaderText(columns);
// enable row selectors
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)});
obj.setSelectorWidth(25);
// set row selection
// obj.setSelectionMode("single-row");
// set column formatting
obj.setCellFormat([string, string, number1, number1, number2, date]);
// provide external model as a grid data source
obj.setCellModel(table);
//obj.setModel("data", table); //--
obj.setDataText = function(value, i, j){table[i][j] = value};
obj.setCellEditable(true);
// write grid html to the page
document.write(obj);
</script>
</body>
</html>
I'm just experimenting with Active Widgets, so apologies it thi is a stupid question!
I have an xml file that I want to display in a grid, make the cells editable, and have any edits sent back to the xml file.
I have modified one of the example to get the grid editable but I cannot work out how I send the user edits back to the xml file.
I am not sure whether the xml file is truly 'bound' to the grid and this should be automatic, or whether I need to code it.
Any help appreciated.
Thanks
Wayne
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ActiveWidgets Examples</title>
<!-- fix box model in firefox/safari/opera -->
<style type="text/css">
.aw-quirks * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {font: 12px Tahoma}
</style>
<!-- include links to the script and stylesheet files -->
<script src="runtime/lib/aw.js" type="text/javascript"></script>
<link href="runtime/styles/system/aw.css" rel="stylesheet">
<!-- change default styles, set control size and position -->
<style type="text/css">
#myGrid {height: 200px; width: 500px;}
#myGrid .aw-row-selector {text-align: center}
#myGrid .aw-column-0 {width: 80px;}
#myGrid .aw-column-1 {width: 200px;}
#myGrid .aw-column-2 {text-align: right;}
#myGrid .aw-column-3 {text-align: right;}
#myGrid .aw-column-4 {text-align: right;}
#myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}
/* box model fix for strict doctypes, safari */
.aw-strict #myGrid .aw-grid-cell {padding-right: 3px;}
.aw-strict #myGrid .aw-grid-row {padding-bottom: 3px;}
</style>
</head>
<body>
<script type="text/javascript">
// create data formats
var string = new AW.Formats.String;
var number1 = new AW.Formats.Number;
var number2 = new AW.Formats.Number;
var date = new AW.Formats.Date;
// define formatting rule for text output
number1.setTextFormat("#,###.##");
number2.setTextFormat("");
date.setTextFormat("dd mmm yy");
date.setDataFormat("ISO8601");
// create ActiveWidgets data model - XML-based table
var table = new AW.XML.Table;
// provide data URL
table.setURL("dataset.xml");
// set rows XPath
table.setRows("//NewDataSet/*");
// set columns XPath
table.setColumns(["ticker", "name", "mktcap", "sales", "employees", "timestamp"]);
// start asynchronous data retrieval
table.request();
// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees", "Date"];
// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
// assign unique id for the grid element
obj.setId("myGrid");
// set number of columns
obj.setColumnCount(6);
// provide column labels
obj.setHeaderText(columns);
// enable row selectors
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)});
obj.setSelectorWidth(25);
// set row selection
// obj.setSelectionMode("single-row");
// set column formatting
obj.setCellFormat([string, string, number1, number1, number2, date]);
// provide external model as a grid data source
obj.setCellModel(table);
//obj.setModel("data", table); //--
obj.setDataText = function(value, i, j){table[i][j] = value};
obj.setCellEditable(true);
// write grid html to the page
document.write(obj);
</script>
</body>
</html>
August 30,