textbox disabled style not being aplpied in radgrid edit template

10 posts, 0 answers
  1. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 11 May 2015 Link to this post

    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.

     

     

     

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 May 2015 Link to this post

    Hi James,

    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
     
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 12 May 2015 in reply to Danail Vasilev Link to this post

    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

     

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 13 May 2015 Link to this post

    Hi 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
     
    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.
  6. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 13 May 2015 in reply to Danail Vasilev Link to this post

    thanks. I also have a similar problem with drop downs. is there a CSS class to change to make disabled drop downs have a grey background colour?

     

    thanks

     

    james

  7. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 13 May 2015 in reply to Danail Vasilev Link to this post

    thanks. is there a class to change the style of disabled drop downs as well?
  8. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 13 May 2015 in reply to Danail Vasilev Link to this post

    thanks. is ther ea calss to change the style of disabled drop downs as well?
  9. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 13 May 2015 in reply to Danail Vasilev Link to this post

    thanks. is there a class to change the style of disabled drop downs as well?
  10. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 14 May 2015 Link to this post

    Hello James,

    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_Web20 .rfdSelect_Web20.rfdSelectDisabled,
        .RadForm_Web20 .rfdSelect_Web20.rfdSelectDisabled:hover,
        .RadForm_Web20 .rfdSelect_Web20.rfdSelectDisabled:active,
        .RadForm_Web20 .rfdSelect_Web20.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
     
    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.
  11. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 15 May 2015 in reply to Danail Vasilev Link to this post

    Thanks for your help Danail. I'll probably go down the sprit editing route as I quite like the rest of the styling in classic mode.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017