GridHTMLEditorColumn edit mode control attributes

12 posts, 0 answers
  1. marksweat
    marksweat avatar
    20 posts
    Member since:
    Apr 2007

    Posted 17 Oct 2008 Link to this post

    I'm using a GridHTMLEditorColumn in my RadGrid. I'm using the in form edit mode for the RadGrid. When I edit a row I can't control the visual attributes of the GridHTMLEdit control, for example, the size of the font and the width and height of the control. I'm using my own skin and I fiddled around with the .css and was able to affect the visual aspects of all control in my edit window except the GridHTMLEditor. Is there a way to control the visual display such as font and size of this control in edit mode?

    I briefly looked into using a RadEditor in an EditItemTemplate but this control is way overkill for my needs and I read on the forum the GridHTMLEditorColumn was created from it for use in the RadGrid because the RadEditor is bulky.

    Thanks,

    --Mark
  2. Plamen Peshev
    Admin
    Plamen Peshev avatar
    886 posts

    Posted 21 Oct 2008 Link to this post

    Hello marksweat,


    To see more information on the requested functionality, please refer to the following articles:
    Best wishes,
    Plamen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. marksweat
    marksweat avatar
    20 posts
    Member since:
    Apr 2007

    Posted 21 Oct 2008 Link to this post

    Plamen,

    I'm confused.

    The information that you provided seems to be targeted at the RadEditor rather than the GridHTMLEditor Column which is what I requested information about.

    By providing me this information about the RadEditor are you telling me that it is not possible to change the visual attributes of the GridHTMLEditor? Or, is there something in the RadEditor documentation that pertains to the GridHTMLEditor that I'm missing.

    Thanks for you help.

    --Mark

  5. Plamen Peshev
    Admin
    Plamen Peshev avatar
    886 posts

    Posted 24 Oct 2008 Link to this post

    Hi marksweat,

    The GridHTMLEditorColumn column uses RadEditor to allow editing of HTML values and  is designed with a limited number of tools due to performance reasons. The following code example demonstrate how to access RadEditor's properties:

                <telerik:GridHTMLEditorColumnEditor ID="GridHTMLEditorColumnEditor1" runat="server"
                    <Editor Visible="false">                         
                    </Editor> 
                </telerik:GridHTMLEditorColumnEditor> 


    Best wishes,
    Plamen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. marksweat
    marksweat avatar
    20 posts
    Member since:
    Apr 2007

    Posted 24 Oct 2008 Link to this post

    Plamen,

    When I put the Editor code you specified in your reply to my application I get a runtime error as follows.

    Type 'Telerik.Web.UI.GridHTMLEditorColumn' does not have a public property named 'Editor'.

    I'm using the Q2-2008 build of Telerik Ajax.

    The simple HTML only edit function of the GridHTML EditorColumn is exactly what I want. I just would like it to use the same font that all the other controls in my edit mode dialog use.

    --Mark
  7. Plamen Peshev
    Admin
    Plamen Peshev avatar
    886 posts

    Posted 27 Oct 2008 Link to this post

    Hello marksweat,

    The default content area appearance can be easily overridden by setting the editor's ContentAreaCssFile property to point to your own external CSS file. Please find attached a sample web application that demonstrates the needed approach.

    Greetings,
    Plamen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 15 Dec 2008 Link to this post

    I'm having the same problem, in that the GridHTMLEditorColumn is loading the global style sheet "body" style into the content background.  I don't want this since my "body" style has a background image and it's a distinct image that doesn't look good as the Editor content area background.

    I tried this:

        protected void grdStatusReasons_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) 
        { 
            if (e.Item.IsInEditMode && (e.Item is GridEditFormItem)) 
            { 
                GridEditFormItem gridEditFormItem = (GridEditFormItem)e.Item; 
                RadEditor radEditor = (RadEditor)gridEditFormItem["Reason"].Controls[0]; 
                radEditor.ContentAreaCssFile = "~/1RadEditorContentStyleSheet.css"
                 
            } 
        } 

    ... and while it does get loaded, it is loaded first, then my global site theme style sheet is loaded, thus overwriting the content area style sheet.

    When I placed this new CSS file in my App_Themes/[Project name] folder,(which makes it load second) it replaced the "body" style for the entire web site, since it's loaded as the second style sheet.

    Is there any work around for this?

    Thanks,

    King Wilder


  9. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 18 Dec 2008 Link to this post

    Hello King Wilder,

    Attached to this thread you will find example demonstrating how you can override body style by setting different color of RadEditor.

    You can read more on how to override styles on the following blog post
    How To Override Styles in a RadControl

    I hope this is helpful.

    Kind regards,
    Nikolay
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 18 Dec 2008 Link to this post

    Nikolay,

    Thanks for the example.  I modified it to come closer to matching my configuration by:
    1. Web.config - adding the theme attribute to the "pages" element, <pages theme="Default"> 
    2. Background image - I added an "images" folder and a background image to the App_Themes/Default folder

    Once I did this, the global background image was displayed in the HTML Editor, the same as in my production application.

    But once I modified the external style sheet (the one for the HTML editor), from this:

    body   
    {   
        background-color: red !important;   
        background-image: url(image_path);   
        color: black;   
        font: 20px Verdana,Arial,Helvetica,Sans-Serif !important;    
    }   

    ...to this...
    body   
    {   
        background-color: red !important;   
        background-image: none !important; 
        color: black;   
        font: 20px Verdana,Arial,Helvetica,Sans-Serif !important;    
    }   

    ... it worked!

    I was just missing the "!important" for the background-image property.

    Thanks for the help.

    King Wilder


  11. Bibek
    Bibek avatar
    2 posts
    Member since:
    Mar 2009

    Posted 27 Mar 2009 Link to this post

    Plamen
    I am using the below code to assign the default align as left to my GridHTMLEditorColumn
          
            If (e.Item.IsInEditMode And (TypeOf (e.Item) Is GridEditFormItem)) Then
                Dim gridEditFormItem As GridEditFormItem = CType(e.Item, GridEditFormItem)
                Dim radEditor As RadEditor = CType(gridEditFormItem("ITEMSOFINTEREST").Controls(0), RadEditor)
                radEditor.ContentAreaCssFile = "StyleSheetGrid.css"
            End If

    Below is the css class

    body  
    {  
        text-align: left;
    }

    I wann the text alignment to be left aligned when the grid opens the GridHTMLEditorColumn in insert mode. There is also a Horizontal alignment property in the Grid that is also not working. I find it for the same in edit mode but once the user saves the record in left alignment and then when he is populated the same data it come in left alignment.

    Please let m know how do I make the default alignment as left in the insert mode.


    Regards
    Bibek
  12. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 30 Mar 2009 Link to this post

    Hello Bibek,

    Please check the attached project.
    It demonstrates how you can align RadEditor content to right.

    Regards,
    Nikolay
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  13. Bibek
    Bibek avatar
    2 posts
    Member since:
    Mar 2009

    Posted 01 Apr 2009 Link to this post

    Nikolay,

    Thanks for your email,

    The example that you have sent is already implemented but still the issue was persisting. I just used King Wilder's idea and changed the global CSS's property (The common one). Now my CSS is working fine.

    Regards
    Bibek
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017