C1GridView: Working With C1HyperLinkField

C1GridView supports various types of Columns which can be customized according to User's need. In my previous blogs, I discussed how we can data bind a C1TemplateField at design time and at runtime. In this blog we discuss how to DataBind a C1HyperLinkField and show hyperlinks in the grid. For this blog implementation, C1GridView is bound to Categories table. Following properties have to be set for creating a C1HyperLinkField:

1. DataTextField property of C1HyperLinkField is bound to CategoryName field of the table. These values will be displayed as hyperlinks in the grid.
2. DataNavigateUrlFields property is set to the name of fields using which the URL will be generated. More than one field can be specified in this property.
3. On clicking the hyperlinked text in C1HyperLinkField, the page goes to the url as mentioned in the "DataNavigateUrlFormatString" property.

Following is the code implementation of C1GridView with a C1HyperLinkField. Here, "ItemStyle" property of the column is used to give blue color to the hyperlinked text. More customization can be done using this property.

<wijmo:C1HyperLinkField HeaderText="CategoryName" DataTextField="CategoryName"  
 DataNavigateUrlFields="CategoryID,CategoryName"  
 DataNavigateUrlFormatString="~/Default2.aspx?CategoryID={0}&CategoryName={1}"  
 Target="_self">  
 <ItemStyle ForeColor="Blue" />  
 </wijmo:C1HyperLinkField>

See the following screenshot of C1GridView with a C1HyperLinkField. Now clicking on a particular hyperlink redirects the current page to a new page with the values of CategoryID and CategoryName for that particular row as QueryString. These values can be accessed using QueryString collection of Request object. It can be done as follows:

string categoryID=Request.QueryString["CategoryID"];  
string categoryName=Request.QueryString["CategoryName"];  

Lets say, you want to show Product information based on the particular CategoryName that was clicked, it can be shown on the new page using the above values. Following is the Product Information displayed if I clicked Confections in the CategoryName field. That is it as far as the DataBinding is concerned. Next step is to customize the appearance of the Hyperlinks. Common way to recognize a HyperLink is its "BLUE" color. However Wijmo C1GridView applies its own CSS classes and color scheme is followed as per the theme. To overcome this, we can set the blue color using the ItemStyle property, and add the following css code in order for C1HyperLinkField to show the color as set in ItemStyle property. [css] [/css] Thats it.. We are done creating a HyperLink field for our C1GridView. :) Download Sample for complete implementation.