Hi - I have used formdecorator to skin a site quickly. all is great, except disabled text boxes have the exact same style as a none disabled text box. I have used the telerik visual style builder to create a custom skin based on web20, and have applied this to the site.
i am not doing anything clever to disable the textboxes - they simply have their asp.net property enabled set to false. the text box is set to multiline and is inside a radgrid edit template.
the rendered ouput is as follows:
<tr>
<td><label for="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl05_notesTextBox">Completion Notes:</label></td><td id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl05_EditCell__notes">
<textarea name="ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl05$notesTextBox" rows="4" cols="60" id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl05_notesTextBox" disabled="disabled">
</textarea>
</td>
</tr>
the disabled stlye is not being applied to it - it looks identical to the enabled text box.
the style does seem to be applied if i have a disabled text box outside of the radgrid edit form though.
8 Answers, 1 is accepted
I am not able to reproduce the mentioned issue. The code below renders like this - http://screencast.com/t/CWbRhNDcM
The disabled textarea is properly decorated when placed inside and outside of the grid.
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
runat
=
"server"
DecoratedControls
=
"All"
Skin
=
"Web20"
/>
<
textarea
name
=
"aaa"
rows
=
"4"
cols
=
"60"
id
=
"dd"
runat
=
"server"
disabled
=
"disabled"
>sdfsdfsdfs sdfsdf sdf sdf 222</
textarea
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
>
<
MasterTableView
>
<
Columns
>
<
telerik:GridEditCommandColumn
></
telerik:GridEditCommandColumn
>
</
Columns
>
<
EditFormSettings
EditFormType
=
"Template"
>
<
FormTemplate
>
<
textarea
name
=
"aaa"
rows
=
"4"
cols
=
"60"
id
=
"dd"
runat
=
"server"
disabled
=
"disabled"
>sdfsdfsdfs sdfsdf sdf sdf 222</
textarea
>
</
FormTemplate
>
</
EditFormSettings
>
</
MasterTableView
>
</
telerik:RadGrid
>
C#:
protected
void
Page_Load(
object
sender, EventArgs e)
{
RadGrid1.DataSource =
new
int
[] { 1, 2, 3 };
RadGrid1.DataBind();
}
Regards,
Danail Vasilev
Telerik
Hi Danail - you are right. it looks like it has not applied the style on mine sa there is no text in the box when it is disabled. with no text you cannot see any difference between the enabled and disabled text box!
I have already got a custom skin based on web20 - do you know which classes I need to change the make the disabled text boxes and text areas have a grey background to make it more obvious that they are disabled please.
thanks
james
You can use the styles below in order to change the background-color and opacity of a disabled and decorated textarea by the decorator.
<style>
.RadForm.rfdTextarea textarea[disabled] {
background-color
:
gray
;
opacity:
0.7
!important
;
}
</style>
Regards,
Danail Vasilev
Telerik
Generally the classic render mode of the formdecorator uses sprite images for styling selects. Therefore in order to change its appearance you should use new sprites.
You can, however, try the lightweight render mode where is used semantic HTML, in order to change the appearance of decorated selects with few lines of CSS:
CSS:
<style>
.RadForm_Web
20
.rfdSelect_Web
20
.rfdSelectDisabled,
.RadForm_Web
20
.rfdSelect_Web
20
.rfdSelectDisabled:hover,
.RadForm_Web
20
.rfdSelect_Web
20
.rfdSelectDisabled:active,
.RadForm_Web
20
.rfdSelect_Web
20
.rfdSelectDisabled:focus {
background-color
:
green
!important
;
background-image
:
none
!important
;
}
</style>
ASPX:
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
runat
=
"server"
DecoratedControls
=
"All"
Skin
=
"Web20"
RenderMode
=
"Lightweight"
/>
<
asp:DropDownList
ID
=
"Dropdownlist1"
runat
=
"server"
Enabled
=
"false"
>
<
asp:ListItem
Text
=
"text1"
/>
<
asp:ListItem
Text
=
"text2"
/>
</
asp:DropDownList
>
Regards,
Danail Vasilev
Telerik