Friday, May 28, 2010

How To Display HTML Code on a Website

I used to think that the PRE html tag would let you type anything and show it as it appears in your source, but it seems like all the PRE tag does is allow you to type spaces without the web browser ignoring it.

Anyways, you can show html code on your page without the browser attempting to render the html object, as shown in the picture below.



All you have to do is change all of your tags brackets from <> to &lt; and &gt;.
The letters lt and gt stand for less than and greater than, as in the convention use of the symbols. So, if you wanted to show someone how to make some text bold and some text italic underneath a picture, you could type:
&lt;div&gt;&lt;img src="selfportrait.jpg" alt="A Picture Of Me By Me!" /&gt;&lt;/div&gt;
&lt;div&gt;&lt;b&gt;My Self Portrait&lt;/b&gt; - &lt;i&gt;Created By Me&lt;/i&gt;&lt;/div&gt;

And they would see:
<div><img src="selfportrait.jpg" alt="A Picture Of Me By Me!" /></div>
<div><b>My Self Portrait</b> - <i>Created By Me</i></div>


Another little side note, in order to display &lt; without the browser turning it into a <, you can encode the ampersand the same way we encoded the bracket: &amp;lt;

How To Access the Data Key When Editing A GridView Row

Usually, when I create a GridView, I use an ID field that represents a unique ID tied to each row that I can use to update the database, as seen in the picture below.


However, I recently had a client request that I remove this field as it was confusing their customers. Fair enough. I removed the field, but now I had trouble updating or deleting the database. The field I was formerly using for my WHERE clause is no longer available. Luckily, I've fed the same ID field into the gridview as a Key:

<asp:GridView
ID="GridView1"
AutoGenerateColumns="false"
CellPadding="3"
DataKeyNames="orderID"
AllowSorting="true"
AutoGenerateSelectButton="true"
AutoGenerateEditButton="true"
AutoGenerateDeleteButton="true"
OnRowEditing="GridView1_RowEditing"
OnRowUpdating="GridView1_RowUpdating"
OnRowCancelingEdit="GridView1_RowCancelingEdit"
runat="server">


It would seem like common sense to be able to use the GridViewUpdateEventArgs parameter of my GridView1_RowUpdating Sub procedure a la e.Keys("orderID") to get the id of that particular row, but it return nothing. I'm not sure why this function of GridViewUpdateEventArgs exists, but I've never been able to get it to produce a value.

Exploring it a bit more, I looped through different arrays the GridView would provide and finally found the value using this method:

GridView1.DataKeys(e.RowIndex).Value

GridView1.DataKeys will provide a list of all the Keys of the gridview and feeding in the e.RowIndex will indicate that you want the key for the row you are editing.

Friday, May 21, 2010

How to pull a value from a Textbox within a CreateUserWizard control

Just a little quick and dirty note. I've created a CreateUserWizard with several extra controls such as a RadioButtonList, a CheckboxList, a Textbox or two, etc.

I found myself having trouble in pulling the values from those fields in order to properly configure the new user's profile, until I finally figured this one out.

With a control called MyCustomTextbox in a CreateUserWizard called CreateUserWizard1, I can pull the value this way:

CType(CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("MyCustomTextbox"), TextBox).Text

Wednesday, May 5, 2010

How To Sort With a Custom GridView ItemTemplate

I've been playing around a lot today with the GridView control and wanted to try to use it as a listing tool to show results from a search.

I would prefer to display the results in a stylized panel rather than the usual spreadsheet format. To accomplish this, I can use the <asp:TemplateField> column object and build any kind of HTML my heart desires:

<asp:TemplateField>
<ItemTemplate>
<div style="background-color: #e4e4e4; color: #303030; padding: 10px;">
<div>
<%#Eval("row_image")%>
</div>
<div>
<%#Eval("row_name")%>
</div>
<div>
<%#Eval("row_description")%>
</div>
<div>
<%#Eval("row_priceRange")%>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>


Now, I want to use the GridView control's Sorting feature that is usually handled by the HeaderText. I want to allow users to sort by Name, Description and Price Range. I can create a a column for each of these fields that will also create HeaderText that I can then use for the SortExpression value:
<asp:TemplateField HeaderText="Name" SortExpression="row_name" />
<asp:TemplateField HeaderText="Description" SortExpression="row_description" />
<asp:TemplateField HeaderText="Price Range" SortExpression="row_priceRange" />

I used the TemplateField control rather than the BoundField so that I wouldn't actually populate any data into the field. It's just a header and a blank cell with the width of the HeaderText. This will create a lot of empty space to the right of my GridView which I don't want, plus the clickable Headers are way to the right of the GridView itself.

A little bit of CSS easily fixed the issue. I'll set my CssClass of the GridView to CssClass="gv_list" and add the following css structure:
.gv_list th {
float: left;
}

Now, I've got three links at the top of my GridView that I can use for sorting the content either Ascendingly or Descendingly. Just to make sure all my site visitors understand what the links are for, I'll add some HeaderText to my first column (with all the divs) HeaderText="Sort By" and we are golden.


Getting rid of the top and bottom border on the GridView in FireFox

You'll soon find that I'm not one of those developers who praises FireFox and bashes Internet Explorer. I've always developed for IE since it has long been the most used browser; but within recent history, the red fox has snuck up and become the most used browser on the market.

By default, FireFox adds a border at the top and bottom of GridView cells.


Try all the CSS you want, but you won't be able to get rid of these cursed little lines. It is actually a setting in the GridView control itself. All you need to do is set GridLines="None" and the lines disappear.

Just that easy!