Skip to main content

70-562 GridView Part 2

ADDING A HYPERLINK TO EACH ITEM OF A GIVEN COLUMN, HYPERLINK SENDING US TO A PAGE WITH MORE DETAILS
Create a new target page that will provide extra details when the user clicks the hyperlink in the original gridview.
First thing to do is to add a DataSource with a defautl WHERE clause that takes a value from the query string. It will come from REquest.QueryString("YourColumnName"); Now test that query in the designer before closing it.

Add a hyperlink to the orignal gridview. You can add a new column, select the grid, go to it's smart tag and click add new column. Choose teh type from the ddl, choose the header text, for hyperlink text select the field you want displayed. Typicaly you don't need to comfigure the HyperLink text other than the where it gets it's data(no formating). The formating you need to configure is the one in the panel below (Hyperlink URL) because you're going to be passing this in the query string to be used to fill the grid of the target page. for example Customers.aspx?CustomerID={0}.
You want to position your new column in the grid to replace the existing one, some from the SmartTag of the GridView, click Edit Column, All fields, and move the new filed up in the list, remove the old one.
Then save and browse to make sure it works. If the target grid isn't showing the values, check Edit Columns, the selected fields list should have values in it, those are the fields displayed in this grid.

What if you wanted to allow your user to edit this url field? you need to go into Edit Columns, click the column in the selected fields list, and click the hyperlink to convert the column into a template field. Edit the template, from this edit template mode, select teh field you want to edit and from the "Display"Drop down box, then pick wich template you want to change, in this case the EditItemTemplate, the drag drop a textbox control in the cell of this column.

You might wonder why isn't my new hyperlink column sortable? If you go to Edit Column, select the field in the selected field list, and cehck the TemplateField properties to the first, in the behavior section, you'll notice there's no SortExpression set, now what would a sort expression look like? just pick a column from the drop down list.



HANDLE ATTEMPS TO DELETE ROWS THAT HAVE EXIsTING RELATIONS WITH OTHER TABLES (FOREING KEYS... REFERENTIAL ENTEGRITY)
Add the delete link, from the smartTag of the gridview, don't use the delete textbox, as this one has a predefined behavior, you want to go in the available fields section, the CommandField object and select the

delete command and add it tot he selected fields. Now you have access to it's properties in the list on the right, the you will convert it to a Template Fieild. Now that you have the template field, in the EditTEmpalte mode, select the default hyperlink that is used for this Delete column, and find the property, OnClientClick, you can enter some JavaScript in there return confirm("Delete row?"), then End template editing. Now test your new javascript message box.

Now you get an exception for the referential integrity, first thing would be to catch the exception and display a message in a label on the page.
Add the label and in the page_load event, set the text to empty to make sure it's reseted every postbacks.

The usefull event here is the RowDeleting even of the GridView. If it failed you want to trap that, and after having it handled, you need to set the exceptionHandled property of the GridViewDeletedEventArgs to true.

So you check if there is an exception by checking the e.Exception not equal null, if it's not null post it in the label and put ExceptionHandled to true.
Note: cleaning other tables for the referencial integetrity should be already configured on the database, on that specific row to allow cleaning up anyone referencing this row.

ALLOWING THE USER TO ADD A ROW
One way to achieve this is to add a simple bound control, like the FormView or DetailsView, that allow to work on one row at a time. Add some basic validation to the fields and make sure the postback event refreshes the grid.DataBind().

Comments

Post a Comment

Popular posts from this blog

React JS Patterns

React JS is always evolving, and evolving quickly. These evolutions can be very significant ones, for example, the addition of hooks. React has a lot of code patterns, often these patterns are motivated by the DRY and/or the open-close principle. These patterns sometimes come in to replace a previous one, yet the previous ones still stays in use, as a consequence, the list of patterns keep growing. The goal of the next few posts will be to list the patterns commonly used in React JS developpement. Some patterns are more specific to JSX and I will start with these, and maybe add patterns specific to Redux.
4 comments
Read more

Rxjs Forkjoin vs Zip

These Rxjs combination operators are handy to make Rest calls in parallel and combine their results. Both take n observables and will return the results, with the difference that forkJoin will complete even if one of the nested observables errors of completes.
Post a Comment
Read more

Object.create vs. Object.Assign

The two functions return a new Object but with a difference. Object.assign will go through an enumerable and copy it's properties. Object.create will create a new empty object but link it's proto chain to the old object. One way to view this is with JSON.stringify(newCreatedObject) this would return an empty object, since all the properties are not part of the object's own properties, but inherited through prototype inheritance. In both case, the advantage is it allows to extended existing objects without modifying the original. This is particularly important when receiving arguments from a caller, in this case it's better to use these methods instead of modifying the caller's object since he might have planned to use it again later, expecting it to be in it's original state.
Post a Comment
Read more