ASP.NET Hyperlink Grid California Irvine Developers
ASP.NET California Irvine Developers
1. Hyperlink Column: Grid . PropertyBuilder . Hyperlink
A. Text Field: The field.value to display in the column
1. (hint Text = Static text in column…all same)
B. URL Field: The field.value to pass in the hyperlink.
C. URL Format = PageName.aspx?Var={0} where 0 is the URL Field above
1. Var will hold the value in {0}…
2. How they hook together to jump to a detail a detail page
A. When you click on the hyperlink displayed in the Text Field
B. The Value from URL Field is inserted into the {0} location in the URL Format.
C. So when you click on a hyperlink you are sent to the page indicated along with the value you indicate
D. The Edit page opens and a select statement returning just one row from the ID passed by Request.QueryString(“ID”)
E. This allows you to pass the ID to a detail page for Editing.
3. Displaying the values on a detail page. (extra credit on homework)
A. Textboxes = easy! txtProductName.Text = dr(“ProductName”).ToString
B. Select List is tricky
C. Goal is to Set the SelectedIndex property to the field value
1. Old days…loop and check each item in the list until there was a match
2. Now use FindByValue to get the matching Item from the DataValue list.
3. ListItem = SelectList.Items.FindByValue(Value)
a) returns the list Item who’s value matches the value you sent it.
4. SelectList.SelectedIndex = SelectList.Items.IndexOf(ListItem)
a) Now you have the proper ListItem…this sets the index of selected index of the SelectList to the index of the ListItem you found.
5. Bottom Line…the SelectList displays your item.
4. Saving an Item from the detail page
A. In real life you have to validate your data before this but…..assuming that is done.
B. Goal is create the proper SQL Update statement.
1. String.Format(“update products set field = {0},field={1},etc
a) Where ID = Request.QueryString(“ID”)”
b) ,fieldOneValue, fieldTwoValue, etc
C. Converting the values for the database
1. Text Values
a) Book has you create a DataHandler.QuoteString(textvalue)
(1) 1) checks for embedded single quotes and replaces with two single quotes (ie O’Neil)
(2) 2) wraps all the text with single quotes.
2. SelectList.SelectedItem.Value are OK in native format
3. Check boxes use CInt(checkbox.Checked)
D. The entire string is passed to the DataHandler that will take care of the details of running the command.ExecuteNonQuery.
5. In place editing on the Grid
A. Concept: Property Builder: Button Column: Edit
1. User clicks on Edit
2. On PostBack, EditCommand captures which row was selected
3. grid.EditItemIndex = that row puts that row in edit mode.
4. The rebind the grid.
B. Default is bound column data is display in a text box (input)
C. EditMode replaces Edit hyperlink with Update Cancel
1. And replaces data with editable boxes.
D. Edit,Update,Cancel Button Column
1. Creates an “Edit” link (or Edit Button) Column
E. Clicking on this Triggers a PostBack and raises the EditCommand event
1. and returns which row has been clicked on. (.ItemIndex)
F. To trigger the edit set the EditItemIndex to the row selected
1. grid.EditItemIndex = e.Item.ItemIndex
G. Then Rebind the datasource to the grid
1. This is a postback…requires rebinding
6. SmartNavigation: IE5 or greater
A. Saves position on the page…and puts you back in same place
1. Note normal HTML behavior
B. Stops navigation flicker
C. In PageLoad Set Page.SmartNavigation=True
1. grid.EditItemIndex = e.Item.ItemIndex works perfect!
7. But what if not IE5 or greater
A. The user is placed at top of page…and your edit row may be down below screen! Bad
B. So we return only the row to be edited…not the entire list
C. Use a DataView and set it’s filter
1. dv.RowFilter = “ProductID=”&e.Item.Cells(2).Text
a) This says use the 3rd column (cells(2)) to filter row…the ID Column
2. and tell grid to edit it’s first (and only) row
a) grid.EditItemIndex=0
8. How do we determine if IE5 or greater?
A. Request.Browser.Browser =” IE”
B. Request.MajorVersion >= 5
C. And for testing only
1. and Not FORCEDOWNLEVL
2. Setting this constant to True in page load makes it act like before IE5
9. Add vs Edit (Update)
A. Session(“AddMode”)=T or F based upon clicking on the Add Link
B. If Add= True then use SQL Insert otherwise use SQL Update
10. Saving Data: Clicking on Update triggers the _UpdateCommand
A. Getting the data from the e.Item (the row being editing)
B. Each column = a cell so the third cell is e.Item.Cells(2)
C. If the data is just text…not any type of control
1. var = e.Item.Cells(2).Text
D. But any type of control requires…controls collection and conversion.
1. var = Ctype(e.Items.Cells(3).Controls(0),TextBox).Text
2. goes the first control in 4th column
3. converts the control into a textbox
4. returns the text property of the text box
E. Once you have all the data then
1. Check to see if AddMode is true
2. and issue the SQL Update or Insert
F. Reset the AddMode Flag
G. Turn off EditMode
1. grid.EditItemMode = -1
H. Rebind the grid.
11. Canceling the Update: Triggers the _CancelUpdate
A. Easy: Turn off Editmode
1. grid.EditItemMode = -1
2. Rebind the grid
12. Template Column
A. You define what control displays data in Item View and Edit View
B. Concept…in Property Builder you tell the grid which columns are template columns
C. In right click properties of the grid you can Edit the template columns
1. Easy….just select the column template to edit
D. Template Editor: ItemTemplate is normal display, EditItemTemplate is used during EditItemMode=True
1. Example…Hyperlink in normal but text box in edit
E. Binding the custom controls…use their databinding properties
1. Select the property to bind…usually text
2. DataBinder.Eval(Container, "DataItem.ProductName")
F. And modify the UpdateCommand
1. In most cases you now have two controls in the template…(0) is the first one for display and the (1) is used for edit.
2. Modify the UpdateCommand to get data from the edit (1) control.
13. Adding Rows.
A. To the grid adding and editing are the same.
B. Just bind the control to a blank datasource and set an “AddMode” flag so you know to use the Insert instead of Update SQL.
C. Create a blank table with same structure and append a new blank row
1. dt = ds.Tables(0).Clone
2. dr = dt.NewRow
3. dt.Rows.Add(dr)
D. Then tell the table to edit the first row (new row) and bind
1. grid.EditItemIndex = 0 ‘first row
2. grid.Datasource = dt
3. grid.DataBind
4. Session(“AddMode”)=True
14. Deleting Rows (Northwind will not let you delete due to referential integrity rules…but this is how you do it.
A. Clicking on the Delete calls _DeleteCommand
1. Get the ID of the one to delete with e.Item.Cells(2).text where the 3rd column has the ID in it.
2. Now build the SQL Statement
3. Delete from table where ID = var
4. Execute the SQL
B. Clean up
1. Turn off Editing
a) Grid.EditItemIndex = -1
b) Call gridload
1. Hyperlink Column: Grid . PropertyBuilder . Hyperlink
A. Text Field: The field.value to display in the column
1. (hint Text = Static text in column…all same)
B. URL Field: The field.value to pass in the hyperlink.
C. URL Format = PageName.aspx?Var={0} where 0 is the URL Field above
1. Var will hold the value in {0}…
2. How they hook together to jump to a detail a detail page
A. When you click on the hyperlink displayed in the Text Field
B. The Value from URL Field is inserted into the {0} location in the URL Format.
C. So when you click on a hyperlink you are sent to the page indicated along with the value you indicate
D. The Edit page opens and a select statement returning just one row from the ID passed by Request.QueryString(“ID”)
E. This allows you to pass the ID to a detail page for Editing.
3. Displaying the values on a detail page. (extra credit on homework)
A. Textboxes = easy! txtProductName.Text = dr(“ProductName”).ToString
B. Select List is tricky
C. Goal is to Set the SelectedIndex property to the field value
1. Old days…loop and check each item in the list until there was a match
2. Now use FindByValue to get the matching Item from the DataValue list.
3. ListItem = SelectList.Items.FindByValue(Value)
a) returns the list Item who’s value matches the value you sent it.
4. SelectList.SelectedIndex = SelectList.Items.IndexOf(ListItem)
a) Now you have the proper ListItem…this sets the index of selected index of the SelectList to the index of the ListItem you found.
5. Bottom Line…the SelectList displays your item.
4. Saving an Item from the detail page
A. In real life you have to validate your data before this but…..assuming that is done.
B. Goal is create the proper SQL Update statement.
1. String.Format(“update products set field = {0},field={1},etc
a) Where ID = Request.QueryString(“ID”)”
b) ,fieldOneValue, fieldTwoValue, etc
C. Converting the values for the database
1. Text Values
a) Book has you create a DataHandler.QuoteString(textvalue)
(1) 1) checks for embedded single quotes and replaces with two single quotes (ie O’Neil)
(2) 2) wraps all the text with single quotes.
2. SelectList.SelectedItem.Value are OK in native format
3. Check boxes use CInt(checkbox.Checked)
D. The entire string is passed to the DataHandler that will take care of the details of running the command.ExecuteNonQuery.
5. In place editing on the Grid
A. Concept: Property Builder: Button Column: Edit
1. User clicks on Edit
2. On PostBack, EditCommand captures which row was selected
3. grid.EditItemIndex = that row puts that row in edit mode.
4. The rebind the grid.
B. Default is bound column data is display in a text box (input)
C. EditMode replaces Edit hyperlink with Update Cancel
1. And replaces data with editable boxes.
D. Edit,Update,Cancel Button Column
1. Creates an “Edit” link (or Edit Button) Column
E. Clicking on this Triggers a PostBack and raises the EditCommand event
1. and returns which row has been clicked on. (.ItemIndex)
F. To trigger the edit set the EditItemIndex to the row selected
1. grid.EditItemIndex = e.Item.ItemIndex
G. Then Rebind the datasource to the grid
1. This is a postback…requires rebinding
6. SmartNavigation: IE5 or greater
A. Saves position on the page…and puts you back in same place
1. Note normal HTML behavior
B. Stops navigation flicker
C. In PageLoad Set Page.SmartNavigation=True
1. grid.EditItemIndex = e.Item.ItemIndex works perfect!
7. But what if not IE5 or greater
A. The user is placed at top of page…and your edit row may be down below screen! Bad
B. So we return only the row to be edited…not the entire list
C. Use a DataView and set it’s filter
1. dv.RowFilter = “ProductID=”&e.Item.Cells(2).Text
a) This says use the 3rd column (cells(2)) to filter row…the ID Column
2. and tell grid to edit it’s first (and only) row
a) grid.EditItemIndex=0
8. How do we determine if IE5 or greater?
A. Request.Browser.Browser =” IE”
B. Request.MajorVersion >= 5
C. And for testing only
1. and Not FORCEDOWNLEVL
2. Setting this constant to True in page load makes it act like before IE5
9. Add vs Edit (Update)
A. Session(“AddMode”)=T or F based upon clicking on the Add Link
B. If Add= True then use SQL Insert otherwise use SQL Update
10. Saving Data: Clicking on Update triggers the _UpdateCommand
A. Getting the data from the e.Item (the row being editing)
B. Each column = a cell so the third cell is e.Item.Cells(2)
C. If the data is just text…not any type of control
1. var = e.Item.Cells(2).Text
D. But any type of control requires…controls collection and conversion.
1. var = Ctype(e.Items.Cells(3).Controls(0),TextBox).Text
2. goes the first control in 4th column
3. converts the control into a textbox
4. returns the text property of the text box
E. Once you have all the data then
1. Check to see if AddMode is true
2. and issue the SQL Update or Insert
F. Reset the AddMode Flag
G. Turn off EditMode
1. grid.EditItemMode = -1
H. Rebind the grid.
11. Canceling the Update: Triggers the _CancelUpdate
A. Easy: Turn off Editmode
1. grid.EditItemMode = -1
2. Rebind the grid
12. Template Column
A. You define what control displays data in Item View and Edit View
B. Concept…in Property Builder you tell the grid which columns are template columns
C. In right click properties of the grid you can Edit the template columns
1. Easy….just select the column template to edit
D. Template Editor: ItemTemplate is normal display, EditItemTemplate is used during EditItemMode=True
1. Example…Hyperlink in normal but text box in edit
E. Binding the custom controls…use their databinding properties
1. Select the property to bind…usually text
2. DataBinder.Eval(Container, "DataItem.ProductName")
F. And modify the UpdateCommand
1. In most cases you now have two controls in the template…(0) is the first one for display and the (1) is used for edit.
2. Modify the UpdateCommand to get data from the edit (1) control.
13. Adding Rows.
A. To the grid adding and editing are the same.
B. Just bind the control to a blank datasource and set an “AddMode” flag so you know to use the Insert instead of Update SQL.
C. Create a blank table with same structure and append a new blank row
1. dt = ds.Tables(0).Clone
2. dr = dt.NewRow
3. dt.Rows.Add(dr)
D. Then tell the table to edit the first row (new row) and bind
1. grid.EditItemIndex = 0 ‘first row
2. grid.Datasource = dt
3. grid.DataBind
4. Session(“AddMode”)=True
14. Deleting Rows (Northwind will not let you delete due to referential integrity rules…but this is how you do it.
A. Clicking on the Delete calls _DeleteCommand
1. Get the ID of the one to delete with e.Item.Cells(2).text where the 3rd column has the ID in it.
2. Now build the SQL Statement
3. Delete from table where ID = var
4. Execute the SQL
B. Clean up
1. Turn off Editing
a) Grid.EditItemIndex = -1
b) Call gridload
posted by MJ at
10:35 PM
<< Home