Friday, July 18, 2008

Problem: Button In Datalist Has To Be Clicked Twice To Run

OK. For the past couple of days I have been working on a website for a client. I added an Update Panel to the page along with a datalist control with many buttons inside of it. Most of the buttons worked perfectly on the first click. However, I had a few stubborn buttons that were making me click on them twice before they would fire the ItemCommand event of the datalist. Just so you know, I bubble the events of all the buttons up to the ItemCommand event of the datalist using the CommandName and CommandArgument properties of the buttons.

In this case, these were all set correctly. So why did I still have to click twice on the button to make the ItemCommand event execute? I tried everything to figure out the answer. I switched events. I put the code into the Command event of the button - still had to click twice. I grabbed the index of the selected item from e.Item.ItemIndex in the ItemCommand event and did a rebinding of the datalist control in that event and then set the index back to the selected index - still had to click the button twice. I changed the type of button from a regular button to a link button - still had to click the button twice. I changed where I was binding the controls. Initially, I was checking if the page was a postback. If it wasn't a postback, I did a bind to set the datalist up. I removed the IsPostBack and just started binding all the time to see if that would help - still had to click those darn buttons twice!!!! I put the code in every event of the button and datalist control - still had to click the button twice. I was baffled beyond baffled. You know what? It's funny how we can walk away from something, go get something to eat, go get some rest and then come back and figure out the answer that was sitting right in front of us all along.

After not being able to get the button in the datalist to fire on the first click and trying everything but the right thing to fix it, I just started thinking through the logic. OK. So the user initially clicks on a button to select the item - this button uses the ItemCommand event of the datalist yet it works on the first click. OK.... Then, the user selects a radio button that I extended with a CommandName and CommandArgument property so I could control the events from it with ItemCommand too. The radio button works perfectly on the first click. Now, this button that the radio button enables after being clicked wants to be clicked twice.....why......why.....why??!?!?!?!?! Then it hit me like a ton of bricks. What was controlling the datalist control? AN UPDATE PANEL!!!!!! I had the UpdatePanel Trigger set to AsyncPostBack for the datalist control and the ItemCommand event. I changed the UpdatePanel trigger from AsyncPostBack to just PostBack on the datalist control and guess what boys and girls??????????????????????????????????? I didn't have to click my buttons twice anymore!!!! The button updates now work exactly as they were meant to without requiring an extra click! All is right with the world. Well, maybe not, but at least all is right with the buttons on my datalist control. They now respond to the single click they were meant to respond to. Happy Friday to me!!

Buttons on a Datalist control required two clicks instead of one
(in case you are searching for the answer to button in datalist clicked twice, two clicks on button in datalist control, button in datalist not firing ItemCommand event)

Change your UpdatePanel trigger on the datalist control to PostBack from AsyncPostBack. Your buttons should now the ItemCommand event when they are clicked once.

Note: This may not be the solution in all cases. If you aren't using an update panel, I would suggest making sure that you check where you are your datalist control. After removing the Updatepanel and testing this issue through, I noted that changing when I bind the datalist would also correct the issue.