Enhancing Maintain Grid Functions With JavaScript

By Mark Derwin

When building applications in Maintain, the grid gives you the ability to not only display multiple rows, but to update data and include new records. This article discusses three techniques through which the use of JavaScript enhances the grid’s functionality.

The nice thing about using JavaScript is that it operates directly at the browser level, which means you do not have to make a trip to the server.

One-Click Edit
When the grid is displayed, you have to click on it once to give the object focus, and then click again to go into edit mode (Screen 1). With the StartEdit command, you only need to click once. The grid gets focus and you can enter or update data.

Image 1 – Form in Edit Mode

Place a trigger on the grid’s FOCUS event.  Remember, JavaScript is very case sensitive.  In these examples, my form is named Form1 and my grid is Grid1 (Screen 2). If your form or grid has a different name, change this accordingly. 

Data Validation and Update Flags
When a user enters data into a grid cell, you can validate it before returning to the server (Screen 3).  Using JavaScript is quicker and uses fewer resources than a trip to the server. Also, when it is time to update the database, why update all the rows in the stack? If you use an update flag, you won’t have to use Maintain code to compare values.

When the user enters a value in the Copies field and leaves it, we trigger the OnEditFinish flag. In my JavaScript, I first check the column number. Remember, in a grid, the first column is 0. If I am in column 2, Copies, I then check if the entered value is between 1 and 5. If not, I issue an alert, and place the cursor back on that field.

When I create my stack and my grid, I add a Flag column. When a value is changed, we trigger the OnCellChanged event to update this field. It is important that you know the column number of your Flag. In my example Flag is in column 3. You must make sure that the current column is not 3. If not, we update the value for the Flag field in the current row to Y. When the user clicks the Update button, we trigger the case updater in the Maintain code (Screen 4). This code copies over only the changed rows and updates the database.

These are just a couple of examples in which combining JavaScript with Maintain forms enhances the application and cuts down on resources.