Fire up your browser and open our first sample file at http://127.0.0.1/AspGrid/Sample1.asp
Here is what the browser will show:
This looks like our empty Departments table. Let's now click
on the "plus" sign:
Go ahead and enter some data for our first department record. Once you
are done, click on the "ok" button:
Congratulations! You have just entered your first record into the Departments
table. Now click on the "pencil" button. This will activate the in-place
editing mode for this record.
You can now edit this record's data. Once you are done, click "ok" if
you want to save the changes, or "cancel" otherwise.
<%
Set Grid = Server.CreateObject("Persits.AspGrid.1")
Grid.FileName = "Sample1.asp"
Grid.Connect "AspGrid",
"", ""
Grid.SQL = "select id,
name, phone from Departments"
Grid.Cols(1).Hidden
= True
%>
<HTML>
<BODY>
<% Grid.Display %>
<% Grid.Disconnect
%>
</BODY>
</HTML> |
Let's examine the file line by line.
The line Set Grid
= Server.CreateObject("Persits.AspGrid.1") simply creates
an instance of the AspGrid object.
The line Grid.FileName
= "Sample1.asp" specifies this script's file name. AspGrid
will use this property to correctly generate the
ACTION attributes of all FORMs.
The line Grid.Connect
"AspGrid", "", "" specifies an ODBC datasource name (DSN),
user id and password. In our case the DSN is "AspGrid". Since we don't
use security in our sample database, the user id and password are left
blank.
The line Grid.SQL
= "select id, name, phone from Departments" specifies
the SQL SELECT statement that our grid will be based on. It contains all
three fields of the table even though we only see two of them, name
and phone.
IMPORTANT: Unless you want your grid to be
read-only, you must always specify the identity column of your table in
the SELECT statement. Besides, the identity column must be the first one
in the SELECT statement's list of fields.
The next line, Grid.Cols(1).Hidden
= True, deserves special attention. It instructs AspGrid
to hide column 1 of the grid. Columns are numbered according to their order
in the SELECT statement. The Cols(i) method returns a corresponding
Column object which represents a single column in the grid. It is
through this object that you set various properties of individual columns
including size, color, font, default value, list of options (if applicable),
etc.
Embedded in the HTML body is the main "workhorse" method Grid.Display.
This method does most of the component's work: it handles user commands
such as Add New or Save by reading the Request.QueryString collection,
opens the recordset, reads data from the table, generates grid HTML and
sends it out via a series of Response.Write calls.
And finally we call Grid.Disconnect
to terminate the connection to our datasource begun by Grid.Connect.
Go back to Start
Continue to Lesson 2