Weird behaviour on RadComboBox.

[Jonathan Zee]

Hi there,

We are in the process of upgrading the telerik controls in our project from Telerik Controls ASP.NET AJAX Q1 2008 to Telerik Controls ASP.Net AJAX Q2 2009 (Yes its Q1 2008 to Q2 2009).

We discovered a weird behaviour on the RadComboBox that was working fine in the Q1 2008 version where the selected item is not updated at all.

The webpage in question generates the controls dynamically such that every time the submit button is click, it submits the current page and parses the next page controls.
The entire process in brief can be describe in the following:

1. An xml document (comprising of xmlnodes where each node is a possible page to be displayed) is loaded from the database and stored in session. See eg. of a single node with 1 RadComboBox.
   
   

   <item name="PostalAddressState" displaySource="" dataSource="" label="State" control="DropDownList" direction="Horizontal" required="True" entityColumnName="Address.State" entityType="PostalAddress" width="80px">
                               <field label="Select" value="0" selected="False" fieldType="String" goTo=""/>
                               <field label="ACT" value="ACT" selected="False" fieldType="String" goTo=""/>
                               <field label="NSW" value="NSW" selected="False" fieldType="String" goTo=""/>
                               <field label="NT" value="NT" selected="False" fieldType="String" goTo=""/>
                               <field label="QLD" value="QLD" selected="False" fieldType="String" goTo=""/>
                               <field label="SA" value="SA" selected="False" fieldType="String" goTo=""/>
                               <field label="TAS" value="TAS" selected="False" fieldType="String" goTo=""/>
                               <field label="VIC" value="VIC" selected="False" fieldType="String" goTo=""/>
                               <field label="WA" value="WA" selected="True" fieldType="String" goTo=""/>
                           </item>

2. The web application selects the appriopriate node to display based on a index and translates the xml into a string of text using xslt.

<telerik:RadComboBox id="rcb{@id}" runat="server" Skin="WebBlue" AllowCustomText="false" MarkFirstMatch="true"
               HighlightTemplatedItems="true" width="{@width}" EnableItemCaching="false">
                    <items>
                      <xsl:for-each select="field">
                        <xsl:choose>
                          <xsl:when test="@selected='True'">
                            <telerik:RadComboBoxItem Value="{@value}" Selected="{@selected}" text="{@label}" />
                          </xsl:when>
                          <xsl:otherwise>
                            <telerik:RadComboBoxItem Value="{@value}" text="{@label}" />
                          </xsl:otherwise>
                        </xsl:choose>
                      </xsl:for-each>
                    </items>
                  </telerik:RadComboBox>

3. The resulting string would end up looking exactly like a typical aspx code. e.g.

<telerik:RadComboBox id="rcbID24" runat="server" Skin="WebBlue" AllowCustomText="false" MarkFirstMatch="true" HighlightTemplatedItems="true" width="100px" EnableItemCaching="false">
        <items>
          <telerik:RadComboBoxItem Value="0" text="Select" />
          <telerik:RadComboBoxItem Value="Br" text="Br" />
          <telerik:RadComboBoxItem Value="Captain" Selected="True" text="Captain" />
          <telerik:RadComboBoxItem Value="Dr" text="Dr" />
          <telerik:RadComboBoxItem Value="Father" text="Father" />
          <telerik:RadComboBoxItem Value="Miss" text="Miss" />
          <telerik:RadComboBoxItem Value="Mr" text="Mr" />
          <telerik:RadComboBoxItem Value="Mrs" text="Mrs" />
          <telerik:RadComboBoxItem Value="Ms" text="Ms" />
          <telerik:RadComboBoxItem Value="Professor" text="Professor" />
          <telerik:RadComboBoxItem Value="Rev" text="Rev" />
          <telerik:RadComboBoxItem Value="Sir" text="Sir" />
          <telerik:RadComboBoxItem Value="Sr" text="Sr" />
          <telerik:RadComboBoxItem Value="The Hon." text="The Hon." />
        </items>
      </telerik:RadComboBox>

