Update iGrid using JavaScript.

Former Member · ‎12-13-2007

Overview :In one of our requirements, we needed to allow the user to edit the grid online and save the data. Well I didn't get the exact solution to this but a work around using the JavaScript. The detials below will explain step by step process using some really simple and reusable JavaScript code. Hope You will enjoy this.

In the illustration below, I have considered Employee table of the Northwind database.

Generate the Grid

Query Template: Select the Employees Table from the table list and some of the columns from the column list. Make sure to select the Id (which is primary key ) as this will be used as identifier for the record in update. Refer to the Image Below.

!https://weblogs.sdn.sap.com/weblogs/images/251841369/EmployeeTable.JPG|alt=|src=https://weblogs.sdn....!

Test the Query Template and save that in some location of your choice.

Display Template :Create one Grid type Display template and on the Data Maping tab, select the Query that you just created and save the template. Please refer to the Image below.

!https://weblogs.sdn.sap.com/weblogs/images/251841369/EmployeeGrid.JPG|alt=|src=https://weblogs.sdn.s...!

Web Page :Make one HTML page and put the the Applet using above Display template and Query template, which should look something like this.</li></ul>

You need to put 'ID' attribute in the applet tag for the above applet, which can be same as applet name attribute, refer to the code sample below:

This will be used to identify which grid needs to be updated, this is illustrated below.

Put two Empty JavaScript Methods with the following signature:

