This is a migrated thread and some comments may be shown as answers.

SELECT and different output generated

2 Answers 80 Views

FormDecorator

This is a migrated thread and some comments may be shown as answers.

Fit2Page asked on 08 Jun 2012, 12:06 PM

I have two the same select tags in my html that generate different results after rendering;

selectbox 1:

original html:

<select id="ctl00_ctrlLocaleList" name="ctl00$ctrlLocaleList" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ctrlLocaleList\')') ">
<option value="nl-NL" selected="selected">Nederlands</option>
<option value="de-DE">Deutsch</option>
<option value="en-US">United Kingdom</option>
</select>

output:

<a style="width: 122px;" class="rfdSelect rfdSelect_mt" tabindex="-1" unselectable="on" id="Skinnedctl00_ctrlLocaleList" href="javascript:void(0)">
<span class="rfdSelectOuter">
<span class="rfdSelectText">Nederlands</span>
</span>
</a>
<select _rfddecoratedid="Skinnedctl00_ctrlLocaleList" class="rfdRealInput" id="ctl00_ctrlLocaleList" name="ctl00$ctrlLocaleList" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ctrlLocaleList\')') ">
<option value="nl-NL" selected="selected">Nederlands</option>
<option value="de-DE">Deutsch</option><option value="en-US">United Kingdom</option>
</select>

Selectbox 2

original html:

<select size="1" id="Color_3185_3234" name="Color_3185_3234" onchange="">
<option value="-,-">Kleur</option>
<option value="Blauw,Blauw">Blauw</option>
<option value="Geel,Geel">Geel</option>
<option value="Groen,Groen">Groen</option>
<option value="Oranje,Oranje">Oranje</option>
<option value="Roze,Roze">Roze</option>
<option value="Wit,Wit">Wit</option>
</select>

output:

<div style="overflow-y: auto; width: 67px; height: 20px;" class="rfdSelectBox rfdSelectBox_mt" id="SkinnedColor_3185_3234">
<ul>
<li class="rfdSelect_selected" unselectable="on">Kleur</li>
<li unselectable="on">Blauw</li>
<li unselectable="on">Geel</li>
<li unselectable="on">Groen</li>
<li unselectable="on">Oranje</li>
<li unselectable="on">Roze</li>
<li unselectable="on">Wit</li>
</ul>
</div>
<select _rfddecoratedid="SkinnedColor_3185_3234" class="rfdRealInput" size="1" id="Color_3185_3234" name="Color_3185_3234" onchange="">
<option value="-,-">Kleur</option>
<option value="Blauw,Blauw">Blauw</option>
<option value="Geel,Geel">Geel</option>
<option value="Groen,Groen">Groen</option>
<option value="Oranje,Oranje">Oranje</option>
<option value="Roze,Roze">Roze</option>
<option value="Wit,Wit">Wit</option>
</select>

Any idea why this renders different results? Option 1 seems to be correct, the second one fails (visually).
Using IE9 and 2012-1.411.35.

2 Answers, 1 is accepted

answered on 08 Jun 2012, 02:40 PM

Hi,

The difference between two selects comes form the size property used in the second one. In defines the number of visible options in a drop-down list. When you use it, it is better to use a bigger number, such as five. If you remove RadFormDecorator, you could see that the select with size and without size are displayed in different ways. Without size is displayed as a drop down list, while the one with the size property is displayed as a list with a scroll if it is necessary. That`s why, when we use FormDecorator to remove the real HTML element and to replace it with a Decorated one, we use different HTML outputs, which will better help us to interpret the authentic HTML display. The first case am anchor with span displayed as a dropdown and in the second case, a visible unordered list.

In the bellow example there a re a few of your selects with different size properties.

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" />

<h4>Selects without size property</h4>

<select id="ctl00_ctrlLocaleList" name="ctl00$ctrlLocaleList">

<option value="nl-NL" selected="selected">Nederlands</option>

<option value="de-DE">Deutsch</option>

<option value="en-US">United Kingdom</option>

</select>

<select id="Color_3185_3234" name="Color_3185_3234">

<option value="-,-">Kleur</option>

<option value="Blauw,Blauw">Blauw</option>

<option value="Geel,Geel">Geel</option>

<option value="Groen,Groen">Groen</option>

<option value="Oranje,Oranje">Oranje</option>

<option value="Roze,Roze">Roze</option>

<option value="Wit,Wit">Wit</option>

</select>

<h4>Selects with size property</h4>

<select id="Select1" name="ctl00$ctrlLocaleList">

<option value="nl-NL" selected="selected">Nederlands</option>

<option value="de-DE">Deutsch</option>

<option value="en-US">United Kingdom</option>

</select>

<select size="5" id="Select2" name="Color_3185_3234">

<option value="-,-">Kleur</option>

<option value="Blauw,Blauw">Blauw</option>

<option value="Geel,Geel">Geel</option>

<option value="Groen,Groen">Groen</option>

<option value="Oranje,Oranje">Oranje</option>

<option value="Roze,Roze">Roze</option>

<option value="Wit,Wit">Wit</option>

</select>

</form>

</body>

</html>

If you remove the FormDecorator you will see the difference in the displayed elements with size property and without the size property. Of course, the HTML output will be the same, but when using RadForm decorator we choose to replace the authentic HTML element with an elements that will best help us to mimic the original style and behavior.

All the best,
Bozhidar
the Telerik team

Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.