Home > 2010 Winter BTI420 > Customizing data display web server controls in an ASP.NET Web Forms app

Customizing data display web server controls in an ASP.NET Web Forms app


In this post, you will leverage your knowledge and experience with data display web server controls and data binding, to create appearance and functionality customizations.

 

More explanation, or introduction

 

"Edit Columns…" task

A GridView or DetailsView offers you the option to "Edit Columns…". This is how we get started with customizations.

FieldsDialogAvailableFieldsList The upper-left area of the Fields editor dialog shows the "Available fields:" list. Each one should imply its purpose to you, but a few of them need some explanation:

ButtonField: A field that contains a button that enables the user to perform a specific action, like "increasing the price by 10%".

CommandField: A field that is used for performing the common operations on data, including insert, edit, delete, select.

TemplateField: A field that contains the markup (and controls) that you desire.

 

Getting "help" on this topic

For complete coverage, click the "help" control in the upper-right area of the dialog to open the "Fields Dialog Box" help topic. This will open the Visual Studio 2008 Documentation system.

Scott Mitchell has also published a number of tutorials here:

Data Access Tutorials start page

Coverage of this topic is scattered through the tutorials, but many of them are in the "Custom Formatting" and "Enhancing the GridView" sections.

 

Customizing the BoundField

The list of bound fields is provided by the data source. By default, when you create a GridView or DetailsView, all data source fields which can be rendered are included in this bound fields list.

You can remove fields that you don’t want to appear. This enables you to reuse an existing table adapter method but still provide a custom field list.

You can also choose the appearance sequence of the fields. Select a field in the "Selected fields:" list. Then, click the up-arrow or down-arrow button to alter its appearance sequence.

You can also modify the properties of each field. Select a field in the lower-left area of the Fields dialog box, and modify the properties on the right. A common customization is the HeaderText, but you can experiment with others.

Other common customization for the GridView include column formatting, and column alignment (i.e. left, center, right).

 

Customizing the CheckBoxField

SCSProgramsAndCourses By default, a CheckBoxField is used to display a boolean (bit) field from the data source.

If you want your own column of check boxes, perhaps to enable the user to select rows for bulk/batch processing, you must use a TemplateField. See the discussion later in this post for an example.

 

Customizing the HyperLinkField

Use this field to display a hyperlink for each displayed record.

To illustrate this example, we’ll use data from a table adapter in my (a01) web app. See the image to the right.

Your professor has created a table of the School of Computer Studies programs (e.g. BSD, CPA, etc.), and a table of courses (e.g. BTP400, BTN410, etc.).

The Courses table is related to the Programs table through the "ProgramID" column.

As you can see, the Courses table has an "OutlineURL" column. We will create a HyperLinkField that will link to the data in this column, and display it in a customized manner.

Note that the displayed text can be customized. In other words, it doesn’t have to display the actual data.

 

What GridView1 shows you

The top GridView1 shows you the following:

  • The data is from the Table_scs_Courses table adapter data source
  • The GridView has an auto-formatted appearance, and paging and sorting is enabled
  • A limited number of bound fields are displayed – compare the result with the table adapter schema image above
  • Appearance customizations for the header text and column alignments were done
  • A HyperLinkField was added; its DataTextField property enables the display of text from a column in the data source (in this case, the course name), and its DataNavigateUrlFields property is set to the data source column that has the URL

 

Customizing the ImageField

We have seen an image field in a GridView before, a month ago in Week 9. As you have learned, some of the "Data" properties need to be configured for an ImageField to work. The image below shows the GridView2 ImageField data properties:

ImageFieldDataProperties 

 

What GridView2 shows you

The GridView2 shows you the following:

  • The data is from the Table_myAssignment table adapter data source
  • The GridView has an auto-formatted appearance, and paging and sorting is enabled
  • A limited number of bound fields are displayed – compare the result with the table adapter schema image above
  • Appearance customizations for the header text and column alignments were done
  • The first three columns were formatted in a custom manner; notice the comma in the "Size (bytes)" column, etc.
  • An ImageField was added, and the ItemID was used in the URL
  • A HyperLinkField was added, and formatted in a way to include text from the "Title" column, and HTML line breaks

