Using WebProgressBar inside WebDataGrid templates to display the values

Before You Begin

WebProgressBar™ can easily be placed in WebDataGrid™ templates to visually display the value of the cells in the grid.

What You Will Accomplish

You will learn how to use WebProgressBar inside WebDataGrid templates to display the cell value of the grid.

Follow these Steps

From the Visual Studio™ Toolbox, drag and drop a ScriptManager component and a WebDataGrid control onto the form.
Add the following code to manually bind data to WebDataGrid in the Page_Load event.

In Visual Basic:

        Dim dt As New DataTable()
        dt.Columns.Add("Column 1", Type.[GetType]("System.Double"))
        dt.Columns.Add("Column 2")
        dt.Columns.Add("Column 3")
        dt.Columns.Add("Column 4")
        For i As Integer = 1 To 10
            Dim dr As DataRow = dt.NewRow()
            dr(0) = i
            dr(1) = DateTime.Today.AddDays(i)
            dr(2) = "Test " & i.ToString()
            dr(3) = (i Mod 2 = 0)
            dt.Rows.Add(dr)
        Next
        Me.WebDataGrid1.DataSource = dt
        Me.WebDataGrid1.DataBind()

In C#:

 DataTable dt = new DataTable();
        dt.Columns.Add("Column 1", Type.GetType("System.Double"));
        dt.Columns.Add("Column 2");
        dt.Columns.Add("Column 3");
        dt.Columns.Add("Column 4");
        for (int i = 1; i $$<=$$ 10; i++)
        {
            DataRow dr = dt.NewRow();
            dr[0] = i;
            dr[1] = DateTime.Today.AddDays(i);
            dr[2] = "Test " + i.ToString();
            dr[3] = (i % 2 == 0);
            dt.Rows.Add(dr);
        }
        this.WebDataGrid1.DataSource = dt;
        this.WebDataGrid1.DataBind();

At this point, the WebDataGrid looks similar to the following image with data:

$images\WebProgressBar Using WebProgressBar as an Editor Control in WebDataGrid 02.png$

Stop the project and then click Edit Columns from the smart tag of the WebDataGrid to add a templated column. This opens the WebDataGrid Designer.
Select TemplateField from the Available Fields and click the Add Field button to add a templated column.
Select the added field from the Selected Fields area and set the Key property to “WPB_Template” and Header Text to “WPB”.
Click Apply and OK to close the WebDataGrid Designer.
In the property window, set the EnableRelativeLayout property of the WebDataGrid to True , so that the WebProgressBar will not overflow the grid.
Click Edit Templates from the WebDataGrid smart tag to open the grid in template editing mode.
Select WPB_Template from the drop-down list to edit the template.
In the Item Template area, drag and drop a WebProgressBar control and set its Maximum property to 10 using the property window.
Click End Template Editing to complete the template editing.
In the ASPX markup source, set the Value property of the WebProgressBar to the cell value of the Column1 by using the DataBinder.Eval method.