Creating Bindable Grids of Data. Slide 2 Lecture Overview Detailed discussion of using the GridView.
-
date post
19-Dec-2015 -
Category
Documents
-
view
229 -
download
0
Transcript of 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 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 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 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 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 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 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>