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.