The image below shows the GridView2 HyperLinkField data properties:

HyperLinkFieldDataProperties

 

Customizing the ButtonField

A ButtonField enables the user to perform a specific action, like "increasing the price by 10%".

When a button (in the GridView ButtonField) is clicked, it causes a postback, and runs the "…RowCommand" method. (For GridView3, the method name is "GridView3_RowCommand".) In a postback, state arguments are automatically passed to the method.

In the …RowCommand method, you simply write the code to perform the desired action. You obviously have to know which button (in which row) was clicked. Here’s how to get that information.

Column: When you add the ButtonField, you set its Behavior > CommandName property. Then, in code, you inspect the "e" method argument, and look for the CommandName.

Row: The "e" method argument’s CommandArgument property has the clicked button’s GridView row index. You then use that information to fetch the underlying data row’s key (i.e. the ItemID). There are a couple of ways to do this.

When you have the ItemID, the table adapter method can be called to perform the action.

As you have seen in a past example, you’ll have to rebind the grid view after changing its data source.

Check out GridView3 in the example.

 

Customizing the CommandField

A CommandField column is used for performing the common operations on data, including insert, edit, delete, select.

On the task menu for a GridView, there are checkboxes that offer to enable editing, deleting, and selecting. A DetailsView will offer "inserting" as well. When you select/check/mark one of these, a CommandField column is added, with the appropriate properties.

The configuration of the data source must support these operations. For example, if your data source had only the "select" method configured, you could not offer the others.

If you plan on updating only selected columns in the data source, you must create a customized query in your table adapter. For an example, see today’s GridView4. It enables the editing of only three columns:

  • Post Address
  • Synopsis
  • Visibility

The grid view does display the "Post Title" column, but that column’s ReadOnly property has been set to False.

 

Customizing the TemplateField – combining fields, calendar, dropdown list

A TemplateField is a free-form field that contains the markup (and controls) that you desire.

The "Customize GridView TemplateField" example shows you a three-column GridView (plus a first CommandField column that enables editing). The three columns are:

  1. A combination column that shows the text from four data source columns
  2. A column that shows a calendar control
  3. A column that shows a label for the blog post’s visibility in display mode, and a dropdown list of possible values in edit mode

Here are the concepts that you can learn from studying and reproducing the code:

First combination column: As you can see, labels are used to render the text from the data source. Formatting has been applied.

Note that this column cannot be edited. Its edit item template informs the user.

(There is a method that will trim/truncate a long string; see the call code and the method for implementation details.)

Second calendar column: As you can see, an ASP.NET Calendar web server control is used to display the blog post published date.

Note the following: The SelectedDate property of the calendar must use a date that has 12:00:00 AM as the time portion. That’s why the "DateToPublish.Date" (Date) property has been used in the Eval statements. That’s how we get the user interface to draw/highlight the DateToPublish rectangle.

Last label/dropdownlist column: In display mode, a label renders the Visibility column value. In edit mode, a DropDownList control is used.

 

Customizing the TemplateField – add a check box column

As you learned above, a boolean data source column is rendered as a CheckBoxField.

You can add your own column that contains check boxes, which can (in many use cases) enable the user to select rows for bulk/batch processing. For example, in web browser based email clients, your inbox list typically includes a column with check boxes, enabling you to select one or more messages on the list, and perform bulk/batch actions on them, like delete or move.

For this use case, add a TemplateField column, and a CheckBox web server control. For best results, there’s a coding pattern to follow:

  1. Decide what bulk/batch action to perform
  2. Add a TemplateField with a check box web server control
  3. Add a button (or other control like a drop-down list) above or below the GridView that tells the user to perform the action
  4. Write a method, which will go through the visible GridView rows, and perform the action on only those rows which have had the check box checked/selected/marked

(more to come)

 

Displaying data from related tables

( the key is the table adapter – more to come )

 


Advertisements
Categories: 2010 Winter BTI420
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: