:: Forum >> Version 2 >>
Adding new row from within the data
Hi All,
I am trying to add a new row without using a button. I would like to add a floating or fixed footer row to the data that the user can click in and add text.
My attempts at the moment have led me to use a footer fixed at the bottom (not ideal) but I will need to be able to make this editable.
Any ideas would be appreciated.
Thanks.
BTW: I will post the full code when done.
Alex from Sydney
Wednesday, January 4, 2006
Carlos
Wednesday, January 4, 2006
Are you using a JS array?
If so, have you tried adding an extra array element that has empty data and is editable?
Tony
Wednesday, January 4, 2006
Carlos
Wednesday, January 4, 2006
Yeah Carlos,
This looks like great exemples... will you publish those as for v1, which was already very useful to me!!!
Luke
Luke
Thursday, January 5, 2006
thanks carlos,
Your examples helped quite abit. Here is the resulting code.
Hope it helps everyone. Its an example of adding deleting and change row data from a CSV source.
Please let me know if I can refine the code in anyway. ( i added a few comments to give you an idea of my thoughts).
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
#myGrid { width: 600px; margin: 0px; padding: 0px}
#myGrid .aw-grid-row {height: 16px; border-bottom: 1px solid #C6C6C6; }
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-cells-selected {background: default; color: black;}
#myGrid .aw-column-0 {width: 50px; border-right: 1px solid #848484; cursor:default;}
#myGrid .aw-column-1 {width: 110px; border-right: 1px solid #C6C6C6; cursor:hand; }
#myGrid .aw-column-2 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-3 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-4 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-5 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-6 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-7 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-8 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-9 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-10 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-11 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-grid-headers {font-weight: bold; cursor:pointer;}
#myGrid .aw-grid-footers {background: #E7E7D6; border-top: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; }
#myGrid .aw-grid-footers .aw-column-0 {background: #E0E0E0;}
#myInpt {width:120%; height:100%; margin:-2px; margin-left:-4px;}
</style>
<script>
//
// had to add
// e.select();
// after
// e.setExpression("test", "this.value");
// in
// lib/templates/input.js
//
// for selecting the text in the edit of a cell.
//
new AW.CSV.Table;
AW.CSV.Table.prototype.response = function(text){
this._rows = text.split(/\r*\n/);
this._data = []; // missing in beta3
if (this.$owner) {
var sortCol = this.$owner.getSortColumn(); // required for keeping sort
var sortDir = this.$owner.getSortDirection(sortCol); // required for keeping sort
// this.$owner.clearScrollModel(); // missing in beta3
this.$owner.clearSelectionModel();
this.$owner.clearSortModel();
this.$owner.clearRowModel();
this.$owner.setRowCount(this.getCount());
this.$owner.refresh();
if (sortCol>= 0) obj.sort(sortCol, sortDir); // added a resort to make sure sorting is kept after refresh.
}
};
//
// Declaring some variables...
//
var reloadid
var myCODE = ""
var myCODEc = 0;
var myCODEr = 0;
var myURL = "http://au.finance.yahoo.com/d/quotes.csv?s="; // just remove the (au.) for US time.
var myCODES = "BHP.AX,TLS.AX,CBA.AX,NAB.AX,WBC.AX,AXA.AX,RIO.AX,AGL.AX,ALL.AX,AMP.AX,ANZ.AX,AMC.AX,BIL.AX,BLD.AX,CCL.AX,CML.AX";
var myCOLS = "&f=snc6p2l1b3b2ohgt1d1&e=.csv"; // codes: http://gummy-stuff.org/Yahoo-data.htm
var myHeaders = ["Code", "Name", "+/-", "%", "Last", "Bid", "Ask", "Open", "High", "Low", "Time", "Date"];
var myFormats = [ str, str, num, num, num, num, num, num, num, num, str, str];
var myFooters = [];
//
// Declaring objects...
//
var tbl = new AW.CSV.Table;
var obj = new AW.Grid.Extended;
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
var htm = new AW.Formats.HTML;
var edt = new AW.UI.Input;
//
// Initialising...
//
tbl.setURL(myURL+myCODES+myCOLS);
tbl.request(); // Async retrieval of data
obj.setCellModel(tbl); // row length set dynamically from data
obj.setHeaderText(myHeaders); // set the headers
tbl.setFormats(myFormats); // set the formats
obj.setColumnCount(myHeaders.length); // dynamic column length from data
obj.setId("myGrid"); // necessary for CSS rules
obj.setCellEditable(false); // disable editing on all
obj.setCellEditable(true , 0); // Enable editing on column 0
obj.setHeaderCount(1); // make sure only one header line.
obj.setSelectorVisible(false); // remove row selector.
obj.setVirtualMode(false); // disable virtual mode
obj.setFooterVisible(true); // enable footer
obj.setFooterText(myFooters); // set blank line text
obj.setFooterCount(1); // make sure only one footer line
obj.setFooterHeight(16); // set standard row height
edt.setId("myInpt"); // necessary for CSS rules
document.write(obj);
//
// Required to capture edited text as it is typed...
//
obj.onCellTextChanged=function(val,col,row){
myCODE = val;
myCODEc = col;
myCODEr = row;
}
//
// Required to commit the change of edited text once editing complete.
//
obj.onCellValueChanged=function(val,col,row){
if (col==myCODEc && row==myCODEr) {
myCODE = addCodeClean(myCODE);
if (myCODES.indexOf(myCODE)>=0) myCODE="";
if (myCODE != val) {
updateCodes(myCODE,col,row);
//clearTimeout(reloadid);
reload(0);
}
}
}
//
// Required for drag and drop of body...
//
obj.onCellMouseDown = function(event, column, row){ if (column>0) dragstart(event) };
obj.onCellMouseUp = function(event, column, row){ dragstop() };
obj.onControlMouseUp = function(event){ dragstop() };
//
// Required for adding code to grid
//
obj.onFooterClicked = function(event,index){
//if (index==0){
obj.setFooterText(edt,0);
obj.getFootersTemplate(0,0).refresh();
var edit = edt.element().getElementsByTagName("input")[0];
edit.focus();
edit.select();
AW.attachEvent(edit, "onblur", addCode);
AW.attachEvent(edit, "onkeydown", addCodeKey);
//}
};
//
// Function that refreshes data in grid based on new myCODES list...
//
function reload(i){
var now = new Date();
//document.getElementById("info2").innerHTML = myCODES;
tbl.setURL(myURL+myCODES+myCOLS);
tbl.request();
for(var i=2;i<obj.getColumnCount();i++) obj.getCellTemplate(i).refresh();
var now1 = new Date();
var load = (now1-now) / 1000;
window.status = "Last Response: " + now1 + " ... Live Response Time: " + load + " secs";
if (i==0) return reloadid;
reloadid=setTimeout('reload()', 5000); // 5 second refresh
}
//
// Function that is fired onblur of input footer box.
//
function addCode(){
var edit = edt.element().getElementsByTagName("input")[0];
myCODE = addCodeClean(edit.value); // get and clean the code entered
AW.detachEvent(edit, "onblur", addCode);
obj.setFooterText("",0); // remove the edit box.
obj.getFootersTemplate(0,0).refresh();
if (myCODES.indexOf(myCODE)<0) { // if code does not already exist in the list
myCODES = myCODES + "," + myCODE; // then add it
//clearTimeout(reloadid);
reload(0); // and refresh data
}
}
//
// Function that captures the return key on footer edit box and fires the onblur event.
//
function addCodeKey(e){
var code = event.keyCode;
if (code == 13) addCode();
}
//
// Function to clean code... (make it upper case and add extension of .AX for Australian Codes.)
//
function addCodeClean(c){
c = c.toUpperCase();
if (c.indexOf(".")<0 && c.length>0) return c+".AX";
else return c;
}
//
// Function that updates the code list with the new value
//
function updateCodes(v,c,r){
str = "";
for (var x=0;x<obj.getRowCount();x++) {
if (c==0 && r==x) str = str + "," + v;
else str = str + "," + obj.getCellText(0,x);
}
myCODES = str.substr(1);
}
//
// Fucntion will be used later to color background of each cell changed.
//
function colorCell(o,n,x,y) {
if (o) { if (n > o[x]) obj.getCellTemplate(x, y).setStyle("background", "#C0F8C0");
if (n < o[x]) obj.getCellTemplate(x, y).setStyle("background", "#F8C0C0"); }
}
//
// Dragging functions...
//
var dragapproved=false
var offsetx, offsety, tmpx, tmpy, maxx, maxy
function dragstart(e){
dragapproved=true;
offsetx=event.clientX;
offsety=event.clientY;
tmpx=obj.getScrollLeft();
tmpy=obj.getScrollTop();
maxx=obj.getScrollWidth() - document.getElementById("myGrid").offsetWidth + 18;
maxy=obj.getScrollHeight() - document.getElementById("myGrid").offsetHeight + 18;
if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=dragdrop
}
function dragdrop(e){
if (dragapproved&&event.button==1){
x=tmpx+offsetx-event.clientX
y=tmpy+offsety-event.clientY
}
if (x<0)x=0;
if (y<0)y=0;
if (x>maxx)x=maxx;
if (y>maxy)y=maxy;
obj.setScrollLeft(x);
obj.setScrollTop(y);
}
function dragstop(){
dragapproved=false;
if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=null;
}
</script>
<p></p>
<input type="button" value="refresh" onclick="reload()"/>
<input type="button" value="stop" onclick="clearTimeout(reloadid);"/><br/>
<p id="info" name="info" style="font-family:arial;font-size:12px">
Double click on a code and change it to change the item. <br>
Double click on a code and delete the text and it will delete the line. <br>
Click on the footer and add a code it will add a line to the list. <br>
Click and drag on the body data to scroll.
</p>
<p id="info2" name="info2" style="font:courier;font-size:10px">
</p>
</body>
</html>
Alex from Sydney
Thursday, January 5, 2006
This topic is archived.
Back to support forum
Forum search
