3.2.0

Example - saving editable grid data to the server

Here is a simplified example how one can save changes in editable grid to the server. The code sends the modified cells to the server cell-by-cell using onCellValidated event. To finish it you have to implement updateSingleCell.php or .asp or whatever server-side code which will actually save the data. The server-side script is called via POST method with three arguments (column, row, text).

<html>
<head>
    <script src="../../runtime/lib/aw.js"></script>
    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<script>

    var myCells = [
        ["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"]
    ];

    var myHeaders = [
        "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
    ];

    var obj = new AW.UI.Grid;

    obj.setCellText(myCells);
    obj.setHeaderText(myHeaders);
    obj.setColumnCount(5);
    obj.setRowCount(3);

    obj.setCellEditable(true);

    obj.onCellValidated = function(text, column, row){

        var r = new AW.HTTP.Request;
        r.setURL("updateSingleCell.php");
        r.setRequestMethod("POST");
        r.setParameter("column", column);
        r.setParameter("row", row);
        r.setParameter("text", text);
        r.request();

        r.response = function(data){
            alert(data); // process response data
        }
    }

    document.write(obj);

</script>
</body>
</html>


In reality you probably want to send data row-by-row and do some validation, but still this example should give an idea where to start.
Alex (ActiveWidgets)
February 28,
Just an FYI for others... to access the parameters in updateSingleCell.php you would use something like:

<?php

   $column = $HTTP_POST_VARS['column'];
   $row = $HTTP_POST_VARS['row'];
   $text = $HTTP_POST_VARS['text'];
 
  // processing code here

   echo "done";
?>
Rob Francis
March 3,
How to add droplist on column 2?
lingh
April 30,
How can I use the above with JSP since i want to save the grid data changes to the server side?.Also Is there any way to read an datastream using a EBA grid?
The dataStream can be any xml stream or the object stream.
Thanks
Vikramaditya Garg
Vikramaditya Garg
May 1,
Hi

In the below code can I send a request to struts action like this

obj.onCellValidated = function(text, column, row){

var r = new AW.HTTP.Request;
r.setURL("http://localhost:8090/strutsIntegration/processSaving.do");
r.setRequestMethod("POST");
r.setParameter("column", column);
r.setParameter("row", row);
r.setParameter("text", text);
r.request();

r.response = function(data){
alert(data); // process response data
}
}

Actually I am trying to call this struts action but the action is not altogether called.Please anyone suggest me better way to perform this task

thanks
vikramaditya Garg
Vikramaditya Garg
May 1,
How could I click on a "Save" button, and save all the grid data at one time?

Please advise...

Kevin
June 29,
Hi

I Agree with Kevin.I have the same requirement and we want to do bulk saves at the database.
Can anyone help us in calling bulk saves?
Thanks
Vikramaditya Garg
Vikramaditya Garg
July 11,
How to click on a "Save" button, and save all the grid data at one time?
Any help appreciated
Brandon Lee
July 18,
I haven't tried this, but ...

In your onCellValidated method, you want to keep track of the changes using javascript. No ajax just javascript - arrays, objects, whatever. For instance you could keep an array of all of the indices that have been updated.

Your save button would then read this array and send the appropriate data to the server via ajax.
DT
July 18,
How to click on a "Save" button and save the grid data at a .csv file to sent to the server...(do it at the client side)
Y.M
August 3,
any help with my problem?Please i want your help..
Y.M
September 6,
There is no specific methods in the Grid api to do direct saving into the database. You are free to construct the data object and put your own logic for DB interaction using plain Javascript.

Logic:
- write a function to get CSV data
- function getCSVData() {
var csvString;
for ( var i=0; i <grid.getRowCount(); i++) {
for (var j=0; j< grid.getColumnCount(); j++) {
csvString = csvString+ ", "+ get.getCellValue(i,j) +",";
}
}
return csvString;
}

- create a hiddenVariable to hold the CSV data
<form name="data" action="save.jsp" method="post">
<input type="hidden" name="csvHiddenData"/>
</form>

- create function to be called on onClick of Save button button
function submitPage() {
var csv= getCSVData();
document.getElementById("csvHiddenData").value = csv;
document.data.submit();
}

- create save.jsp method to handle the data and save in database.
Raj Nair
September 6,
save.jsp?how?
Y.M
September 10,
Hi Alex,

All you pass the parameters are column number,row number, and Edited Text. To me that doesn't help me to pass the parameters to the ASP base Update script to the data.

If I load the data and hide the Primary key, I wish I can pass the Primary key at the same time so the asp page will be able to find the Praimary key to update the record.

thank you so much!

John
October 22,
John,

I handle this quite simply. I have a hidden column with the key in it. When a user updates a value, I stick it in a JS array and pass the array to a web service for processing. I do this so that the user can make several changes and then click update but you cuould easily implement this as needed.

By example:
var arrayUpdate = new Array();

obj.onCellValidated = function(text, col, row){
            
            var id = parseFloat(this.getCellText(3, row));
            var value = parseFloat(this.getCellText(5, row));
                      
            arrayUpdate[id] = value;
            
       }
John Sourcer
October 23,
How to remove the Evaluation Message from the grid.. pls any one help me..
raja
February 24,

Buy it dude.
Sudhaker Raj
February 24,
Or put a sticker on your screen with "ActiceWidget - Full version" on it.
TMTisFree
February 25,
Use JSON array works real well
April 10,

This topic is archived.

See also:


Back to support forum