Link to home
Start Free TrialLog in
Avatar of Brian
BrianFlag for United States of America

asked on

GridView Control with TemplateField

Hello Experts,

I would like to display an image with a green check if a value for a field is equl to 1 and a red x image if that same value for a field is equal to 0. I have all the code getting performed on Page_Load but not sure how to add the image to the GridView control as a TemplateField.

The code attached is what i'm using to check agains the fields in the DB. I just need to know how I can place an image within the GridView and how to call that image from the GridView into the code attached.

protected void CompletedSections()
    {
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["WellnessTracker"].ConnectionString);

        SqlCommand cmd = new SqlCommand();
        cmd.CommandText = "RetrieveCompletedSections";
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Connection = conn;

        DataTable dtCompletedSections = new DataTable();

        SqlDataAdapter adp = new SqlDataAdapter();

        try
        {
            conn.Open();

            adp.SelectCommand = cmd;
            adp.Fill(dtCompletedSections);

            DataRow data = dtCompletedSections.Rows[0];

            string GreenCheck = "../../img/GreenCheckOnly.png";
            string RedX = "../../img/RedXOnly.png";

            if (data["ap_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }
            if (data["ghpone_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }
            if (data["ghpthree_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }
            if (data["ghptwo_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }
            if (data["wp_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }
            if (data["phs_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }
            if (data["sha_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }
            if (data["phy_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }

            gv_CompletedSections.DataSource = dtCompletedSections;
            gv_CompletedSections.DataBind();
        }

        catch (Exception ex)
        {
            ex.Message.ToString();
        }

        finally
        {
            conn.Close();
        }
    }

Open in new window

Avatar of Bob Learned
Bob Learned
Flag of United States of America image

My usual approach there was to apply a different CSS style in the GridView_RowDataBound, after checking the value of a cell...
Avatar of Brian

ASKER

Ok, that would work for me instead of using an image. Can you tell me how I would do that in my GridView and what I would need to put into my code behind? I think the codebehind would need something like System.Drawing.Color.Red; but not sure.
If you want to go with code-behind, and System.Drawing.Color, here is one approach:

protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
            if (e.Row.Cells[0].Text == "Administrator")
                e.Row.Cells[0].BackColor = Color.Red;

            if (e.Row.Cells[0].Text == "Power User")
                e.Row.Cells[0].BackColor = Color.Green;
    }
}

Open in new window

Avatar of Brian

ASKER

Ok, just so I understand. If I use the RowDataBound then how do I add the color for the specific value in my CodeBehind below? Basically, I will have at least 7 of these with a value of either 1 or NULL. I need to display green if value is 1 and red if value is NULL or 0.

if (data["ap_section_complete"].ToString() == "1")
            {
                // Place Green Check
            }
            else
            {
                // Place Red X
            }
If you need to get a value from the row, in the RowDataBound event handler, then you can do something like this:

GridViewRow.DataItem Property
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridviewrow.dataitem.aspx

 if(e.Row.RowState == DataControlRowState.Edit)
    {
      // Preselect the DropDownList control with the state value
      // for the current row.

      // Retrieve the underlying data item. In this example
      // the underlying data item is a DataRowView object. 
      DataRowView rowView = (DataRowView)e.Row.DataItem;

      // Retrieve the state value for the current row. 
      String state = rowView["state"].ToString();

      // Retrieve the DropDownList control from the current row. 
      DropDownList list = (DropDownList)e.Row.FindControl("StatesList");

      // Find the ListItem object in the DropDownList control with the 
      // state value and select the item.
      ListItem item = list.Items.FindByText(state);
      list.SelectedIndex = list.Items.IndexOf(item);

Open in new window

Avatar of Brian

ASKER

That makes no sense to what I need though. How does that relate to how I need to display those fields based on value returned.
ASKER CERTIFIED SOLUTION
Avatar of Bob Learned
Bob Learned
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Brian

ASKER

Requirements below:

 - Display all employees and display the color green if a value has 1 and red if the value is either null or 0. There will be 7 fields that I have to check this for. If you look at my original post above you will see the names of those 7 fields in the CompletedSections() method.

  - Page_Load - calls the method named CompletedSections(). This is how I anticipated displaying the cells in the GridView based on the values returned to this method. I did not think I needed to use the RowDataBound. But if I do then how do I perform that task, will I need the CompletedSections() if I use the RowDataBound method.
You won't have access to any cells in the Page_Load, that is what the RowDataBound event handler is useful for.  It is called after RowCreated, and after the grid is bound to the data, so that you can check values for the DataItem, and adjust any cell or control styling.

I believe that you should be able to take the examples that I have given you, and modify the RowDataBound event handler to fit your needs.
Avatar of Brian

ASKER

Ok, but do I need the CompletedSections() method still? Or do I just need to retrieve the data to the GridView and then use the RowDataBound method to format the cell's BG Color? Also, your example shows the use of TExt and i'm using integer values such as 1, 0, or NULL.
Avatar of Brian

ASKER

TheLearnedOne,

Ok, I was able to get your code to work as I needed. I understand what you were saying now. Just one more little problem. How do I format that if I need to apply a BackColor and BorderColor instead of just a BackColor?
Avatar of Brian

ASKER

Thank you!
I am guessing that you figured it out for yourself...
Avatar of Brian

ASKER

Yes, thank you so much for getting me started :)