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.
|