1 / 42

Creating Bindable Grids of Data

Creating Bindable Grids of Data. Lecture Overview. Detailed discussion of using the GridView. 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!

phil
Télécharger la présentation

Creating Bindable Grids of Data

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related