[RESOLVED] change button color back to transparent?

I've spent ages trying to work this problem out... When I click on a button the background should change colour. If another button has already been clicked previously (btnSkillSelected = true) then this button should first be turned back transparent. This does not however happen, instead it stays light blue!

// When a btn is checked the following method is executed
private void btnSkill_CheckedChanged(object sender, EventArgs e)
{
// If a btn has been enabled before
if (btnSkillSelected == false)
{
MessageBox("1st time a btn is selected!");
// save selected btnSkill
selectedSkillID = int.Parse(btnSkill.ID);
}
else
{
MessageBox("not the 1st time a btn is selected!");
// Find the previously selected btn
for (int i = 0; i < criterium.Length; i++)
{
if (btnSkill.ID == Convert.ToString(selectedSkillID))
{
// Disable the previously selected button
btnSkill.BackColor = System.Drawing.Color.Transparent;
btnSkill.Enabled = true;
}
}
}
// True for both methods:
// Show that a button has been enabled
btnSkillSelected = true;
// Change state of currently selected btn
btnSkill = (Button)sender;
selectedSkillID = int.Parse(btnSkill.ID);
btnSkill.BackColor = System.Drawing.Color.LightBlue;
btnSkill.Enabled = false;
// Create side table
CreateTblCriterium(selectedSkillID);
}

The problem lies with the button ID.

When I create my set of buttons I want to give each button a seperate button ID (the first btn ID should equal the first criterium ID, the second btn should equal the second criterium ID, etc). What my code however does is it gives each button the same ID as that of the first criterium ID, then it changes the btn ID to that of the second criterium ID, then to the third criterium ID and so forth. This means that all the buttons have the same ID so I can no longer call up a specific button to change it's background color! How do I ensure each button gets a seperate ID?

Code:

---

