• Choose a category
• All
• Classic-Fiction

var labelCell = CreateLabelCell(item);

var valueCell = CreateValueCell(item);

// Add the row to the table

t.Rows.Add(item);

// Handle the data object binding

if (useDataSource)

{

// Get the data source object

item.DataItem = dataItem;

// Data bind the team labels

BindLabelCell(labelCell, dataItem);

BindValueCell(valueCell, dataItem);

}

// Return the fully configured row item

return item;

}

CreateLabelCell and CreateValueCell add cells to the table row. Here is their implementation:

private TableCell CreateLabelCell(BarChartItem item)

{

// Create and add the cell

var cell = new TableCell();

item.Cells.Add(cell);

return cell;

}

private TableCell CreateValueCell(BarChartItem item)

{

// Create and add the cell

var cell = new TableCell();

item.Cells.Add(cell);

// Add the internal labels

var lblGraph = new Label();

var lblText = new Label();

cell.Controls.Add(lblGraph);

cell.Controls.Add(new LiteralControl("
"));

cell.Controls.Add(lblText);

return cell;

}

The colored bar is represented with a label whose width is a percentage of the maximum value possible on the chart.

As you can see in the code of CreateBarChartItem, an if statement separates the creation of required child controls from the data binding. If the method is working in binding mode, the DataItem property is set on each bar chart item and the following two methods are called to add data to the child controls of the BarChart control:

private void BindLabelCell(TableCell cell, object dataItem)

{

if (!String.IsNullOrEmpty(DataTextField))

{

string txt = DataBinder.GetPropertyValue(

dataItem, DataTextField, DataTextFormatString);

cell.Text = txt;

}

}

private void BindValueCell(TableCell cell, object dataItem)

{

// Bind the label for the graph

var lblGraph = (Label) cell.Controls[0];

object o = null;

if (!String.IsNullOrEmpty(DataValueField))

o = DataBinder.GetPropertyValue(dataItem, DataValueField);

else

return;

var val = Convert.ToSingle(o);

float valueToRepresent = 100 * val / Maximum;

lblGraph.Width = Unit.Percentage(valueToRepresent);

// Bind the label for the text

var lblText = (Label) cell.Controls[2];

lblText.Text = DataBinder.GetPropertyValue(

dataItem, DataValueField, DataValueFormatString);

}

The data-binding process works in a way that is no different from what you saw earlier for other types of data-bound controls. The trickiest part here is the calculation of the width of the label that, when properly styled, generates the horizontal bar.

Note

As you can see, no style properties are assigned when the control hierarchy is being built. Just as for other data-bound controls, style attributes are applied later in the control life cycle in the Render method, immediately before generating the control’s markup.

Events of the BarChart Control

The BarChart control also features a couple of events: BarChartCreated and BarChartDataBound. It is not coincidental that these two events mimic analogous events on the DataGrid control. Although far simpler, the BarChart is a control designed along the same guidelines that inspired the creation of the DataGrid control:

public event EventHandler BarChartItemCreated;

public event EventHandler BarChartItemDataBound;

protected virtual void OnBarChartCreated(BarChartItemEventArgs e)

{

if (BarChartItemCreated != null)

BarChartItemCreated(this, e);

}

protected virtual void OnBarChartItemDataBound(BarChartItemEventArgs e)

{

if (BarChartItemDataBound != null)

BarChartItemDataBound(this, e);

}

The BarChartItemCreated event is fired whenever a new table row is added to represent a bar. The BarChartItemDataBound event fires when a newly added table row is bound to its data. The former event fires regardless of the working mode of the control. The latter fires only when the control is created in binding mode.

The data carried out with the event is grouped in the BarChartItemEventArgs class:

public class BarChartItemEventArgs : EventArgs

{

private BarChartItem _item;

public