Add and Delete a row in Grid

Hi,

greetings,

please give me sample code to add/delete rows in the js-array that is used to create grid.

I want to add/delete rows and refresh the grid.

please give me sample code.

thanks for the anticipated cooperation

MAK

Here is simple example:

function addRow(){
    var rowData = ["GGL", "Google, Inc", "9,999.999", "765.432", "10000"]
    myData.unshift(rowData);
    obj.setRowProperty("count", myData.length);
    obj.refresh();
}

obj.setAction("click", addRow);

And with XML?

It works fine, but when I add a row after sort, the new row appears in the midle of the grid and overwrites the values....
any ideas?

Same problem...no answer...

Please check this thread, you will get your answers with sample code.

http://www.activewidgets.com/messages/62-11.htm

BTW, I have not done XML one, so can't suggest you anything.

Thanks,

delete row:

function removeRow(grid) {
var index = grid.getProperty("selection/index");
if (confirm("Você tem certeza que deseja excluir?")) {
returnVal = myData.splice(index,1);
grid.setRowProperty("count", myData.length);
grid.refresh();
//alert(" count -> "+obj.getRowProperty("count")+ " |=> Deleted Row: " + returnVal);
}
}

I'm a newbie. Here do I put these enhancment codes.

how to delet a row from dynamically added table in jsp usin javascript

How to add row if u using csv/xml as data src.

Am also looking for a way to add/remove rows while using a XML datasource. Is it possible?

After sorting, removing a row have problem.

AW 2.0 b3 is supposed have the add/delete/update rows functionality for the AW.XML.Table.

can somebody post the whole coding for adding data into table? having some difficulties here.. please, anyone :)

You need to add data to a table or the activewidgets grid.
Also tell me u want to load data from javascript
or through any middleware language like PHP

i have been able to insert data dynamically through javascript, but now the case I need the first data that is inserted to be in row 1.. but instead if i add more row, the data will replace , like

1st data - hello
2nd data - bye

the order should be

row 1 - hello
row 2 - bye

but now its like

row 1 - bye
row 2 - hello.. and so on..
can anybody help me?

if data is being inserted in reverse order then change the row indices ordering using
Grid.setRowIndices([10,9,8,7,6,.......]);//This is for v2.0
It will reorder the data being inserted.

But what i think, it is not the problem, You copy-paste ur code so that problem can be viewed in an expanded view :)

<script>
var obj1 = new Active.Controls.Grid;
obj1.setId("grid1");
obj1.setRowProperty("count", 1);
obj1.setColumnProperty("count", 4);

obj1.setDataProperty("text", function(i, j){return data1[i][j]});
obj1.setColumnProperty("text", function(i){return columns1[i]});
obj1.setColumnHeaderHeight("20px");

function addRow(){


selTerms = document.form.selTerms.options[ document.form.selTerms.selectedIndex ].text
selCond = document.form.selConds.options[ document.form.selConds.selectedIndex ].text
txtValue = document.form.txtValue.value
chkbox = "<input type=checkbox name=checkbox onclick=javascript:alert(txt); value="+txt+">"

var rowData = [chkbox,selTerms, selCond, txtValue]
data1.unshift(rowData);
obj1.setRowProperty("count", data1.length);
obj1.refresh();
}


//obj1.setAction("click", addRow);
document.write(obj1);

function removeRow(obj1) {
var index = obj1.getProperty("selection/index");
if (confirm("Are you sure?")) {
returnVal = data1.splice(index,1);
obj1.setRowProperty("count", data1.length);
obj1.refresh();
//alert(" count -> "+obj.getRowProperty("count")+ " |=> Deleted Row: " + returnVal);
}
}
</script>

With b2, i dont think it is quite possible to manage with XML directly. So, i had to create the data array based on the table object:

My.drawGrid=function(){
    //	create ActiveWidgets data model - XML-based table
    var table = new AW.XML.Table;

    //	create ActiveWidgets Grid javascript object
    // var obj = new AW.UI.Grid;
    var obj = new AW.Grid.Extended;

  My.obj=obj; // Reference for later use

    //	provide data URL
    table.setURL(strDataSetURL);

    //	set rows XPath
    table.setRows("//NewDataSet/*");

    //	set columns XPath
    table.setColumns(My.ColumnNodes);

  // copy the reference
  table._response_=eval(table.response);
  // we have copied the real method.. It's time to override the method
  // so that the call comes to us before and lets us process the data when ready
  table.response=function(xml){
    table._response_(xml);

  	//	provide column labels
  	obj.setHeaderText(GC.ColumnHeaders);

    var rows=table.getCount();
    if(rows && rows<100) obj.setVirtualMode(false);

    obj.setRowCount(rows);
  	obj.setColumnCount(GC.ColumnNodes.length);

    // I maintain local methods and properties in My to avoid any reference clashes
    My.data=My.parseTableTextToArray(table, GC.ColumnNodes.length, rows);
    obj.setCellText(GC.data);
    // My.parseTableTextToArray is the one that does the trick of converting
    // table data to a 2D array - see below

    // node is an element reference from document.getElementById
    // Note that you can populate data only when the response method was called;
    node.innerHTML=obj;
  };

  table.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); // Always Expires

    //	start asyncronous data retrieval
    req=table.request();

};

My.parseTableTextToArray=function(){
  var a=[];
  for(var i=0; i<rows; i++){
    a[i]=[];
    for(var j=0; j<cols; j++){
      a[i][j]=table.getText(j,i);
    }
  }
  return a;
};

Hope this helps!

Regards

Sheriff

A small correction.. it is My.data and not GC.data (this might mean obvious for a good js developer ;)

My.data=My.parseTableTextToArray(table, GC.ColumnNodes.length, rows);
    obj.setCellText(My.data);

When you delete row 3 then row 4 shifts down to take it's place. Now your indexes are all offset -1 and the trouble begins. To have to grid do the deleteing (2.0) you have to pre-sort the selection array in reverse numerical order. Here's the simplest code i could come up with.

// delete multiple selected rows
var a = gv.getSelectedRows().sort(function(a,b){return b-a;});
for ( i = 0; i < a.length; i++ ) {
gv.deleteRow( a[i] );
}
gv.setSelectedRows( [0] );
gv.refresh();

Hi all,

I try to did this in version 1.0. But after I sort one column, I run this script. I got javascript error in the try block saying avdata is not an object or null. Can anyone help me?

sel is the selected indexes.

sel = sel.sort(function(a,b){return(a>b? -1 : (a==b? 0 : 1))});
for(i=0; i<sel.length; i++) {
avdata.splice(sel[i], 1);
}

try{
avail.setRowCount(avdata.length);
avail.setSelectionProperty("values", new Array());
avail.refresh();
}catch(ex){

}