iASP_Grid Component: Sample 5

Run Sample 5

NOTE: If you haven't configured your Microsoft Access driver, please click here.

This sample demonstrates the use of  iASP_Grid for data-bound form generation.


Details of an employee can be displayed as a form in the right frame by clicking on the employee name in the left frame.  All the fields can be edited and then saved by clicking on the Save button.

An empty employee form is displayed by clicking on the AddNew button, and the label of the Save button changes to Insert.


After entering information for the new employee, clicking the Insert button saves the information in the Employee table.  The changes made will be displayed in the left frame only after clicking the Refresh button.

iASP_Grid can be displayed in three states, namely Add, Edit & Delete.  iASP_Grid switches to Edit mode by detecting the AspGridEditn variable in the Request collection.   Similarly, it switches to Add mode by AspGridAddn, or from the Add mode back to the display mode by AspGridInsertn using the Request collection.

NOTE: In the form mode, iASP_Grid can only be in two states i.e. edit and add-new.
 

Sample code

Sample5.asp

<HTML>
<frameset cols="300,*" frameborder=1 border=1 framepadding=5 framespacing=0>
        <frame src="Sample5Left.asp" name="LeftFrame" marginwidth=5 marginheight=5 scrolling=auto nowrap target="RightFrame">
  <frame src="Sample5Right.asp" name="RightFrame" marginwidth=0 marginheight=0 scrolling=yes>
</frameset>
</HTML>

 

Sample5Left.asp

<%
   Set LeftGrid = Server.CreateObject("Persits.AspGrid")
   LeftGrid.FileName = "Sample5Left.asp"
   LeftGrid.Connect "sun.jdbc.odbc.JdbcOdbcDriver", "jdbc:Odbc:GridTest", "", ""
   LeftGrid.SQL = "select id, '<A TARGET=RightFrame HREF=Sample5Right.asp?ID1=' + CStr(id) + '>' +    FirstName + ' ' + LastName + '</A>' from Employee"
   LeftGrid.Cols(1).Hidden = True
   LeftGrid.CanEdit = False
   LeftGrid.CanAppend = False
   LeftGrid.ShowLeftSideButtons False
   LeftGrid.Table.Border = 0
   LeftGrid.ShowHeader = False
%>

<HTML>
<BODY>
<H3>Employees:</H3>

<% LeftGrid.Display %>
<% LeftGrid.Disconnect %>

<FORM ACTION=Sample5Left.asp>
<INPUT TYPE=SUBMIT NAME=Refresh VALUE="Refresh">
</FORM>

<FORM ACTION=Sample5Right.asp METHOD=GET TARGET="RightFrame">
<INPUT TYPE=SUBMIT NAME=AspGridAdd1 VALUE="Add New">
<INPUT TYPE=HIDDEN NAME=ID1 VALUE=0>
</FORM>

</BODY>
</HTML>

 
Sample5Right.asp

<HTML>
<BODY>

<%
   Set Form = Server.CreateObject("Persits.AspGrid")
   Form.Connect "sun.jdbc.odbc.JdbcOdbcDriver", "jdbc:Odbc:GridTest", "", ""
   Form.FileName = "Sample5Right.asp"
   Form.UseImageButtons = False
   Form.SQL = "select id, FirstName, LastName, DepartmentID, Salary, MaritalStatus, FullyVested from    Employee where id = " & Request("ID1")
   Form.Cols(4).AttachForeignTable "select id, name from departments", 1, 2
   Form.Cols(6).Array = Array( "Single", "Married", "Divorced" )
   Form.Cols(6).VArray = Array( 1, 2, 3 )
   Form.Cols(7).AttachCheckBox "Yes", "No"

   If Request("ID1") <> "" or Request("AspGridAdd1") <> "" Then
      Form.BuildForm
      Form.Disconnect
   End If
%>

<TABLE BGCOLOR="#C0C0C0" BORDER=3 CELLSPACING=3 CELLPADDING=3 WIDTH=100%>
<TD>
<TABLE BGCOLOR="#C0C0C0" BORDER=0 CELLSPACING=0 CELLPADDING=3 WIDTH=100%>

<FORM METHOD=GET ACTION=Sample5Right.asp>
<TD>First Name:</TD><TD><% = Form.Cols(2).FormHTML %></TD>
<TD>Last Name:</TD><TD><% = Form.Cols(3).FormHTML %></TD><TR>

<TD>Department:</TD><TD><% = Form.Cols(4).FormHTML %></TD>
<TD>Salary:</TD><TD><% = Form.Cols(5).FormHTML %></TD><TR>

<TD>Marital Status:</TD><TD><% = Form.Cols(6).FormHTML %></TD>
<TD>Fully Vested:</TD><TD><% = Form.Cols(7).FormHTML %></TD><TR>

<INPUT TYPE=HIDDEN NAME=ID1 VALUE=<% = Request("ID1") %>>

<TD COLSPAN=4>