protected void CreateTblMainSkill()
        {
            int i = 0;

            foreach(object skill in criterium)
            {
                btnSkill = new Button();
                cellSkill = new TableCell();
                rowSkill = new TableRow();
                btnSkill.ID = Convert.ToString(criterium[i].ID); // PROB LIES HERE
                btnSkill.Text = Server.HtmlDecode(criterium[i].Skill);
                btnSkill.BackColor = System.Drawing.Color.Transparent;
                btnSkill.BorderColor = System.Drawing.Color.Transparent;
                cellSkill.Controls.Add(btnSkill);
                rowSkill.Controls.Add(cellSkill);

                // On button click display side table for desired skill
                btnSkill.Click += new EventHandler(btnSkill_CheckedChanged);

---

Any help would be much appreciated!

I'm not sure how you are getting the same ID unless the items in 'criterium' have the same ID. Can you explain further or put more of the code?

I'm not too sure how that works either!

As a test I inserted a MessageBox straight after the btn ID is declared and asked for the btn ID to be returned. I then clicked on the first button. The MessageBox popped up 10 times, each time returning me the name of a different item from criterium (in the order that the items are stored in the array criterium). That's how I came up with the assumption below!

I performed the same test with my radiobuttons (who are aligned next to each button and should also have the same ID as the buttons) to see if I would get a similar result. Strangely when I click on either a button or a radiobutton BOTH messageboxes appear instead of just the desired one (i.e. when clicking on a radiobutton the messagebox with the radiobutton ID should appear and vice versa)! There also seems to be a conflict of event handlers here!

Here is the rest of my code:

Code:

---

        protected void CreateTblMainSkill()
        {
            int i = 0;

            // Create a cell with a skill in each row
            foreach(object skill in criterium)
            {
                btnSkill = new Button();
                cellSkill = new TableCell();
                rowSkill = new TableRow();
                btnSkill.ID = Convert.ToString(criterium[i].ID); // Give button same ID as skill iD // I THINK PROB LIES HERE
                btnSkill.Text = Server.HtmlDecode(criterium[i].Skill);
                btnSkill.BackColor = System.Drawing.Color.Transparent;
                btnSkill.BorderColor = System.Drawing.Color.Transparent;
                cellSkill.Controls.Add(btnSkill);
                rowSkill.Controls.Add(cellSkill);

                // On button click display side table for desired skill
                btnSkill.Click += new EventHandler(btnSkill_CheckedChanged);

                // For every skill add rbtn for each ENumGrade
                for (int c = 0; c < eNumGradesList.Length; c++)
                {
                    cellRbtn = new TableCell();
                    rbtnSkill = new RadioButton();
                    rbtnSkill.ID = Convert.ToString(criterium[i].Skill) + " , " + c; // rbtn ID = skillName + " , " + eNumGrade
                    rbtnSkill.Checked = false;
                    // Autopostback ensures page notifies server of event taking place in web control
                    rbtnSkill.AutoPostBack = true;
                    rbtnSkill.GroupName = Convert.ToString(criterium[i].Skill); // Ensures only one rbtn in each group can be clicked
                    //MessageBox("rbtnSkill group name: " + rbtnSkill.GroupName); // why does this come up again? to do with autopostback?
                    cellRbtn.Controls.Add(rbtnSkill);
                    cellRbtn.BorderColor = System.Drawing.Color.Blue;
                    rowSkill.Controls.Add(cellRbtn);

                    // On rbtn click control how many have been clicked
                    rbtnSkill.CheckedChanged += new EventHandler(rbtnSkill_CheckedChanged);

                    // If this is NOT the first time accessing this page, keep desired rbtn checked
                    // Note: settings stay even when closed window!
                    if (!IsPostBack)
                    {
                        if (rbtnSkill.ID == Convert.ToString(Input_master.selectedSkillID))
                        {
                            rbtnSkill.Checked = true;
                        }
                    }
                }

                // Add the following rows to the stage
                tblMain.Rows.Add(rowSkill);
                i++;
            }
        }

        protected void btnSkill_CheckedChanged(object sender, EventArgs e)
        {
            // If a btn has been enabled before
            if (Input_master.btnSkillSelected == true)
            {
                // Find the previously selected btn
                for (int i = 0; i < criterium.Length; i++)
                {
                    if (btnSkill.ID == Convert.ToString(Input_master.selectedSkillID))
                    {

                        MessageBox("TEST!");
                        // Disable the previously selected button: NOT WORKING! !!!!!
                        btnSkill.BackColor = System.Drawing.Color.Transparent;
                        btnSkill.Enabled = true;

                        // try turning the namin container (i.e. ALL buttons) transparent
                        //btnSkill.NamingContainer = "skill";
                                // Framework-KlassenbibliothekControl..::.OnParentEnabledChanged-Methode : think only works with windows forms
                             
                    }
                }
            }
            else
            {
                MessageBox("1st time a btn is selected!");
            }

            // True for both methods:

            // Show that a button has been enabled
            Input_master.btnSkillSelected = true;

            // Change state of currently selected btn
            btnSkill = (Button)sender;
            Input_master.selectedSkillID = int.Parse(btnSkill.ID);
            btnSkill.BackColor = System.Drawing.Color.LightBlue;
            btnSkill.Enabled = false;

            // Create side table
            CreateTblCriterium(Input_master.selectedSkillID);
        }

        protected void rbtnSkill_CheckedChanged(object sender, EventArgs e)
        {
            SetTotalRbtnSelected();

            // Save state of page on basis that everything has been completed. Override when rbtn becomes unchecked.
            if (Input_master.totalRbtnSelected == criterium.Length)
            {
                Input_master.completedPageNoten = true;
                MessageBox("ALL RBTNS SELECTED");
            }
            else
            {
                Input_master.completedPageNoten = false;
                MessageBox("RBTNS SELECTED: " + Input_master.GetTotalRbtnSelected()); // not working!
            }
        }

        protected void GetCriterium()
        {
            try
            {
                criterium = WebServiceConnection.webService.getAllCriteria();
                eNumGrade = WebServiceConnection.webService.getAllENumGrade();
            }
            catch (UnauthorizedAccessException)
            {
                Azubiportal.ErrorPage.SetError("UnauthorizedAccessException");
                errorPage.DisplayErrorMsg();
            }
            catch (IndexOutOfRangeException)
            {
                Azubiportal.ErrorPage.SetError("IndexOutOfRangeException");
                errorPage.DisplayErrorMsg();
            }
            catch (NullReferenceException)
            {
                Azubiportal.ErrorPage.SetError("NullReferenceException");
                errorPage.DisplayErrorMsg();
            }
            catch (Exception)
            {
                errorPage.DisplayErrorMsg();
            }
        }

        // Set the total nr of rbtns selected on the page: not working!
        protected void SetTotalRbtnSelected()
        {
            try {
                int i = 0;

                    // First split rbtnSkill GroupName to only return beginning part
                    //string rbtnSkillName = rbtnSkill.Group;

                //MessageBox("string: " + rbtnSkillName);

                //// Delimiter removes the comma from between the array
                //char[] delimiters = new char[] { ',' };
                //rbtnSkillNameList = rbtnSkillName.Split(delimiters, StringSplitOptions.RemoveEmptyEntries);

                //string rbtnSkillBeginName = rbtnSkillNameList[0]; // First part of name

                //MessageBox("string: " + rbtnSkillBeginName);


                    // while rbtnSkill's group name is equal to that of the first group of skills
                    while (rbtnSkill.GroupName == Convert.ToString(criterium[i].Skill))
                    {
                        // if the rbtnSkill from that group is checked
                        if (rbtnSkill.Checked == true)
                        {
                            Input_master.IncrementTotalRbtnSelected();
                            MessageBox("Incremented total Rbtns : " + Input_master.GetTotalRbtnSelected());
                        }
                    }
        }

(...)

---

Hi,

Could you possibly put the rendered html in an attachment? I would like to see how it is rendered to get a better understanding of what is happening. Thanks.

A physical dialog box is generated each time so Im not sure how to give it to you as HTML... I uploaded a screenshot of the messagebox generated when I clicked on the first button (the number corresponds to the name/number of the first skill ID). I also attached a screenshot displaying the effect of having clicked first on the first button and then on the second button. The first button should have turned back to its transparent color once I clicked on the second button.

The text on the message boxes appear as follows:

Code:

---

Button skill ID: 6 
RbtnSkill group name: Zusammenarbeit (x4)
Button skill ID: 7 RbtnSkill group name: Auffassungsgabe (x4)
Button skill ID: 8
RbtnSkill group name: Transfervermögen (x4)
...And so forth...

---

As you can see the first, third and fifth message are generated by the Button Event Handler while the rest are generated by the Radiobutton Event Handler. The latter displays each message four times since there are four radiobuttons on the same row which should all have the same ID.

Quote:

---

Originally Posted by stepsh

A physical dialog box is generated each time so Im not sure how to give it to you as HTML

---

I meant the rendered html for the the whole page (i.g. right click -> view source)

oops! I attached it!

Thanks.

The first thing I would try is replace this line...

Code:

---

rbtnSkill.ID = Convert.ToString(criterium[i].Skill) + " , " + c;

---

with this...

Code:

---

rbtnSkill.ID = Convert.ToString(criterium[i].Skill) + c;

---

Thanks but I already tried that before and it didnt help :(

I tried it a second time to be on the safe side but again no success...

Quote:

---

Originally Posted by stephsh

The problem lies with the button ID.

When I create my set of buttons I want to give each button a seperate button ID (the first btn ID should equal the first criterium ID, the second btn should equal the second criterium ID, etc). What my code however does is it gives each button the same ID as that of the first criterium ID, then it changes the btn ID to that of the second criterium ID, then to the third criterium ID and so forth. This means that all the buttons have the same ID so I can no longer call up a specific button to change it's background color! How do I ensure each button gets a seperate ID?

Code:

---

protected void CreateTblMainSkill()
        {
            int i = 0;

            foreach(object skill in criterium)
            {
                btnSkill = new Button();
                cellSkill = new TableCell();
                rowSkill = new TableRow();
                btnSkill.ID = Convert.ToString(criterium[i].ID); // PROB LIES HERE
                btnSkill.Text = Server.HtmlDecode(criterium[i].Skill);
                btnSkill.BackColor = System.Drawing.Color.Transparent;
                btnSkill.BorderColor = System.Drawing.Color.Transparent;
                cellSkill.Controls.Add(btnSkill);
                rowSkill.Controls.Add(cellSkill);

                // On button click display side table for desired skill
                btnSkill.Click += new EventHandler(btnSkill_CheckedChanged);

---

Any help would be much appreciated!

---

In the code you pasted, you're not incrementing 'i' anywhere I can see. Which would set each btnSkill.ID to the same criterium[0] index.

I increment "i" further down in that method. If you check the rest of the code which I later posted you will see that i increment it (check last line of this code):

Code:

---

(...)
                btnSkill.Click += new EventHandler(btnSkill_CheckedChanged);

                // For every skill add rbtn for each ENumGrade
                for (int c = 0; c < eNumGradesList.Length; c++)
                {
                    cellRbtn = new TableCell();
                    rbtnSkill = new RadioButton();
                    rbtnSkill.ID = Convert.ToString(criterium[i].Skill) + " , " + c; // rbtn ID = skillName + " , " + eNumGrade
                    rbtnSkill.Checked = false;
                    // Autopostback ensures page notifies server of event taking place in web control
                    rbtnSkill.AutoPostBack = true;
                    rbtnSkill.GroupName = Convert.ToString(criterium[i].Skill); // Ensures only one rbtn in each group can be clicked
                    //MessageBox("rbtnSkill group name: " + rbtnSkill.GroupName); // why does this come up again? to do with autopostback?
                    cellRbtn.Controls.Add(rbtnSkill);
                    cellRbtn.BorderColor = System.Drawing.Color.Blue;
                    rowSkill.Controls.Add(cellRbtn);

                    // On rbtn click control how many have been clicked
                    rbtnSkill.CheckedChanged += new EventHandler(rbtnSkill_CheckedChanged);

                    // If this is NOT the first time accessing this page, keep desired rbtn checked
                    // Note: settings stay even when closed window!
                    if (!IsPostBack)
                    {
                        if (rbtnSkill.ID == Convert.ToString(Input_master.selectedSkillID))
                        {
                            rbtnSkill.Checked = true;
                        }
                    }
                }

                // Add the following rows to the stage
                tblMain.Rows.Add(rowSkill);

                i++; // HERE i is incremented!
            }
    }

---

Ok. Let's go back a little bit. Please excuse I just want to get a very clear picture of what is happening without having to put the code in my local environment. Let's try and answer these questions...

1. What happens when you press the skill button (i.e. btnSkill)?
2. What happens when you press the frist rbtnSkill? What happens when you press another rbtnSkill?
3. What happens when you press the skill button followed by any of the rbtnSkill buttons?
4. What happens when you press any of the rbtnSkill followed by the skill button?

I've got an idea I just want to confirm the facts.

Thanks.

Quote:

---

Originally Posted by stephsh

Thanks but I already tried that before and it didnt help :(

I tried it a second time to be on the safe side but again no success...

---

I don't think its a good idea to format the radio button ids with the spaces and comma. Looking at the code and the rendered html suggests that you had in the first place was not the problem. I would take away the space and comma. But that's just a personal preference...

1. What happens when you press the skill button (i.e. btnSkill)?

The following messageboxes are generated:

Code:

---

Button skill ID: 6 
RbtnSkill group name: Zusammenarbeit (x4)
Button skill ID: 7 RbtnSkill group name: Auffassungsgabe (x4)
Button skill ID: 8
RbtnSkill group name: Transfervermögen (x4)
(...)

---

The button then becomes highlighted in light blue and disabled.

2. What happens when you press the first rbtnSkill?
Exactly the same messages as above are generated. The appropriate rbtn becomes selected.

What happens when you press another rbtnSkill?
Exactly the same messages as above are generated. The second rbtn becomes selected. If rbtn is in the same row, then the previous rbtn is deselected. If not then in total 2 rbtns are now selected.

3. What happens when you press the skill button followed by any of the rbtnSkill buttons?
First situation 1 happens (answered in q1) and then situation 2 (answered in q2).

4. What happens when you press any of the rbtnSkill followed by the skill button?
First situation 2 happens and then situation 1.

--> My order of selection, doesnt seem to change anything. I keep receiving the same messages, in the same order, but the relevant button or radiobutton does select itself.

Ok. Can you also show the code where you are calling the message boxes? I couldn't see it in any of the previous posts. Basically I was expecting to see something showing those messages in btnSkill_CheckedChanged and in rbtnSkill_CheckedChanged. By the way is there a specific reason why the handler for the 'Click' event on btnSkill is called btnSkill_CheckedChanged? I'm just curious about that...

The button handler was I given that name cas I just copy pasted the rbtn event handler function and changed a couple of things :P Ill change it to btnSkill_Click!

The code calling my messageboxes isnt actually IN the event handlers, it's in the CreateTblMainSkill() method! Thats whats so strange... For some reason the event handler is calling up (part of?) the CreateTblMainSkill method. My only explanation for this is that the event handler is declared in CreateTblMainSkill() so maybe it's jumping back to there... I'm confused :P

At what point in the page lifecycle is the 'CreateTblMainSkill' method called?

This is the order of method calling:

Code:

---

Page_Load(): calls InitializeEvaluation()
InitializeEvaluation() : calls CreateTblMain()
CreateTblMain() : calls SplitENumGrade()
SplitENumGrade() : calls CreateTblMainSkill()
CreateTblMainSkill() : contains both event handlers. It doesnt call any other methods up.

---

The method that calls up CreateTblMainSkill() looks like this:

Code:

---

        protected void SplitENumGrade()
        {
            try {
                // The first grade system (eNumGradeID=1) in the array list must be used. I.e. position 0
                string eNumGradeTotal = eNumGrade[0].Grades;
                // Delimiter removes the comma from between the array
                char[] delimiters = new char[] { ',' };
                eNumGradesList = eNumGradeTotal.Split(delimiters, StringSplitOptions.RemoveEmptyEntries);

                foreach (string grade in eNumGradesList)
                {
                    lblENumGrade = new Label();
                    cellENumGrade = new TableCell();

                    // Position cells and specify details
                    lblENumGrade.Text = "  " + grade;
                    lblENumGrade.CssClass = "lblENumGrade";
                    cellENumGrade.Controls.Add(lblENumGrade);
                    cellENumGrade.BorderColor = System.Drawing.Color.Blue; // dont want top to be colored or bottom! specify!!!
                    rowHeader.Controls.Add(cellENumGrade);
                }
                CreateTblMainSkill();
            }
            catch (IndexOutOfRangeException i)
            {
                errorPage.DisplayErrorMsg(i.Message);
            }
            catch (Exception)
            {
                errorPage.DisplayErrorMsg();
            }
        }

---

Hi Stephsh,

I think it is better to go back to the beginning. I think I can help you with you were trying to do from the start. Basically you want to click a button have its background colour changed to blue. When you click on another button the previously clicked button will go back to its normal background color, whilst the currently clicked button will have the blue background color. Is this correct?

Completely correct!

Code:

---

    <asp:Button ID="button1" runat="server" Text="One" OnClick="ButtonClickHandler" />
    <asp:Button ID="button2" runat="server" Text="Two" OnClick="ButtonClickHandler" />
    <asp:Button ID="button3" runat="server" Text="Three" OnClick="ButtonClickHandler" />

---

Code:

---

public partial class HighlightButtons : System.Web.UI.Page
{
    private string _selectedButton = String.Empty;

    protected void ButtonClickHandler(object sender, EventArgs e)
    {
        Button selectedButton = sender as Button;
        _selectedButton = selectedButton.ID;
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        button1.BackColor = button1.ID == _selectedButton ? System.Drawing.Color.Blue : System.Drawing.Color.Transparent;
        button2.BackColor = button2.ID == _selectedButton ? System.Drawing.Color.Blue : System.Drawing.Color.Transparent;
        button3.BackColor = button3.ID == _selectedButton ? System.Drawing.Color.Blue : System.Drawing.Color.Transparent;
    }
}

---

This is a small sample. I know your scenario is much more complex but I would still apply the same principle. Apply the standard background to all and then override the one that has just been pressed.

This method definitely seems like a much better one then mine. The problem however is that the true or false statement in pageRender always seems to return the value false because all my buttons now permanently turn transparent! they never turn light blue...

As a test I added an if statement in page render calling a messagebox if the btnSkill.ID is equal to the ID saved in _selectedButton. The messagebox did not appear so my assumption is that all buttons have been given the same ID, namely that of the last ID. How do I stop this?

I've just gone through some of the code you posted previously. I noticed that you have a for loop but you don't seem to use the object you're getting in the loop...

Code:

---

            // Create a cell with a skill in each row
            foreach(object skill in criterium)
            {
                btnSkill = new Button();
                cellSkill = new TableCell();
                rowSkill = new TableRow();
                btnSkill.ID = Convert.ToString(criterium[i].ID); // Give button same ID as skill iD // I THINK PROB LIES HERE

---

You don't seem to be using the 'skill' object declared in the loop. You are accessing the criterium collection by index. That doens't appear to be a problem as you increment the index. However it sees odd that you have a 'foreach' loop in the first place...I would recommend changing that. If the buttons are getting the same ID is because they are being given the same id. I've noticed that you create a new instance of the controls which is good. Step through the code with the debugger to make sure the buttons are being given the id that you expect. Put a break point in that line of code and let me know what happens...

That's funny, I just noticed that this morning and changed it before I read your post! Great minds think alike :P

It's interesting what happens when I debug it. It starts of alright with each seperate button being created, each receiving a seperate ID and text, and then the page_PreRender method declares the buttons transparent. The problem arises when I click on a certain button (I choose the first btn, namely "Zusammenarbeit"). The CreateTblMainSkill method is then RECALLED and the system goes through the whole for loop giving the button a different ID and text each time until it reaches the end of the array "criterium"!

This is what is outputted:

Code:

---

CreateTblMainSkill() :
btnSkill.ID : 6
btnSkill.Text = Zusammenarbeit

btnSkill.ID : 10
btnSkill.Text = Auffassungsgabe

(and so forth 8 more times...)


Page_PreRender():
btnSkill.Text = "Fertigkeit"

I then clicked on first button:


CreateTblMainSkill():
btnSkill.ID : 6
btnSkill.Text = Zusammenarbeit

btnSkill.ID : 10
btnSkill.Text = Auffassungsgabe

(and so forth 8 more times...)


Page_PreRender():
btnSkill.Text = "Fertigkeit"

---

Have you tried using the 'IsPostBack' property? I'm not sure it will work given that you are creating the controls dinamically but it is worth a try...Basically if it is a post back don't call the CreateTblMainSkill.