GridHTMLEditorColumn edit mode control attributes

[marksweat]

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

[Missing User]

Hello marksweat,


To see more information on the requested functionality, please refer to the following articles:

• Changing the default font in RadEditor
• http://www.telerik.com/help/aspnet-ajax/settingproperties.html

Best wishes,
Plamen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[marksweat]

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

[Missing User]

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.

[marksweat]

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

[Missing User]

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.

[King Wilder]

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

[Nikolay Rusev]

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.

[King Wilder]

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

[Bibek]

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

[Nikolay Rusev]

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.

[Bibek]

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