Creating Bindable Grids of Data

Slide 2

Lecture Overview Detailed discussion of using the GridView

Slide 3

Introduction to the GridView Characteristics

Data appears in a multicolumn grid Made up of rows and columns

Data always appears in a tabular form Don’t try to change this!

All output is rendered as an HTML table

Slide 4

Comparing the DataGrid and GridView The two controls work similarly

The DataGrid is older The GridView replaces the DataGrid

control In this lecture, I will discuss only the GridView control

Slide 5

Complementary GridView Controls ListView uses templates to display

data Insert, update, delete supported

DetailsView displays a single row from a data source Insert, update delete supported

More in the next lecture

Slide 6

Limitations It’s a grid, don’t try to force the control

to deal with anything but rows and columns

It’s not really designed to add new records We can put the envelope though

Slide 7

GridView (Binding) The GridView can be bound in different

ways

Via the DataSourceID Via the DataSource and DataMember Programatically to a DataSet or other

possible binding

Slide 8

Setting Column Properties (Introduction) Columns can be set using the wizard

(see following screen shot) Columns can be managed using

the .aspx code Or programmatically

In a nutshell, it’s very flexible and powerful

Slide 9

Columns (Introduction) Columns – contains a reference to the

control’s columns We work with these declaratively and

programmatically We only use these when AutoGenerateColumns is false The data type of each column is DataGridColumn

Slide 10

Setting Column Properties (Illustration)

Slide 11

GridView (Columns) Each GridView is made up of a set of Columns

The <Columns> collection is a child of the GridView

Each column is considered a “field”. A column can display bound data (I’ll start here so that we can do

something) predefined commands (buttons) Hyperlinks and images Custom templates

Slide 12

Columns (BoundField) The simplest type of binding is a BoundField The GridView does most of the work

Set the DataField to the corresponding bound field name

Set the HeaderText to display a column header

Slide 13

Columns (BoundField) (Example) A BoundField should be a child of Columns

Slide 14

GridView (Captions) Caption – appears above the grid

headers CaptionAlign – controls the alignment

of the caption (NotSet) Captions can appear along the left, top,

right, or bottom of the grid ShowHeader (true) and ShowFooter –

(false) display the header or footer Note the caption appears in the header

Slide 15

GridView (Table Formatting) CellPadding – the number of pixels

between the cell contents and border CellSpacing – the number of pixels

between cells GridLines – how the gridlines appear

Both, Horizontal, None, Vertical

We can also use CSS

Slide 16

GridView ( Row Styles) Rows appearing in the GridView can be

formatted by defining a row style Use the CssClass property to format the

row using a defined CssClass Or just set the individual style attributes

Syntactically, styles are immediate children of the grid itself rather than attributes of the grid

Slide 17

GridView (Row Styles 1) The following set the style of various

graphical elements RowStyle – individual items displayed in all rows AlternatingRowStyle – every other item EditRowStyle – the item being edited FooterStyle – the footer appearing at the bottom

of the control HeaderStyle – the header appearing at the top of

the control SelectedRowStyle – the selected row PagerStyle – the style of the pager area

Slide 18

GridView (Row Styles 2) Styles appear as an immediate child of

the GridView

Slide 19

GridView (Adding Commands) Here, we are adding buttons to

Select a row Update a row Delete a row (We play clever tricks to add a row)

Or something else

Slide 20

GridView (Command Field -1) MSDN describes it as a special field to

automatically perform inserting, updating, deleting There is no auto provision to add When using Bound fields, the plumbing to

select / change / delete is automatic – no code necessary

You could do the work by hand using a ButtonField (discussed next)

Slide 21

GridView (Command Field -2) Enable the default command buttons

<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowSelectButton="True" />

Slide 22

GridView (Button Fields) Use to perform special tasks Set the CommandName property identify the

command being executed It’s just a string!

Handle the RowCommand event to figure out which button was clicked Use e.CommandName to figure out which

button was clicked

Slide 23

GridView (Button Fields) (Example) Set the CommandName for a

ButtonField, ImageButton, or others Handle the onRowCommand event for

the grid

Slide 24

GridView (Template Fields) Use to create custom content Create a TemplateField as a child of

the <Columns> collection So each TemplateField represents a

column Like the FormView we display different

templates based on the operating mode and current row

You have to perform the data binding

Slide 25

GridView (Template Fields) HeaderTemlate: rendered in the first row ItemTemplate: the default rendering EditItemTemplate: the row being edited FooterTemplate: the footer row

Slide 26

GridView (Template Fields)

Slide 27

GridView (Sorting Columns) Simply put, you set the AllowSorting

property to true The underlying data source handles the

sorting The column header appears as a link

button Set the SortDirection property to Ascending or Descending

For each bound field, set the SortExpression attribute to the field or expression that will be evaluated

Slide 28

GridView (Paging 1) Paging provides the facility that enables

the DataSet to be displayed in pages having a fixed length This keeps the Web page from getting too

long Reduces page size thereby improving

download times

Slide 29

GridView (Paging) AllowPaging (false) – controls whether data

appears on multiple pages PageSize - defines the number of items

(rows) per page The above are both members of the grid

itself

PageIndex – gets the current page being displayed

