![](\"wp-content\/uploads\/2011\/200606070926516478.gif\")
[\/align]\n[b][color=Orange]Introduction[\/color][\/b]
\nHi, this is my first attempt at an article for CodeProject. I’ve used enough of other peoples so thought I better give something back. I’ve been developing websites for the last 6 years or so doing everything from PHP to C#.NET. For other examples please visit the development section on http:\/\/www.chemlock.co.uk\/. The project below is ASP.NET in C#. There was a need to display a simple bar per row in the datagrid to quickly illustrate an amount. This is very simple so I’ve set it to beginner level. Any questions please mail me.
\n[b]Graph display in datagrids[\/b]
\nThis morning I had the pleasure of re-writing a consultants code into something which worked and was open to development. For some strange reason this guy wrote all his code in classic ASP hard coding the database connection strings into a file and creating all the SQL on the fly. This was slow. Not only because it was Classic ASP and the SQL strings were constantly changing so the server couldn\u2019t cache the query but because it was badly written. One page got passed two variables in the http request stream and then used those variables to pull the same two values back from the database. Pointless and time consuming. Anyway the results where thrown into tables and one column on all the tables was a graph to show the amount of time booked to a project per week. This was out of a maximum of 60 hours (Don\u2019t know which fool is doing those hours). My friend the highly paid consultant had done this by making a table within a table cell with a width equal to the amount of hours. This meant that if you have booked 34 hours to a project the graph would be 34 pixels long.
\nI was asked to fix some of the SQL as the results where not very relevant for one of the reports but thought it would be a fairly quick and simple job to simply move the lot to .Net and Stored Procs. So here is my quick and dirty guide to creating a graph column in a datagrid. It\u2019s all nice and basic(C# actually), certainly not rocket science.
\nFirst of all Create a nice clean WebForm Here is the code behind.
\n[code=c#]private void Page_Load(object sender, System.EventArgs e)
\n{
\nif(!IsPostBack)
\n{
\nif(Request[\u201dEmployeeNo\u201d] != null)
\n{
\nDb db = new Db();
\nArrayList parameters = new ArrayList();
\nparameters.Add(new DbParameter(\u201d@EmployeeNo\u201d,DbType.String,10,\u201dEmployeeNo\u201d,Request[\u201dEmployeeNo\u201d].ToString()));
\nSession[\u201ddataset\u201d] = db.GetDataSet(\u201dGetEmployeeBookings\u201d,parameters);
\nSession[\u201dSortOn\u201d] = \u201cEndDate\u201d;
\nSession[\u201dSortDirection\u201d] = \u201d DESC\u201d;
\n}
\n}
\nBindGrid();
\n} [\/code]
\nOk so here notice that I\u2019m using a class called DB to get at my database and create a dataset. Use what you like here the main point is to end up with a dataset of your results. I also set up initial Sort Parameters for my datagrid and the initial direction they will be sorted in. Every post back gets the grid bound with data but only the initial pass gets the data from the Database. Obviously if this data was likely to be changed as a result of any page action I would move this database call to a seperate methods but as it\u2019s a static report and I\u2019m in a hurry I\u2019ve left it as I initially did it.
\n[code=c#]private void BindGrid()
\n{
\nif (Session[\u201ddataset\u201d] != null)
\n{
\nDataTable dt = ((DataSet)Session[\u201ddataset\u201d]).Tables[0];
\nDataView dv = dt.DefaultView;
\ndv.Sort = Session[\u201dSortOn\u201d].ToString() + Session[\u201dSortDirection\u201d].ToString();
\nthis.DataGrid1.DataSource = dv;
\nthis.DataGrid1.DataBind();
\n} [\/code]
\nHere is the BindGrid method. It first checks that something exists in the Session variable. If it does it extracts it creates a dataview sorted correctly and then binds that to our DataGrid control. Notice how very lazy I\u2019ve been with my DataGrid naming. Remeber this was quick and dirty.
\n[code=c#]private void DataGrid1_SortCommand(object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
\n{
\nSession[\u201dSortOn\u201d] = e.SortExpression.ToString();
\nif (Session[\u201dSortDirection\u201d] == null || Session[\u201dSortDirection\u201d].ToString() == \u201d ASC\u201d)
\n{
\nSession[\u201dSortDirection\u201d] = \u201d DESC\u201d;
\n}
\nelse
\n{
\nSession[\u201dSortDirection\u201d] = \u201d ASC\u201d;
\n}
\nthis.DataGrid1.CurrentPageIndex = 0;
\nBindGrid();
\n} [\/code]
\nHere is a nice and standard Sort Event Method. Basically if you select a column heading that has already been selected it will change the direction of that column. Any other column and the grid gets sorted on the new column heading.
\n[code=c#]private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
\nif(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
\n{
\ndecimal hours = decimal.Parse(e.Item.Cells[3].Text);
\ndecimal percentage = (100m \/ 60m) * hours;
\ne.Item.Cells[4].Text = \u201c<\/p>\n