11.1 Introduction 11.2 The GridView 11.2.1 Automatically Generating Columns 11.2.2 Defining Columns 11.2.3 Configuring Columns 11.2.4 Generating Columns with Vis' 11.3 Formatting the GridView 11.4 Selecting a GridView Row 11.5 Editing with the GridView 11.6 Sorting and Paging in the GridView 11.8 The DetailsView and FormView 11.81 The DetailsView ! 11.82 The FormView Questions ! ual Studio 11.1 INTRODUCTION ASP.NET provides a wide variety of ri Under the Data tab of the Visual Studio, To Data tab that could be used to display data from a or XML file. The standard ASP.NET data presentation FormView, GridView and ListView. 11.2 THE GRIDVIEW ] ‘ch controls that can be bound to dai ‘olbox gives several controls under the data source, like a database controls are: DetailsView, ‘A recurring task in software development is to display tabular data. ASP.NET provides a number of tools for showing tabular data in a grid, including the GridView control. With the GridView control, you can display, edit, and delete data from many different kinds of data sources, including databases, XML files, and business objects that expose data.oo use the Gri Te ersnticall ae ca contro} Auto! bind to ang od 8 the follow; be select, Sr Page throy play data ms: control. Bh, edit, fl @ dati a gitionally, you can * nd delete g, jource control. lata aor control by doing n customize th, from a data source (iv pat © following © ape: g ° specifying custom columns oe ‘@rance and behaviour of the utilizing templates t style. 7 2 0 create 8. adding your own co, custom us, pandling events. de to the i aoe (Uipelenients: ¢ GridView control is the s, ity of the GridView control by jdisplays database re ach field in a column, “Cords o y Uccessor to th 7 to ina HTML renee control. The GridView with each record in a table row 1.2.1 Automatically Generating Columns qhe GridView AutoGenerateColumns pro; i fom a SQL data source automatically in a criaView. See al To display data in a GridView control : ® Configure the SQL data source control. Configure the GridView control by setting the Datasource ID property to the id of the SQL datasouce control. pee | The AutoGenerateColumns property of the GridView control is set to render each and every field in the data source such as a DataTable, as a column in the GridView control. To specify which column fields in the DataSource such as DataTable or DataSet appear in the GridView control, we set the AutoGenerateColumns property to ‘false’. The AutoGenerateColumas property of the GridView contro toolean value either ‘true’ or ‘false’. The following example demonstrates how we can generate a column in the for each field in the data source (DataTable). Note that we have set the to ‘true’. | " 10nF columns : © just ID. Here change th eet ea Here's a complet Pern text at the top of a (one pGridView ID = » © GridView deci with . eclaration jrecProducts SridView1" rin . MO ais dass yon gtoGenerateColumng = »pay it = "server" DataSourceID = columns> se"> vaspBoundField DataFicig "Pr a DataFielg = spec HeaderText = "ID" /> [> oe roductN; ” poe’? lame" HeaderText = "Product cesp:BoundField DataField = "yni¢ Price" HeaderText = "Price" /> explicitly defining the columns ha; : Ss You can easily fine-tune details by tweaking the Sones e You can hide columns os you do: @ You can see your columns in With automatically generated generic placeholder columns Several advantages : 01 eae order, column headings, and other s of your column object. n't want to show by removing the column ie design environment (in Visual Studio). columns, the GridView simply shows a few @ You can add extra columns to the e pee aagariay cate e mix for selecting, editing, and more. 11. when you explicitly declare a boun u d field, i her properties. Following table lists these Bieta eer rt} Property Description ‘DataField Identifies the field (by name) that you want to | display in this column. (DataFormatString Formats the field. This is useful for getting the right representation of numbers and dates. ApplyFormatInEditMode If true, the DataFormat string is used to format the value even when the value appears in a text box in edit mode. The default is false, which means the | underlying value will be used (such as 7845.02 instead of $7,845.02). | Sets the text in the header and footer region of the grid if this grid has a header (GridView. ShowHeader is true) and footer (GridView.ShowFooter is true). The header is most commonly used for a descriptive the footer can contain label such as the field name; a dynamically calculated value such as a summary. To show an image in the header instead of text, | HeaderlmageUrl property. FooterText, HeaderText, and HeaderlmageUr1 set theAdvanced Web Development (T.Y-B.Se.~LP (coq 136 ReadOnly InsertVisible alue for this coly, it prevents the v: : mn 2 ne cee “n edit mode. No edit contro} fon provided Pemary key fields are often read-only be i alue for this coh If true, it prevents the v lumn fp being set in insert mode. If you want a co), value to be set programmatically or baseq 4." Yefautt value defined in the database, you can u this feature. Visible ’t be visible in the Tifalse, the column won't be visi page no HTML will be rendered for it). This gives (era convenient way to programmatically hide oF sh ca specific columns, changing the overall view of the data. SortExpression Sorts your results based on one or more column ‘arn about sorting later in the “Sorting an You'll le z 1 Paging the GridView” section of this chapter, HtmlEncode Tf true (the default), all text will be HTML encoded jp prevent special characters from mangling the page You could disable HTML encoding if you want tg embed a working HTML tag (such as a hypertingy but this approach isn’t safe. It’s always better to use HTML encoding on all values and provide other functionality by reacting to GridView selection events. NullDisplayText Displays the text that will be shown for a null value, The default is an empty string, although you could change this to a hard-coded value, such as “not specified).” ConvertEmptyStringToNull If true, converts all empty strings to null values (and uses the NullDisplayText to display them). ControlStyle, HeaderStyle, FooterStyle, and ItemStyle Configures the appearance for just this column, overriding the styles for the row. You'll learn more about styles throughout this chapter. 11.2.4 Generating Columns with Visual Studio Add GridView Control to default.aspx page. In the Default.aspx Design view, click on the arrow beside the GridView and select “Edit Column:controls ” here we can si rrr from Set the inform, = PUowertide the default behay ation displa : rotead ‘aviour, letting Ved in each column us Set what each column displays gelect @ “BoundFie}g > gd the Bound, eaiiieul Sle to a list of pait the HeaderText to dig, Selected fields is BoundField to annie “Make” ay Next, repeating steps (2) t eating the Model, Sa Eee) add three more BoundField’s each rep (19 FORMATTING THE GRIDVIEW peesicaiconee ae several related tasks. First, you want to ensure that Bc , other number values are presented in the appropriate way. at 4 7 andle this job with the DataFormatString property. You hi yormatting Fields ‘To format the grid view you have to ensure that er values are in good format, Grid View has prope formatting. You can change colors, fonts, borders undField column provides a DataFormatString property that ers and dates using a format string. ler and format indicator, dates, currency and other rty "DataFormatString” to and alignment of grid. you can use sumbe apply Bach Bo ‘configure the numb Format strings are generally made up of a placehold shich are wrapped inside curly brackets, like this : {0:C} Here 0 shows the value that will be formatted and the letter indicates a peictermined format style, In this ease C means currency format which formats anumber as a dollar. :BoundField DataField="Price" HeaderTe: "(0:C}" HtmlEncode="false" /> w format strings. bs When you click a select button, the page is posted back and a series of steps unfolds. First, the GridView.SelectedindexChanging event fires, which you can intercept to cancel the operation. Next, the GridView.SelectedIndex property is adjusted to point to the selected row. ‘Finally, _ the GridView.SelectedIndexChanged event fires, which you can handle if you want to manually update other controls to reflect the new selection. When the page is rendered, the selected row is given the selected row style. Using a Data Field as a Select Button We can use an existing column into a link instead creating new. It allows users to select rows in a table by the unique ID value. We need to remove the dd Himm'ss (2003.0), “2]corres pe pied column ovr and a i) m field to the name dd xt of the field y ButtonFieia column, Then, set the pottonField Buttontypg » yp! Yt 19 tse itton” ‘On” DataTextPield « "ProductiD” /* ye adition to displaying a a & data, the GridView control supports an edit mode in s can change the joh USER : contents of an indi pa view cpg ay an Edit RANE ee row. You can configure the 5 splay i in eacl a i pottyye such as TextBox ae panera with Se ee aac on ate or SAVE button, and wher ckBox controls. The Edit button becomes 97 n users click it, the updated row is written bacle upe* data store. You can ad he e add edi ai ng any code iting capability to the GridView control without yere’s an example of a GridVis ieparidView ID = AEE that supports editing: asceProducts” oducts" runat = "server" DataSourceID = autoGenerateColumns = "False" ; : pen e" DataKeyNames = "ProductID"> And here's a revised data source control that can commit your changes * ‘ ‘The GridView will render the headers with clickable links. Also there is a simple way to unable sorting and paging. Paging and so data in a GridView that comes from a SqlDataSource is & breeze with ASP) DataSource that accesses the desired data 2.0. We need to start by adding a Sq) 5 Nest, add a GridView. The GridView's Smart Tag contains two checkboxes Enable Paging and Enable Sorting. To turn on sorting and/or paging, sim check the appropriate checkboxes as shown below. ser to reorder the results in Name column so it sorts »productName" HeaderText = "Produgeo jsing Sorting and select ror“ Pe: ion at th gbnablePersistedSelection prone cin ime You must simply set the erty true. Here, ASP. NET wil e o gelected item is identified py nt ena selected, even if it abbas data key. As a result, the selected item 8 to a new position in the GridView after 000 es Ae Scenario with an automatic paging feature: ne? Yo°g placed into a Datas, ® the full results are retrieved from the data ES SS SRG ge eae ea GridView, poe ch), and only a single b led into smaller groupings (for example, with 20 copies See Sete ‘age the paging. iS ‘Member ee eee ee Provides access to the Pager's settings. Specifies the active page's index. Fires after the selected page has been changed. Gets the number o} i : ff pages displayed within the ASPxGridView. ce ies Specifies the maximum number of rows that can be displayed on a page. Gets or sets a value specifying the vertical scrollbar's display mode. Specifies the scrollable area's height. Occur when one of the page selection elements fem icied) eijust) before) the | Pageindex is changed (PageIndexChanging) and just after (PagelndexChanged). ‘AllowPaging to true (which shows ow many rows are tomatic paging, you need to set itrols), and you need to set PageSize to determine h "GridView1" runat = “server” DataSourceID =