4. This string is then added to the webpage through Page.ParseControl(string). where all the controls are added to a placeholder.

5. User keys in the values and submits the page where the values would then be written back into the xmlDocument, processed and the next xmlnode would be selected to be displayed. this would continue until there is nothing left to be displayed and the xmldocument will then be saved.

I hope you guys arent lost in my explaination of how things work till now.. but in summary, its basically
xmldocument --> xslt translation --> string of aspx code --> binded to page using page.parsecontrol() -->get next node in xmldocument when user clicks submit. --> repeat all over again.


Ok. The weird behaviour where the selected item is not displayed happens when a single node that has a previously selected value or default selected value is being displayed. (see e.g. 3 above where the item "Captain" is selected.) If the user selects a different item in the list, like "Mr" on the same example, this item would now be selected. and would be saved back in the document. However, the selected item is not reflected back onto the radcomboBox even though a new item is selected. the radcombobox instead retains the "Captain" as the selected item. see flow below. of the debugging we went through.

xmldocument --> xslt translation --> string of aspx code --> binded to page using page.parsecontrol() --> radcombobox default value is "Captain"-->user selects "Mr" in combobox and clicks submit. --> "Mr" is written back in the xmldocument. --> system notices a change in the node, saves the change and retrieves updated node (same node) where "Mr" is now the selected item --> xslt translation--> string of aspx code (Where "Mr" is selected item) --> binded to page using page.parsecontrol(). ["Captain" is now selected]-->
radcomboBox selected item is "captain" when displayed to the user.

The moment the string is binded using page.parseControl(), the selected item was reverted back to the original item. but if we copied the snipper of page.Parsecontrol, from line 17 to line 21 and pasted it after line 21, the correct selected item would be persisted on the combobox.

	// transformedContent is the output from xslt.
	string transformedContent = obj.GetHtml(Context);
	Control ctrl = new Control();
	ctrl = Page.ParseControl(transformedContent);
	// Debug statement to show that the combobox in question retains the correct selected value.
	foreach (Control ccc in ctrl.Controls)
	{
	if (ccc is RadComboBox && ccc.ID == "rcbID24")
	{
	string vvv = ((RadComboBox)ccc).SelectedValue;
	}
	}
	// Clear and dispose of any controls from any previously parsed node.
	pclXmlOutput.Controls.Clear();
	pclXmlOutput.Dispose();
	// Add the NEW control.
	pclXmlOutput.Controls.Add(ctrl);
	// Check to see if the comboBox has changed its value.
	foreach (Control ccc in ctrl.Controls)
	{
	if (ccc is RadComboBox && ccc.ID == "rcbID24")
	{
	string vvv = ((RadComboBox)ccc).SelectedValue;
	}
	}

One small note. The code here is being used in a RadWindow.

Can anyone help?

[Simon]

Hi Jonathan Zee,

Although the provided description is quite thorough I am still not sure what is this thus pclXmlOuput control and how it is related to the page. Could you elaborate more on that as I am trying to recreate the issue at my side in order to investigate it further?

Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Jonathan Zee]

Hi there,

Thank god someone finally replied.

the pclXmlOutput is an asp Placeholder control. This control is used as an anchor where all the transformed controls are added to.
hence the code to clear, dispose and add newly generated controls into the placeholder.
i.e.

<asp:placeholder id="pclXmlOutput" runat="server">
            <!-- this is where the content from xslt will be rendered -->
        </asp:placeholder><br />

Let me reiterate the steps for the page in question. with notes on where it went wrong.

