Implementing a Detail Table as CheckBox List

Figure 1. Sample database schema

Figure 2. Iron Speed Designer generated out-of-the-box master-detail page (left), and custom implementation replacing detail tables with checkbox lists (right).

Let’s take a look at a simple database schema in Figure 1 and its master-detail page to the left in Figure 2. If we contrast the two different implementations, we see that the checkbox list layout (on the right) would be more appealing to users for the following reasons:

• The checkbox list displays all available options up front, while default implementation hides them in a DropDownList.
• With checkbox list, users can select an option with a single click, versus the default implementation which requires a series of actions. (Click New button, wait for table panel to add a new blank record, scroll down the DropDownList and make selection.)
• In the default implementation method, users must be careful not to select duplicate options in the detail table. Otherwise, a database unique constraint violation might be deleted. This is inconvenient in a case where users need to select 20 items from 50 options. In checkbox list implementation, users cannot make duplicate selections, and all items can only be viewed once.

Instead, create a reusable and configurable .ASCX user control. You can connect this to the master record with minimal custom code. At the end of this article, you can download the user control (CheckList.zip), as well as a demo application (CheckListDemo.zip). This implementation uses LINQ extensively, so it can only be used in applications for .NET Framework 3.5.

~\App_Code\Shared\ICheckList.cs(vb)

~\Shared\CheckList.ascx

~\Shared\CheckList.ascx.cs(vb)

Unzip the code into an existing project, do a “Find and Replace” for all “ProjectNamespace” in the above three files with your own application name space.

Step 2: Add control to a record panel
Drag and drop an “Include component” from the Toolbox to the design window, or add a <GEN:USE> tag directly in the HTML window. Name the control, and set attribute File=”../Shared/CheckList.ascx” (Figure 3). Next, set two pass-through attributes (DetailTableName and DetailColumnName). (Figure 4).

Figure 3. Use a tag to add the user control into the record panel.

Figure 4. Set pass-through attributes: DetailTableName and DetailColumnName. Both are required.

Step 3: Data bind & save
All the plumbing work of initializing the checkbox list, data binding, and data saving are handled in CheckList.ascx.cs(vb). Hence, wiring up the control with the master record is extremely easy (one line code for data binding and one line code for data saving), as shown in the code snippet below.

C#

public override void DataBind() {     base.DataBind();       if (DataSource != null && DataSource.Developer_IDSpecified) {         LanguageList.DataBind(DataSource);         DBMSList.DataBind(DataSource);     } }   public override void SaveData() {     base.SaveData();       LanguageList.SaveData(DataSource);     DBMSList.SaveData(DataSource); }

Visual Basic .NET

Public Overloads Overrides Sub DataBind()     MyBase.DataBind()       If DataSource IsNot Nothing AndAlso DataSource.Developer_IDSpecified Then         LanguageList.DataBind(DataSource)         DBMSList.DataBind(DataSource)     End If End Sub   Public Overloads Overrides Sub SaveData()     MyBase.SaveData()       LanguageList.SaveData(DataSource)     DBMSList.SaveData(DataSource) End Sub

Step 4: Customize layout (optional)
The control exposes its checkbox list and container panel as read-only properties (ItemList and ContainerPanel), so they can be easily customized. The following code sets the two lists in 4 and 3 columns, respectively.

C#

public DevelopersRecordControl() {     Init += new EventHandler(DevelopersRecordControl_Init); }   void DevelopersRecordControl_Init(object sender, EventArgs e) {     LanguageList.ItemList.RepeatColumns = 4;     DBMSList.ItemList.RepeatColumns = 3; }

Visual Basic .NET

Public Sub New()     AddHandler Init, AddressOf DevelopersRecordControl_Init End Sub   Private Sub DevelopersRecordControl_Init(ByVal sender As Object, ByVal e As EventArgs)     LanguageList.ItemList.RepeatColumns = 4     DBMSList.ItemList.RepeatColumns = 3 End Sub

Download sample code for this example:
Iron Speed Designer V6.0 checklist
Iron Speed Designer V5.2 checklist

Download the project:
Iron Speed Designer

Presence Consulting Group is an established technical consulting firm servicing a wide range of clients, ranging from land management company to direct mail marketers. Our services include .NET consulting, Iron Speed Designer training, database modeling, creative website design, and project management.