Thursday, 15 May 2008

Programmatically Creating GridView with Template Columns ASP.Net C#.Net

So making a grid view is easy, the designer in Visual Studio is really easy to use to set up columns and bind to a data source. However that's only useful if you know what columns you want and if you know exactly where and when you want to display this data.

What if some of these details are built up dynamically through code while your site is running. I had a situation where I wanted to build up multiple grid views pro grammatically as a result of a user interaction, and I didn't just want normal columns of text data, my grid view required template columns. So how do you create grid view template columns through your server side code?


// C#.Net code to Create Grid View //
GridView newGrid = new GridView();

TemplateField template = new TemplateField();
template.ItemTemplate = new GridViewTemplate(ListItemType.Item, columnName);

newGrid.Columns.Add(template);

newGrid.DataSource = 'Your Data Source Object';
newGrid.DataBind();


The above code will create a Grid View control, this can already exist on your page if you want or as I have done you can create it in code. It maybe best to call this code from the Page_Load method, but you can experiment with that.

Then we will create a Template column and add it to the Grid View, you can create as many of these as you require columns. The code will then bind a Data Source to your Grid View, how the values of that Data Source are displayed is handled in the code below.


Below is the Class code for a GridViewTemplate.



public class GridViewTemplate : System.Web.UI.Page, ITemplate
{
ListItemType _templateType;
string _columnName;


public GridViewTemplate(ListItemType type, string columnName)
{
_templateType = type;
_groupName = columnName;
}


public void InstantiateIn(System.Web.UI.Control container)
{

switch (_templateType)
{

case ListItemType.Header:

break;

case ListItemType.Item:

Literal lc = new Literal();

lc.DataBinding += new EventHandler(this.lc_DataBinding);

container.Controls.Add(lc);

break;

case ListItemType.EditItem:

break;

case ListItemType.Footer:

break;

}
}


private void lc_DataBinding(Object sender, EventArgs e)
{

Literal lc = (Literal)sender;

GridViewRow row = (GridViewRow)lc.NamingContainer;

string propertyValue =
DataBinder.Eval(row.DataItem, "PropertyName").ToString();

lc.Text = propertyValue;

}
}




The GridViewTemplate will set up the basics of your template column. You can set the Header, Item, Footer etc.. and add controls to them just as you could add controls through the designer.

You can then set up Data Binding to these controls, in the Data Binding method you will then pass in the name of the property from your Data Source you want to display the value for in that control, eg. "PropertyName".

Hope this is a useful basic reference for this, hopefully from this you can easily figure out even more complex things you can do with the Grid View.

Wednesday, 30 April 2008

A nice ticking clock for your asp.net webpage

I looked around for ages to get a ticking clock on my webpage and couldn't find one that would work in both IE and Firefox. Lots of javascripts sites and lots of not great scripts for a ticking clock.

However I found this site and implemented this solution really quickly and easily.

Dynamic Drive Ticking Clock

Great, have fun.

IE6, CSS Debugging Issues

Since today was spent debugging a css issue in IE6 I would like to post some solutions and development tools that are useful for this sort of thing.

Firstly the main issue that I seems to have was that images inside a table cell left a white space gap of about 3 pixels between bottom of the image and the bottom of the table cell.

The problem was that the vertical-align of the image in IE6 was defaulting to baseline, which apparently means its aligned vertically to the baseline of the text, meaning 3 pixel gap is left to accomodate the trailing tails og letters such as lower case g and y.

To fix this you must vertical-align the image using vertical-align: bottom;

While trying to debug this issue I found two very useful tools. In Firefox you can download the addon, FireBug, that will let you debug a webpage. There are also tools identical to this for IE6 and IE7 which are more handy because in my experience its IE that has more trouble rendering a web page correctly.

IE Developer ToolBar

IE DebugBar

Monday, 3 March 2008

using .Net ToString() to format currency values

A nice little bit of code to help display decimal values as currency and using the ever so helpful ToString() method. All you do is add in some format info as show below to tell it to format the string as a currency.


decimal myMoney = 142.00;
string formattedString = myMoney.ToString("c0");


It will use the CurrentInfo property of System.Globalization.NumberFormatInfo the localization information to work out what currency to use. So for me the formatted string would be £142. The zero in the format string sets the number of decimal places to use.

To convert this value back to a decimal you can use this code below.


decimal myMoney = Decimal.Parse(formattedString , NumberStyles.Currency);


Just to be safe wrap this in a try catch block to catch System.FormatException errors which means that someone entered a value using the wrong currency type. SO if the CurrentInfo says the local currency should be US dollars $142 and someone uses pounds £142 instead it will complain.

Right cool, think that's just about that.

MPH.

Friday, 29 February 2008

GridView Select Rows Code 2.0

Simple link to a good post about how to make a Grid View row selectable without having a button at the end of each row, you can just click on the row to fire the onSelectedIndexChanging Event.

http://www.geekzilla.co.uk/

Linked Post written by : Paul Marshall

Here is a minor imporvement I made to the code written by Paul Marshall that just makes it easier to control the styling applied onMouseOver of the grid. I used it to change it so the whol row is highlighted rather than just underlining the text.

In GridView_RowDataBound I changed this bit of code to reference the my css file.

e.Row.Attributes["onmouseover"] ="this.style.cursor='hand';this.className='gridRollOver';";
e.Row.Attributes["onmouseout"] = "this.className='';";



A Belated Welcome to My New Blog

I created this new blog the other day when I realised I was starting to add lots of boring geeky programming stuff to my personal blog. The main problem with that is that my Wordpress blog isn't very customizable, the code quotes are crap and for some reason at the moment the edit tools are a bit broken.

So I decided to create a new blog just for all the boring coding tips and helpful hints I want to write about, mostly just as a place for me to collate stuff so I don't have to remember it in my head.

I was going to try a few different blog sites but Blogger appears to be really good and I quite like how customizable it is with so many templates and being able to edit the HTML directly for the template and CSS is much nicer than Wordpress so I'm just going to use this.

A link to my regular blog is in the side bar so I will still keep that going to write blog posts about general more interesting stuff than computer programming and save this bog just for the boring stuff.

MPH.

Wednesday, 27 February 2008

Find Good Free Blog Templates

I just created this blog today and have been playing around with the formatting of it. I want to get a clear, easy to read and well organized template. Below is a link to the best template site you will find with hundreds of Free Templates for many different blogs.

http://www.eblogtemplates.com/

Also some nice CSS code to add a shaded boxes around areas for code or quotes:


blockquote
{
margin:.75em 0;
border:1px solid #596;
border-width:1px 1px;
padding:5px 15px;
display: block;
background-color: #dedede;
}

code
{
font-family: Courier;
margin:.75em 0;
border:1px solid #596;
border-width:1px 1px;
padding:5px 15px;
display: block;
background-color: #dedede;
white-space: pre;
}