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 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

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 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 "); Response.Write("e.CommandName " + e.CommandName + " "); }

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 ) Example foreach (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:

Slide 51 Configuring GridView Columns GridView columns appear in the order that they appear in the collection for the grid Programmatically, you reference the grid columns using the Columns collection The data type of each column is DataControlField