1. Load an basic xml document in memory
2. Transform xml document with xslt stylesheet
3. parse the transformed text into Page.ParseControl(string)
4. Add the controls into placeholder.
5. Page is displayed.
6. User selects/enters values into controls.
7. values are recorded back into xml document in memory.
8. Get next node. (Here, you can rewire it to return the original document)
9. repeat step 2
10. repeat step 3
11. repeat step 4 --Error here: the combobox would now revert back to its original value.
12. Page is displayed. Error here: combobox value is now the former value..

Notes: Controls are rendered at OnInit and any button events. Caching is turned off. Viewstate is turned off too.

[Simon]

Hello Jonathan Zee,

Thank you for the details.

I went further by creating a simple page where a ComboBox was added to the page by using the Page.ParseControl method following your instructions without success.

Please see the attached page attached to this post. Am I missing something? Can you modify the page, so that the issue starts to appear?

Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Jonathan Zee]

Hi,

I have made an example for you to try, how do i upload to you?

[Kamen Bundev]

Hello Jonathan,

You seem to have developer registration, why don't you open a ticket and attach it there? You can then post here the ticket number for reference.

Regards,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jeff]

Did you ever find a resolution to this. We are experiencing the same problem.

[Jonathan Zee]

Hi Jeff,

We did a simple workaround to resolve this by forcing a clear and re-adding the controls back into the placeholder. i.e. after adding the controls, clear and dispose and re-add the controls again.

see code:

// Clear placeholder of previous controls (if there's any)
                pclXmlOutput.Dispose();
                pclXmlOutput.Controls.Clear();

                // Create a new control collection to hold transformed controls
                string transformedContent = obj.GetHtml(Context);
                Control ctrl = Page.ParseControl(transformedContent);

                // bind collection to the placeholder
                pclXmlOutput.Controls.Add(ctrl);

                // we have this twice because of a bug in telerik's controls.
                pclXmlOutput.Controls.Clear();
                pclXmlOutput.Dispose();

                // Add the NEW control.
                pclXmlOutput.Controls.Add(ctrl);

Hope this helps :)

p.s. The telerik controls we use on production is a couple of versions late. you might want to update your controls to check if it's been resolved?

Jonathan

[Jeff]

Jonathan,

Wow, thanks for the quick reply. I have never gotten a reply that fast from telerik :).

This did the trick.

Thanks

[Jonathan Zee]

Lol,

My pleasure. Cheers

[Shawn Krivjansky]

I can confirm this is STILL a problem as of 2012.1.327 .

My situation is similar...
Create some dynamic controls...one being RadComboBox.  Fill it with stuff.  That control along with a few other things (RadTextBox etc...) is added to a dynamic DIV...and then that dynamic DIV is added to my PlaceHolder control.

When user hits a button to "clear", I want to tear down all the controls that were previously created.
Using the standard *.Controls.Clear() and *.Dispose methods on the placeholder control as shown in this thread.
I then add ONE default set of controls (that are cleared out) back for new entry.
I can see my RadCombox's SelectedIndex is ZERO (which is what it should be as I have made sure to set it to that when I created the control and loaded it).  It is this value up to the point the DIV control (that contains the RadComboBox) is added to the placeholder.  It is at this exact moment that the selectedindex changes to what had previously been selected prior to the "clear" process.

This drove me insane for HOURS!!
It was not clear what the issue was or whose issue it was.... but, after stumbling onto the right search terms in google I came to this thread.  I could not believe that the proposed solution would fix this, but it sure did.  I thought that clearing and shoving ANYTHING into the placeholder prior to the second clearing would also work, but it does NOT!!  You must added exactly what you plan to add on the 2nd pass to get the dumb thing to really really be cleared.  The process:
1) CLEAR
2) Add what you plan to add
3) CLEAR AGAIN!
4) Add what you plan to add a second time.

Telerik... C'mon Man!!
Can you get this fixed.  Soooo crazy that we need to use this as a wordaround.
More importantly... people are going to waste hours (or days if they aren't really really good) on something like this because it isn't clear if it is a Telerik issue until you stumble onto the workaround like I did.