function updateSelectedRecords(){/* Method Body/ }</li><li>function setReadOnlyProperties(){/ Method Body/ } Content of each method is described in the section below.</li></ul></li></ul>With this done, we have completed the first part, that is getting the grid.Now the next step is to make the grid editable, well not exactly the grid, but something which will allow us to edit the contents of the grid.Follow few simple things to achive this: <ul><li>Query Template: First We need a query template which will update the Employee details. In the Query Template Editor , create one command query which will update the Employee details based on EmployeeId, which should look something like <ul><li>UPDATE Employees SET Employees.LastName='[Param.1]' , Employees.FirstName='[Param.2]' , Employees.Title='[Param.3]' ,Employees.Address='[Param.4]', Employees.City='[Param.5]' where Employees.EmployeeID='[Param.6]'</li></ul></li><li>Display Template : We need Command Type display template to update the Emplaoyee Details:</li><li>Put one Command Applet in the webpage with above created Query template and display template, give the name as 'UpdateEmployeeCommand'</li><li>In your page, Please keep one empty form with name +GenerateTable , +the code should be something like +
<ul><li><form name="GenerateTable"> <!~~This is the empty form where the generated table will reside~~> </form>+</li></ul></li><li>Create one JavaScript file with extension .js and put the following code in that <ul><li>//--
~~Code Starts~~--

</li><li>var Params; // This is used as two dim array to hold the values updated fields of each row. var noOfColumns=0; // This is to hold the no. of columns in each row var rowCount=0; // this is to hold the no. of rows for the grid var readOnlyProperties;// this is used to hold the readonly properties of the table. /*
* This function will generate the table.
 The parameter passed to this function is the Grid Id for which the
 table has to be generated.
/ function generateGridTable(gridName){ var TableName=gridName'_Table'; var generateHTML="<table name="TableName" border=1>\n"; var generateHeader=""; var generateRow=""; var gridObject=document.getElementById(gridName).getGridObject(); noOfColumns=gridObject.getColumnCount(); rowCount=gridObject.getRowCount(); readOnlyProperties=new Array(noOfColumns); setReadOnlyProperties(); //--~~Generate Headers~~-- generateHeader="<tr><th>Select</th>\n" for(var i=1;i<=noOfColumns;i) generateHeader="<th>"(gridObject.getColumnName(i)).toUpperCase()"</th>\n"; generateHeader="</tr>"; //----~~-Header generation Complete //~~--Generate Rows for(var i=1;i<=rowCount;i){ //First Add the checkBox to select the record to update generateRow="<tr><td><input type='checkbox' id='select"i"' onClick=enableRow("i","noOfColumns")></td>\n"; for(var j=1;j<=noOfColumns;j+){ generateRow="<td><input disabled='true' type='text' id='"i"."j"' value='"gridObject.getCellValue(i,j)"' "isReadOnly(gridObject.getColumnName(j))"/></td>\n"; } generateRow="</tr>\n"; } var AddSaveButton="<tr><td colspan="noOfColumns"><input type='Button' value='update records' onClick='updateSelectedRecords("rowCount")' /></td></tr>\n" //----Row Genration Complete //alert(generateHTMLgenerateHeadergenerateRowAddSaveButton"</table>"); document.GenerateTable.innerHTML=generateHTMLgenerateHeadergenerateRowAddSaveButton+"</table>"; } /*
* This function is called when the selection checkBox is checked or unchecked.
/ function enableRow(index){ for(var i=1;i<=noOfColumns;i+) document.getElementById(index'.'i).disabled=!document.getElementById('select'index).checked; } /
* This Function will generate a Two dim Array
* which holds the values for each of the updated text box.
* The generated Array will hold the values from 1.1--~~1.noOfColumns, rowCount.1~~rowCount.noOfColumns / function generateParams(){ Params= new Array(rowCount1);// 0,0 will hold null values as our id's of table are mapped from 1.1 // Create a two Dim Array to hold the updated Values for(var i=0;i<=rowCount;i){ Params[i]= new Array(noOfColumns); } // Add values to each place in two dim array for(var i=0;i<=rowCount;i){// for 1, for each row for(var j=0;j<=noOfColumns;j){// for 2, for each col if(i>0 && j>0){// if 1, avoid 0.0 Params[i][j]=document.getElementById(i'.'+j).value; }// end if 1 }//end for 2 }// end for 1 } /* This function is find if the property is readonly or not */ function isReadOnly(propertyName){ for(var i=0;i<readOnlyProperties.length;i++) if(readOnlyProperties[i]==propertyName) return 'readOnly'; return ''; } //--

Code ends here

Keep the JavaScript file somewhere on the Inpetpub folder, preferably same place where your web page is.
In your webpage, import the JavaScript file which is created in the above step, follow the following code to do so

Place a Button on your webpage, on click of that call function generateGridTable('SampleGrid*'); where SampleGrid is the ID of the applet which needs to be updated.*

Save the HTML file and Test,it should look some thing like.

bq.

Click on the Edit Grid Button which should Generate a table exactly like our Grid and one checkbox for each row. as shown in the image below

!https://weblogs.sdn.sap.com/weblogs/images/251841369/GeneratedTable.JPG|alt=|src=https://weblogs.sdn...!

So we have got the Table which is exactly like the Grid, By Default all the rows are disabled , which could be enabled to update by checking the respective checkbox.Notice one button called +Update Records +just below the table.

The next thing is to update the record in the database. For this we need to put the body in the one of the Empty methods +updateSelectedRecords() which I mentioned earlier.+

function updateSelectedRecords(){ generateParams();// call this method to get the param array var queryObject=document.UpdateEmployee.getQueryObject();// This is query Object for the Update Command

+ for(var i=1;i<=rowCount;i+){ if(document.getElementById('select'i).checked==true){// Params[i][n] is the n'th textbox value in the i'th row
 queryObject.setParam(1,Params[i][1]);
 queryObject.setParam(1,Params[i][2]);
 queryObject.setParam(2,Params[i][3]);
 queryObject.setParam(3,Params[i][4]);
 queryObject.setParam(4,Params[i][5]);
 queryObject.setParam(5,Params[i][6]);
 queryObject.setParam(6,Params[i][1]);
 document.UpdateEmployee.executeCommand();
 }
 }
 document.SampleGrid.updateGrid(true)
}+

If we want to make some of the properties that should not change, like in our case, employeeId add the below mentioned code to the +setReadOnlyProperties() function.function setReadOnlyProperties(){
readOnlyProperties[0]='EmployeeID';// Here the value should exactly match the col name in grid

} Now to update some record, select the record and change the values you wish to, Notice that in our example, EmployeeID is read only field. Lets change the value in first row,lets say Miss Nancy is promoted to Sales Manager from Sales Representative,change the value and click Update records, See the grid, it has the updated value, Refer to Following Images !https://weblogs.sdn.sap.com/weblogs/images/251841369/SelectOnerecord.JPG|alt=|src=https://weblogs.sdn.sap.com/weblogs/images/251841369/SelectOnerecord.JPG! !https://weblogs.sdn.sap.com/weblogs/images/251841369/UpdatedRecord.JPG|alt=|src=https://weblogs.sdn.sap.com/weblogs/images/251841369/UpdatedRecord.JPG!
+ Thats it, so now we are able to update the Grid using some really cool JavaScript Stuff.

Update iGrid using JavaScript.

Are you there, SAP? It's me, Jelena

Integration Point of MM-FI-SD in SAP ERP

SAP Project System - A ready Reference ( Part 1 )