Creating Bindable Grids of Data

1. Creating Bindable Grids of Data

2. Lecture Overview • Detailed discussion of using the GridView

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

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

5. Setting Column Properties (Illustration)

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

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

8. GridView (Binding) • DataSource and DataMember control define the control’s source of data • Or use the DataSourceID • The value of DataSourceID should be an AccessDataSource or other SqlDataSource

9. Columns • Columns – contains a reference to the control’s columns • We only use these then autogeneratecolumns is false • The data type of each column is DataGridColumn

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

11. GridView (Captions) • Caption – appears above the grid headers • CaptionAlign – controls the alignment of the caption • Captions can appear along the left, top, right, or bottom of the grid • ShowHeader and ShowFooter – display the header or footer • Note the caption appears in the header

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

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

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

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

16. 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)

17. GridView (Custom Paging) • Custom paging is supported along with custom pager styles • AllowCustomPaging – defines a custom pager

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

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

20. 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 • predefined commands (buttons) • Hyperlinks and images • Custom templates

21. GridView (Bound Fields) <asp:BoundFieldDataField="fldRecordNumber" HeaderText="fldRecordNumber" SortExpression="fldRecordNumber" /> • DataField corresponds to the underlying bound field • HeaderText contains the column header

22. GridView (Command Fields) • MSDN describes it as a special field to automatically perform inserting, updating, deleting • You could do the work by hand using a ButtonField • <asp:CommandFieldShowDeleteButton="True" ShowEditButton="True" ShowSelectButton="True" />

23. GridView (Button Fields) • Use to perform special tasks • Handle the RowCommand event to figure out which button was clicked • Use e.CommandName to figure out which button was clicked

24. GridView (Template Fields) • Use to create custom content • Create a TemplateField as a child of the <Columns> collection • Then create the child templates

25. GridView (Generating Buttons) • AutoGenerateColumns – if true, a column is created for each field in the data source • AutoGenerateSelectButton – Create a select button for each row • AutoGenerateDeleteButton – Create a delete button for each row • AutoGenerateEditButton – Create an edit button for each row

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

27. GridView (Rows) • 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

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

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

30. GridView(Events - RowCommand) • RowCreated fires each time a row is created • Fires for header and footer rows too • The data type of the event argument is GridViewRowEventArgs • The Row property provides a reference to the row

31. 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)

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

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

34. Editing Data (Introduction) • The GridView is an editable control • Make sure that the data source (AccessDataSource, 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)

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

36. 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 }

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

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

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

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

41. 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:Labelrunat="server" Text="No data"></asp:Label> </EmptyDataTemplate>

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