3.2.0
Forum Demo Guide API Store

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
January 4,
I used it (footer-inputs) to filter data, but it could be used to add new rows also.
http://activewidgets.com/javascript.forum.8138.6/this-is-old-topic-set.html
Carlos
January 4,
Are you using a JS array?
If so, have you tried adding an extra array element that has empty data and is editable?
Tony
January 4,
Sure, the v.10 form-validator do it Why not in v.2.0?
here is a snap-shot with "few" more features:
http://www.telefonica.net/web2/webtress/awsamp/multi_aw.jpg
Carlos
January 4,
Yeah Carlos,

This looks like great exemples... will you publish those as for v1, which was already very useful to me!!!

Luke
Luke
January 5,
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
January 5,

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)
AW 2.0.2 - new bug-fix release. Alex (ActiveWidgets) (51)
Help?!-Posting cell data to new window? max freeman (17)
Help getting new row data for csv write. Justin (Boston) (6)
AddRow() Refreshes row prior to the added row Brad (7)
No Scroll Bars after adding data Jim Hunter (12)
Expanding / Collapsing a row ... Experiment-2..... Carlos (19)
I'm stuck adding a new row to a empty grid based on array Martin Duran (6)
Example - saving editable grid data to the server Alex (ActiveWidgets) (18)
Adding new rows of XML data to a grid and Firefox John Naker (4)

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