<% If Request("AspGridAdd1") <> "" Then %>
<INPUT TYPE=SUBMIT NAME=AspGridInsert1 VALUE=Insert>
<% Else %>

<INPUT TYPE=SUBMIT NAME=AspGridSave1 VALUE=Save>
<% End If %>
</TD>
</FORM>

</TABLE>
</TD>
</TABLE>

</BODY>
</HTML>

Description

The first five steps for creating a Grid Object have already been discussed. See the main page of samples for details.

Sample5.asp is similar to Sample3.asp

The difference between Sample5Left.asp and Sample3Left.asp is that the former displays  Delete buttons in the left-side grid.  Moreover, the left-side grid has two forms with Refresh and AddNew buttons respectively.  The <ACTION> attribute of the Refresh is set to Sample6Left.asp, thus causing it to refresh.

<FORM ACTION=Sample5Right.asp METHOD=GET TARGET="RightFrame">
<INPUT TYPE=SUBMIT NAME=AspGridAdd1 VALUE="Add New">
<INPUT TYPE=HIDDEN NAME=ID1 VALUE=0>
</FORM>

The above form displays the AddNew button.  Whenever the button is clicked the frame invokes Sample5Right.asp, passing parameters AspGridAdd1=Add+New and ID1=0. AspGridAdd1=Add+New causes the right-side grid to switch to the Addnew state.  ID1=0 sets the Request("ID1") variable in the right grid to a non-empty value (0), ensuring that the SQL statement remains valid.

Form.UseImageButtons = False
Causes the Save (Insert) button to be displayed as a regular submit button by disabling images for the buttons.

Form.SQL = "select id, FirstName, LastName, DepartmentID, Salary, MaritalStatus, FullyVested from Employee where id = " & Request("ID1")
Whenever the grid is used in the form mode, the SQL statement should return only one record which is shown as a form. The above line causes the right-side grid to display the record matching the ID1 passed from the left side grid for editing.

Irrespective to the number of records, whenever the grid is in the AddNew state Request("ID1") will be set to 0. Thus the above statement will cause the recordset to be empty.

Form.Cols(4).AttachForeignTable "select id, name from departments", 1, 2
Form.Cols(6).Array = Array( "Single", "Married", "Divorced" )
Form.Cols(6).VArray = Array( 1, 2, 3 )
Form.Cols(7).AttachCheckBox "Yes", "No"

Above 4 lines are identical to those in the previous sample (sample 2 Or sample 3) :

If Request("ID1") <> "" or Request("AspGridAdd1") <> "" Then
   Form.BuildForm
   Form.Disconnect
End If

The BuildForm method displays the grid when iASP_Grid is used in the form mode.  Instead of any HTML output, this method prepares HTML INPUT Tags for each column of the Grid.  These Input Tags can be displayed using FormHTML property of the Column Object.

When in the Form mode, iASP_Grid no longer generates HTML forms automatically.  In this sample scripting was used to build an HTML form, a submit button and a hidden INPUT tag.  The Input tag ensures that the current record ID will remain valid within the right-frame during form refreshing.  But iASP_Grid does generate input tags for each item on the form, and it is again the script writer's responsibility to use those tags in the HTML file.

<FORM METHOD=GET ACTION=Sample6Right.asp>
<TD>First Name:</TD><TD><% = Form.Cols(2).FormHTML %></TD>
<TD>Last Name:</TD><TD><% = Form.Cols(3).FormHTML %></TD><TR>

<TD>Department:</TD><TD><% = Form.Cols(4).FormHTML %></TD>
<TD>Salary:</TD><TD><% = Form.Cols(5).FormHTML %></TD><TR>

<TD>Marital Status:</TD><TD><% = Form.Cols(6).FormHTML %></TD>
<TD>Fully Vested:</TD><TD><% = Form.Cols(7).FormHTML %></TD><TR>

<INPUT TYPE=HIDDEN NAME=ID1 VALUE=<% = Request("ID1") %>>
...
</FORM>

The statement <% = Form.Cols(2).FormHTML %> evaluates to the tag <INPUT TYPE=TEXT NAME=FIELD1 VALUE="ABC">.

<INPUT TYPE=HIDDEN NAME=ID1 VALUE=<% = Request("ID1") %>>
Sample6Right.asp searches for ID1 variable in the Request collection to retrieve the current record to display in the Form.  Therefore Name of the hidden input field is set to ID1, where 1 corresponds to the value of NumberOnPage property (default 1).

<% If Request("AspGridAdd1") <> "" Then %>
<INPUT TYPE=SUBMIT NAME=AspGridInsert1 VALUE=Insert>
<% Else %>
<INPUT TYPE=SUBMIT NAME=AspGridSave1 VALUE=Save>
<% End If %>
The above lines generate a Save button if the Form is in the Edit mode, and an AddNew button when the Form is in the Add mode.

If you require technical support please send complete details about the problem you are having to support@halcyonsoft.com.


Copyright © 1998-2002, Halcyon Software Inc. All rights reserved.