Complete source code is available for use in your projects.
In this article you will learn...
- How to manipulate XML documents using .NET classes
- How to create DataGrid programmatically and add columns to it
- Throughout this article we will use Employees and Customers tables from Northwind database.
- The sample data entry web form that we use contains two text boxes. One for entering Employee ID and other for entering Customer ID. Even though these fields are not related to one another, they does illustrate how our lookup screen works.
- Each text box has its own Select button. If you click on the button next to Employee ID text box, a modal dialog will pop up that displays list of Employees in a DataGrid
to choose from.
- Similarly, if you click on the button next to Customer ID text box, a
dialog pops up showing list of customers.
Note that real life lookup screens will also contain functionality such as
searching and sorting. However, here we will understand the concept using simple
example. You can then extend the example to suit your needs.
Configuration File Format
In order to make our lookup screen generic we will make it independent of any specific database table or view. We will store all the configuration information in an XML file. One XML file can contain any number of lookup form settings. Following example shows how the XML files looks:
<?xml version="1.0" encoding="utf-8" ?>
<sql>select * from employees</sql>
The various tags are explained below.
- lookupforms : This is the root element of the document. All lookup forms are enclosed in it.
- emplookupform: This tag is the name of the lookup form. It can be any valid XML tag name. It must be unique in given XML file.
- sql : This specifies the SQL Select query that is used to populate DataGrid.
- columns : This section contains details of all the columns that will be part of the DataGrid
- column : Represents individual column of the DataGrid
- datafield : The name of the field from data source that is to be displayed
- heading : The text that will be displayed in the heading of the data field
- dataformatstring : The formatting expression that will be used to format the DataGrid column
- visible : Indicates whether a column is visible to the user. Not all columns need to be visible in the DataGrid. For example, employee id column is used programmatically but need not be displayed to the user
- returncolumn : At a time you can return only one column value to the calling form. For example, you have EmployeeID, LastName and FirstName columns displayed and you want to return selected Employee ID to the calling form.
Creating GridGenerator Class
In order to add columns to the DataGrid and bind the DataGrid with a DataSet,
we create a class called GridGenerator. This class has method that do all tasks such as loading XML file,
retrieving SQL query, retrieving column information, creating DataGrid columns etc.
Creating the Lookup Screen - lookupdialog.aspx
In order to create the lookup screen we need to read the configuration file and generate DataGrid columns on the fly.
Place an instance of DataGrid we control on the web form without adding any columns. You can also add this instance via code but the advantage of former method is that you need not create the columns every time as they are persisted by ASP.NET.
Creating FRAMESET to host the dialog - dialoghost.aspx
Note, that we do not display the lookup form directly. Instead we show a page containing FRAMESET that in turn shows the lookup screen. To know why this is required read my article here.
You show dialoghost.aspx from your data entry form passing which lookup form to
display (emplookupform or custlookupform). This form also sets a session
variable indicating which lookup form is to be displayed.
Creating a Sample Data Entry Screen - dataentryform.aspx
Finally, we create a data entry screen as explained in Sample Scenario
ShowDialog. The function takes the tag name of the lookup form and id of the
HTML control whose value is to be populated after user selects a value from the
lookup dialog. We call this function in client side Click event of the
buttons using Attributes collection.
I hope you must have find this article useful. See you soon with some more