PageCount – gets the number of pages available

Slide 30

GridView (Paging Events) PageIndexChanging fires before the PageIndex property is changed The event argument is of type GridViewPageEventArgs

The event can be cancelled And PageIndexChanged fires after the

current page index is changed Setting the PageIndex property does not

fire these events

Slide 31

GridView (PagerSettings) The PagerSettings object allows you to use

predefined display modes Modes (NextPrevious, NextPreviousFirstLast, Numeric, NumericFirstLast)

Non-numeric button customization (FirstPageText, PreviousPageText, NextPageText, LastPageText

Or Images (FirstPageImageURL, PreviousPageImageURL, NextPageImageURL, LastPageImageURL)

Slide 32

GridView (Custom Paging) Custom paging is supported along with

custom pager styles AllowCustomPaging – defines a custom

pager

Slide 33

GridView (Programmatically) We can work with

The current / selected row Enumerate rows

Slide 34

GridView (Programmatically) SelectedRow – a GridViewRow object

representing the selected row SelectedIndex – 0-based index of the

selected (visible) row SelectedValue – The value of the

primary key for the selected record (row)

Slide 35

GridView (Rows) Rows – returns a collection of the

currently displayed items (from the current page)

DataKeyNames – An array of primary key fields (It’s an array because multiple fields might comprise a key)

SelectedDataKey – Returns the DataKey of the selected record

DataKeys – A collection of DataKey objects containing the primary key values

Slide 36

GridView (Events) There are a slew of these

Slide 37

GridView (Events - RowCommand) The event fires whenever a button is

clicked in the GridView If the command name is “Cancel”,

“Delete”, “Edit”, “Page”, “Select”, “Sort”, or “Update” default handing is performed

Otherwise it’s up to you The event argument has a data type of GridViewCommandEventArgs Read the value of the CommandName

property

Slide 38

GridView (Events - RowCommand)

protected void gvExample1_RowCommand(object sender, GridViewCommandEventArgs e) { Response.Write("RowCommand Fired <br>"); Response.Write("e.CommandName " + e.CommandName + " <br /> <br />"); }

Slide 39

GridView (Events - RowCommand) Member of the Row property

RowType tells you the type of row DataRow, Footer, Header, EmptyDataRow, Pager,Separator

Cells provides a reference to a collection of TableCell objects (cells in the row)

Slide 40

GridView (Events - RowCreated) RowCreated fires each time a row is

created Fires for header and footer rows too Use the change the default generated

content of a row The data type of the event argument is GridViewRowEventArgs The Row property provides a reference to

the row

Slide 41

GridView (Selecting) SelectedIndexChanging fires when the

user clicks the Select button to select a row The new row is not yet selected The data type of the event argument is GridViewSelectEventArgs

The event argument’s NewSelectedIndex property contains the index of the row that will be selected

Set the Cancel property to true to can this event and subsequent events

Slide 42

GridView (Selecting) SelectedIndexChanged fires when the

user selects a different record (when the Select button is clicked)

At this point The SelectedIndex property contains the

0-based index of the (Visible) row selected this is important when paging is enabled

The SelectedValue property contains the value of the key field for the selected record

Slide 43

Editing Data (Introduction) The GridView is an editable control Make sure that the data source

(SqlDataSource) is configured to perform editing

Set the AutoGenerateEditButton property to true Click Edit to begin editing Click Update or cancel to record or

abandon the changes (the process is automatic)

Slide 44

GridView (Editing) RowCancellingEdit – fires when the

user clicks the Cancel button to stop editing the current row

RowUpdating and RowUpdated fire before and after a row is updated (when the Update button is clicked

Slide 45

Editing Data (Validation) Handle the RowUpdating

Validate the current row, as necessary Cancel the event, as necessary

e.Cancel=True or RowUpdated events if (e.Exception != null) { Response.Write("Cannot update"); e.ExceptionHandled = true }

Slide 46

Editing Data (RowUpdating) The event fires before the data is

committed to the database The event argument is GridViewUpdateEventArgs e.NewValues contains a dictionary

collection of key / value pairs. See the example on the following slide

Slide 47

Editing Data (RowUpdating) Exampleforeach (DictionaryEntry entry in e.NewValues){ Response.Write(e.NewValues[entry.Key]); Response.Write(e.NewValues[entry.Value]);}

Slide 48

Deleting Data (Introduction) Set the AutoGenerateDeleteButton

property to true A Delete button will appear in the grid

The data source must be configured to perform deletion

Again, the rest of the process is automatic

Handle RowDeleted and RowDeleting, as necessary

Slide 49

Inserting Records The GridView does not support record

insertion against a data source Typically, we use the FormView or DetailsView controls (discussed in subsequent chapters)

We can fix this with a little trick

Slide 50

Empty Grids If the GridView is empty, nothing

appears Set the EmptyDataTemplate to display

something when the data source contains no rows

Example:<EmptyDataTemplate> <asp:Label runat="server" Text="No data"></asp:Label>

</EmptyDataTemplate>

Slide 51

Configuring GridView Columns GridView columns appear in the order

that they appear in the <columns> collection for the grid

Programmatically, you reference the grid columns using the Columns collection The data type of each column is DataControlField