Custom Skin in Grid Editor Columns

[Curt]

I am trying to use a custom skin on a gird.  I have the skin created and working in most instances except this one: 

http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridEditors/DefaultCS.aspx

When I set the skin on the grid to:

Skin

="DWDS" EnableEmbeddedSkins="false"

and declare the css:

<

link href="/Skins/DWDS/Grid.DWDS.css" rel="stylesheet" type="text/css" />

<

link href="/Skins/DWDS/Calendar.DWDS.css" rel="stylesheet" type="text/css" />

<

link href="/Skins/DWDS/Editor.DWDS.css" rel="stylesheet" type="text/css" />

the images for the datetimepicker do not show.  When I look at the properties the image path is not correct.  I have set the ImagesPath for the grid images (although I have only seen this make a difference on the paging images - am I using if wrong?)

How do I get the correct images for the column editors when using a custom skin?

I also can't get the code to update the data base.  The two dates (start and end) get submitted but the two 

GridHTMLEditorColumn

send null (on Firefox but on IE 7 they send the value).  Part of this problem stems from the Editor picking up some of the styles from my sites stylesheet.  I will post that in the Editor section.

<asp:Content ID="myBody" runat="server" ContentPlaceHolderID="cphBody">
<link href="/Skins/DWDS/Grid.DWDS.css" rel="stylesheet" type="text/css" />
<link href="/Skins/DWDS/Calendar.DWDS.css" rel="stylesheet" type="text/css" />
<link href="/Skins/DWDS/Editor.DWDS.css" rel="stylesheet" type="text/css" />
<h2>Calendar Management</h2>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ID="RadGrid2" runat="server" AllowAutomaticInserts="True" AllowAutomaticDeletes="True" AllowAutomaticUpdates="True" Width="100%" AutoGenerateColumns="false"
        AllowPaging="true" PageSize="15" DataSourceID="SqlDataSource1" AllowSorting="true" Skin="DWDS" EnableEmbeddedSkins="false" ImagesPath="/Skins/DWDS/Grid/">
        <MasterTableView CommandItemDisplay="Top" DataKeyNames="ID"  Width="100%" EditMode="EditForms">
            <CommandItemTemplate>
                <asp:LinkButton Style="vertical-align: bottom" ID="btnEditSelected" runat="server" CommandName="EditSelected" Visible='<%# RadGrid2.EditIndexes.Count == 0 %>'>
                    <img style="border:0px" alt="" src="/Skins/DWDS/Grid/Edit.gif" /> Edit Calendar Entry
                </asp:LinkButton>
                <asp:LinkButton ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# RadGrid2.EditIndexes.Count > 0 %>'>
                    <img style="border:0px" alt="" src="/Skins/DWDS/Grid/Update.gif" /> Update Calendar
                </asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="btnCancel" runat="server" CommandName="CancelAll" Visible='<%# RadGrid2.EditIndexes.Count > 0 || RadGrid2.MasterTableView.IsItemInserted %>'>
                    <img style="border:0px" alt="" src="/Skins/DWDS/Grid/Cancel.gif" /> Cancel editing
                </asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="LinkButton2" runat="server" CommandName="InitInsert" Visible='<%# !RadGrid2.MasterTableView.IsItemInserted %>'>
                    <img style="border:0px" alt="" src="/Skins/DWDS/Grid/AddRecord.gif" /> Add new Calendar Entry</asp:LinkButton>
                <asp:LinkButton ID="LinkButton3" runat="server" CommandName="PerformInsert" Visible='<%# RadGrid2.MasterTableView.IsItemInserted %>'>
                    <img style="border:0px" alt="" src="/Skins/DWDS/Grid/Insert.gif" /> Add this Entry</asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="LinkButton1" OnClientClick="javascript:return confirm('Delete all selected calendar entries?')" runat="server" CommandName="DeleteSelected" >
                    <img style="border:0px" alt="" src="/Skins/DWDS/Grid/Delete.gif" /> Delete Selected Entries
                </asp:LinkButton>
                &nbsp;&nbsp;&nbsp;
                <asp:LinkButton ID="LinkButton4" runat="server" CommandName="RebindGrid">
                    <img style="border:0px" alt="" src="/Skins/DWDS/Grid/Refresh.gif" /> Refresh Calendar list
                </asp:LinkButton>
                <br />
                &nbsp;
            </CommandItemTemplate>
             <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" UpdateImageUrl="/Skins/DWDS/Grid/Update.gif"
                    EditImageUrl="/Skins/DWDS/Grid/Edit.gif" InsertImageUrl="/Skins/DWDS/Grid/Insert.gif"
                    CancelImageUrl="/Skins/DWDS/Grid/Cancel.gif" UniqueName="EditCommandColumn">
                    <HeaderStyle Width="25px" />
                </telerik:GridEditCommandColumn>
                <telerik:GridButtonColumn ConfirmText="Delete this entry?" ButtonType="ImageButton" ImageUrl="/Skins/DWDS/Grid/Delete.gif" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                    <HeaderStyle Width="25px" />
                    <ItemStyle Width="25px" />
                </telerik:GridButtonColumn>

                <telerik:GridBoundColumn DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" UniqueName="ID" Visible="False" />
                <telerik:GridDateTimeColumn HeaderText="Start Time/Date" UniqueName="st" DataField="EventDateBeg" PickerType="DateTimePicker" />
                <telerik:GridDateTimeColumn HeaderText="End Time/Date" UniqueName="et" DataField="EventDateEnd" PickerType="DateTimePicker" />
                <telerik:GridHTMLEditorColumn HeaderText="Entry Name" UniqueName="EventName" DataField="EventName" />
                <telerik:GridHTMLEditorColumn HeaderText="Entry Description" UniqueName="EventDescription" DataField="EventDescription" />


            </Columns>
            <EditFormSettings CaptionDataField="EventDateBeg" CaptionFormatString="Edit properties of Calendar Entry: {0}"  >
                <FormTableItemStyle Wrap="False" Width="300px"></FormTableItemStyle>
                <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                <FormMainTableStyle GridLines="Horizontal" CellSpacing="10" CellPadding="10" BackColor="White" />
                <FormTableStyle CellSpacing="5" CellPadding="5" CssClass="module" Height="110px" BackColor="White" />
                <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                <EditColumn ButtonType="ImageButton" UpdateImageUrl="/Skins/DWDS/Grid/Update.gif"
                    EditImageUrl="/Skins/DWDS/Grid/Edit.gif" InsertImageUrl="/Skins/DWDS/Grid/Insert.gif"
                    CancelImageUrl="/Skins/DWDS/Grid/Cancel.gif" InsertText="Insert Order" UpdateText="Update record"
                    UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                </EditColumn>
                <FormTableButtonRowStyle HorizontalAlign="Left" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:oConnDW %>" SelectCommand="Calendar_List" SelectCommandType="StoredProcedure"
        UpdateCommand="Calendar_Update_B" UpdateCommandType="StoredProcedure" DeleteCommand="Calendar_Delete_By_ID" DeleteCommandType="storedprocedure" InsertCommand="Calendar_Insert_B"
        InsertCommandType="storedprocedure">
        <UpdateParameters>
            <asp:Parameter Name="EventDateBeg" Type="datetime" />
            <asp:Parameter Name="EventDateEnd" Type="datetime" />
            <asp:Parameter Name="EventName" Type="string" />
            <asp:Parameter Name="EventDescription" Type="string" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="EventDateBeg" Type="datetime" />
            <asp:Parameter Name="EventDateEnd" Type="datetime" />
            <asp:Parameter Name="EventName" Type="string" />
            <asp:Parameter Name="EventDescription" Type="string" />
        </InsertParameters>
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="int16" />
        </DeleteParameters>
    </asp:SqlDataSource>

</asp:Content>

The code behind adds a project ID to the SQL statement but that is it.

Any ideas on how to use custom skins with this?

Thanks

[Dimo]

Hello Brent,

I am not very sure about this, but there may be a problem with this integration scenario when using custom skins. We will investigate the issue further and get back to you in the beginning of next week. Thank you for your patience.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Dimo]

Hi Brent,

Here is a suggestion how to set the URL for the datepicker's image button in code-behind. I have used the GridEditors example as a base for the following code.


ASPX:

<telerik:RadGrid OnItemCreated="RadGrid1_ItemCreated" />


C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        RadDateTimePicker picker = ((e.Item as GridEditableItem)["HireDate"].Controls[0] as RadDateTimePicker);
        picker.DatePopupButton.ImageUrl = "~/Controls/Img/productLogo.gif";
    }
}


Regarding the issue with RadEditor content not being submitted - this is due to a bug in AJAX ASP.NET framework occurring in Firefox. In order to fix the problem you will have to set the "submit" button's property UseSubmitBehavior="false", e.g.

<asp:Button runat="server" ID="butSubmit" UseSubmitBehavior="false" OnCommand="butSubmit_Command" CommandName="0" Text="" />

Let us know if you need additional information or assistance.

All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Curt]

protected void RadGrid2_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                RadDateTimePicker pickerST = ((e.Item as GridEditableItem)["st"].Controls[0] as RadDateTimePicker);
                RadDateTimePicker pickerET = ((e.Item as GridEditableItem)["et"].Controls[0] as RadDateTimePicker);
                RadDateTimePicker[] picker = { pickerST, pickerET };
                for (int i = 0; i < picker.GetUpperBound(0) + 1; i++)
                {
                    picker[i].DatePopupButton.ImageUrl = "~/Skins/DWDS/Calendar/DatePickerpopup.gif";
                    picker[i].DatePopupButton.HoverImageUrl = "~/Skins/DWDS/Calendar/DatePickerpopupHover.gif";
                    picker[i].TimePopupButton.ImageUrl = "~/Skins/DWDS/Calendar/Clock.gif";
                    picker[i].TimePopupButton.HoverImageUrl = "~/Skins/DWDS/Calendar/ClockHover.gif";
                    picker[i].Calendar.NavigationPrevImage = "~/Skins/DWDS/Calendar/ArrowLeft.gif";
                    picker[i].Calendar.NavigationNextImage = "~/Skins/DWDS/Calendar/ArrowRight.gif";
                    picker[i].Calendar.FastNavigationNextImage = "~/Skins/DWDS/Calendar/fastNavRight.gif";
                    picker[i].Calendar.FastNavigationPrevImage = "~/Skins/DWDS/Calendar/fastNavLeft.gif";
                }



                RadEditor editorName = ((e.Item as GridEditableItem)["EventName"].Controls[0] as RadEditor);
                RadEditor editorDescription = ((e.Item as GridEditableItem)["EventDescription"].Controls[0] as RadEditor);
                RadEditor[] editor = { editorName, editorDescription };
                for (int i = 0; i < editor.GetUpperBound(0) + 1; i++)
                {
                    editor[i].Skin = "DWDS";
                    editor[i].EnableEmbeddedSkins = false;
                    editor[i].ContentAreaCssFile = "~/Skins/DWDS/EditorContentArea.css";
                    editor[i].CssFiles.Add("~/Skins/DWDS/EditorContentArea.css");
                    editor[i].ToolsFile = "~/ToolsFileLimited.xml";
                }
            }
        }

This worked for setting the RadDateTimePicker images but didn't work for the calendar portion.

I also can't get the editor to show the toolbar/skin correctly.  Am I missing something here?

I am also not sure how to use the UseSubmitBehavior="false" behavior you talk about as I am not using a seperate button.  I am using the Grid's automatic insert/update function.  Would I need to call an OnInsertCommand?  If so, could you provide an example.

Thanks

-Brent

[Dimo]

Hi Brent,

Regarding the RadCalendar images - it seems that currently you can set custom navigation images only if EnableEmbeddedSkins is set to False. This is a bug which we will fix for the next release. Sorry for the inconvenience. Your account has been updated with 500 Telerik points for bringing this issue to our attention.

Regarding the Editor and Firefox issue - if you are not using a separate push submit button, then everything should be fine. I am sending you an attached sample project (assemblies not included). Please, modify it so that the problem is reproduced and send it back to us. Thank you in advance.

All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Curt]

Thank you for the feedback.  I have narrowed down the Insert Update probelm to the EditFormsSettings buttons.  If I use the CommandItemTemplate Update or Insert buttons everything works fine.  If I use the buttons in this section it doesn't work:

<EditFormSettings CaptionDataField="EventDateBeg" CaptionFormatString="Edit properties of Calendar Entry: {0}"  >
                <FormTableItemStyle Wrap="False" Width="300px"></FormTableItemStyle>
                <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                <FormMainTableStyle GridLines="Horizontal" CellSpacing="10" CellPadding="10" BackColor="White" />
                <FormTableStyle CellSpacing="5" CellPadding="5"  Height="110px" BackColor="White" />
                <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                <EditColumn ButtonType="ImageButton" UpdateImageUrl="/Skins/DWDS/Grid/Update.gif"
                    EditImageUrl="/Skins/DWDS/Grid/Edit.gif" InsertImageUrl="/Skins/DWDS/Grid/Insert.gif"
                    CancelImageUrl="/Skins/DWDS/Grid/Cancel.gif" InsertText="Insert record" UpdateText="Update record"
                    UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                </EditColumn>
                <FormTableButtonRowStyle HorizontalAlign="Left" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
            </EditFormSettings>

I have looked through your examples on line and can't see what I am doing different.

I added the EditFormSettings to the example you sent and once I did that it stopped working correctly. 

I then copied from the section from your example: http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/DataEditing/AllEditableColumns/DefaultCS.aspx

<EditFormSettings ColumnNumber="2" CaptionDataField="HireDate" CaptionFormatString="Edit properties of Product {0}">
                    <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                    <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                    <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White"
                        Width="100%" />
                    <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" BackColor="White" />
                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                    <EditColumn ButtonType="ImageButton"
                        UpdateImageUrl="Img\Save.gif" EditImageUrl="Img\Edit.gif" InsertImageUrl="Img\Save.gif" CancelImageUrl="Img\Cancel.gif"
                        InsertText="Insert Order" UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                    </EditColumn>
                    <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                </EditFormSettings>

That didn't work either (in Forefox).

I can send the project back if you want me to open a support ticket for this but if you just copy either of the EditFormSettings in this post and add them to the project attached you should see the same problem.

Thanks

-Brent

[Rumen]

Hi Brent,

We are currently working on a solution and we will do our best to provide it in the beginning of next week.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rumen]

Hi,

The observed behavior is due to an incorrect implementation of the AJAX ASP.NET framework in Firefox.
The problem is that when the beginCallback event is raised by the PageManager, the POST collection to be sent to the server is already filled in. However, since the editor's content area is IFRAME, its content does not participate in the POST collection. This is why the editor relies on the MS AJAX framework to "tell" it a callback is about to occur, Unfortunately, as explained above - when the editor is informed, it is too late. It updates the hidden field with its content, yet, the value of this hidden field was already read by the MS AJAX, so an old value is sent to the server.

Thus there are two scenarios where the editor won't work out of the box in such scenarios in FireFox:

• When the content is submitted with <asp:Button> button. In order to fix the problem you will have to set the "submit" button's property UseSubmitBehavior="false", e.g.
  
  <asp:Button runat="server" ID="butSubmit" UseSubmitBehavior="false" OnCommand="butSubmit_Command" CommandName="0" Text="" />
  
  
• When the content is updated with <input type="image">.

Since the RadGrid UpdateButton Image button is actually an image input element, e.g.

<input type="image" style="border-width: 0px;" onclick="saveEditorContent('RadGrid1_ctl00_ctl05_gridEditor_Notes');" alt="Update" src="/Live%20Demos/WebResource.axd?d=MT-Utr7RB3wcLdr41R6d1Suvy4jZTBVfcGPwIBeOEs88dofPDF3rW_LyD_1vPAYLXz_fFY0YzA7XojarpFleyA2&amp;t=633359244740000000" id="RadGrid1_ctl00_ctl05_UpdateButton" name="RadGrid1$ctl00$ctl05$UpdateButton"/>

you are experiencing this problem.

You can fix the problem by attaching the following JavaScript function

        <script type="text/javascript">         
         function saveEditorContent(editorID)
         {
            var editor = $find(editorID);
            editor.set_html(editor.get_html(true));
         }         
        </script>

, which will set the editor's content back in the editor, to the onclick event of the Update Image Button of RadGrid

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
            {
                GridEditFormItem item = (GridEditFormItem)e.Item;
                RadEditor editor = (RadEditor)item["Notes"].Controls[0];
                (e.Item.FindControl("UpdateButton") as ImageButton).Attributes.Add("onclick", "saveEditorContent('" + editor.ClientID + "');");
            }
        }

For your convenience I have attached the modified aspx and its codebehind files of the Various column editors example that fixes the problem in Firefox.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Curt]

Thanks for the help with the Submit button.  Works great now. 

On another note, I still can't get the custom skins to be applied correctly in the Grid.  I have tried setting the skin and style paths in the code behind and in the html:

<telerik:GridHTMLEditorColumnEditor ID="GridHTMLEditorColumnEditor1" runat="server">
            <Editor runat="server" Skin="DWDS" EnableEmbeddedSkins="false" ID="EditorNotes" Width="820" Height="100px" ContentAreaCssFile="~/Skins/DWDS/EditorContentArea.css" ToolsFile="~/ToolsFileLimited.xml">
                <CssClasses>
                    <telerik:EditorCssClass Value="~/Skins/DWDS/EditorContentArea.css" />
                </CssClasses>
            </Editor>
        </telerik:GridHTMLEditorColumnEditor>

if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                RadEditor editorNotes = ((e.Item as GridEditableItem)["Notes"].Controls[0] as RadEditor);
                editorNotes.Skin = "DWDS";
                editorNotes.EnableEmbeddedSkins = false;
                editorNotes.ContentAreaCssFile = "~/Skins/DWDS/EditorContentArea.css";
                editorNotes.CssFiles.Add("~/Skins/DWDS/EditorContentArea.css");
                editorNotes.ToolsFile = "~/ToolsFileLimited.xml";
            }

I still get styles from my main style sheet slipping through.  I have the most recent prometheus version (just downloaded it to see if there were any new changes).  Any ideas on when this might be fixed?  I am moving most of my projects to these controls and this would be nice to have.

Thanks

[Dimo]

Hello Brent,

Thank you for sending sample code.

I tested your scenario and it is working on my side. Please note that when setting EnableEmbeddedSkins="False", you need to register the skin CSS file manually on the page. Are you sure you are doing this correctly?

In addition, you don't need the declarations for the Editor in the ASPX, as you are setting them in the code-behind. By the way, <CssClasses> and <telerik:EditorCssClass> should be <CssFiles> and <telerik:EditorCssFile>, but this doesn't matter in this case either.

Please check about the CSS file registration and let us know whether it is OK now.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Curt]

Thanks for the quick reply.  I do declare my custom css files in my master page.  Everywhere else I use the editor the styles get picked up correctly.  It appears that the editor in this instance is picking up the custom style first and then any other style sheets declared.

In my scenario I have 3 stylesheets related to the Blueprint css.  I then have a general stylesheet for my pages.  When I run the CSS View Style Information on FireFox from the Web Developer tool bar it shows that the Editor's styles are applied first and then overwritten by the Blueprint and general stylesheet.

On my master page I have:

<head runat="server">
    <link rel="stylesheet" href="~/App_Themes/DWPublic/stylesheets/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="~/App_Themes/DWPublic/stylesheets/blueprint/print.css" type="text/css" media="print">
    <!--[if IE]><link rel="stylesheet" href="~/App_Themes/DWPublic/stylesheets/blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <link rel="stylesheet" href="~/App_Themes/DWDS/stylesheets/custom.css" type="text/css" media="screen, projection">
    <link href="~/Skins/DWDS/Menu.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/Calendar.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/Window.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/Grid.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/Editor.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/ComboBox.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/Input.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/Splitter.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/Input.DWDS.css" rel="stylesheet" type="text/css" />
    <link href="~/Skins/DWDS/Upload.DWDS.css" rel="stylesheet" type="text/css" />
</head>

Here is what the CSS styler shows me is happening for the Editor (when used in a RadGrid):

http://10.0.0.10:8080/Skins/DWDS/EditorContentArea.css

body (line 10)

{

padding-top: 3px;

padding-right: 3px;

padding-bottom: 3px;

padding-left: 3px;

background-image: none;

background-color: Green;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

text-align: left;

}
http://10.0.0.10:8080/App_Themes/DWPublic/stylesheets/blueprint/print.css

body (line 12)

{

line-height: 1.5;

font-family: "Helvetica Neue","Lucida Grande",Arial,Verdana,sans-serif;

color: #000000;

background-color: transparent;

background-image: none;

background-repeat: repeat;

background-attachment: scroll;

background-x-position: 0%;

background-y-position: 0%;

font-size: 10pt;

}
http://10.0.0.10:8080/App_Themes/DWPublic/stylesheets/blueprint/lib/ie.css

body (line 11)

{

text-align: center;

}
http://10.0.0.10:8080/App_Themes/DWPublic/stylesheets/blueprint/lib/reset.css

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td (line 11)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

border-top-width: 0pt;

border-right-width: 0pt;

border-bottom-width: 0pt;

border-left-width: 0pt;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

border-top-color: -moz-use-text-color;

border-right-color: -moz-use-text-color;

border-bottom-color: -moz-use-text-color;

border-left-color: -moz-use-text-color;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baselinebaseline;

}

body (line 28)

{

line-height: 1.5;

background-color: #ffffff;

background-image: none;

background-repeat: repeat;

background-attachment: scroll;

background-x-position: 0%;

background-y-position: 0%;

margin-top: 1.5em;

margin-right: 0pt;

margin-bottom: 1.5em;

margin-left: 0pt;

}
http://10.0.0.10:8080/App_Themes/DWPublic/stylesheets/blueprint/lib/typography.css

body (line 22)

{

font-size: 75%;

}

body (line 30)

{

color: #222222;

font-family: "Helvetica Neue","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

}
http://10.0.0.10:8080/App_Themes/DWDS/stylesheets/custom.css

body (line 2)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

background-color: transparent;

background-image: url(/images/project/tall_top.gif);

background-repeat: repeat-x;

background-attachment: scroll;

background-x-position: left;

background-y-position: top;

font-family: Arial,Tahoma,Verdana,Georgia;

color: #666666;

}

So the last item running is the general stylesheet which sets a background for Body and center aligns the text.  These are the styles that are then being applied to the Editor (so the Editor gets put in Text-Align:Center and I get the background image from my page repeated in the content area).

I am not sure it there is a way to change the order on which styles get applied first.  When I use the Editor outside the RadGrid the order is fine.

Any ideas would be appreciated.

Thanks

-Brent

[Dimo]

Hi Brent,

By default RadEditor loads in its content area all CSS files registered in the page. This is done so that CSS classes specified in the content area HTML code are applied. In order to avoid this CSS file registering, you can explicitly set which CSS files to be loaded in the content area by using the CssFiles property. Please make sure that you are using this property correctly.

I am attaching a simple running project (Telerik.Web.UI assemblies excluded to save bandwidth), which demonstrates how to disable CSS file registering in the RadEditor content area. There is a custom.css file registered in the page, which set a yellow background on the body. If you remove the CssFiles tag from the RadEditor, its content area will become yellow as well.

Let us know if you need further information.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Curt]

That did the trick.  I took the items out of the code behind and put them into

<telerik:GridHTMLEditorColumnEditor ID="GridHTMLEditorColumnEditor1" runat="server">
        <Editor runat="server" Skin="DWDS" EnableEmbeddedSkins="false" ID="EditorNotes" Width="820" Height="100px" ContentAreaCssFile="~/Skins/DWDS/EditorContentArea.css" ToolsFile="~/ToolsFileLimited.xml">
            <CssFiles>
                <telerik:EditorCssFile Value="" />
            </CssFiles>
        </Editor>
    </telerik:GridHTMLEditorColumnEditor>

I guess I was a little confused as to why you have to set the value to nothing.  I assumed that by declaring a specific stylesheet for the editor that it would only use that style sheet.

Anyway I appreciate thelp.  On another note, is there a reason that I have to declare multiple telerik:GridHTMLEditorColumnEditor
for each column in my grid.  I would think it would be more efficient if I could declare the columneditor once and reuse it for multiple columns in the grdi.

Thanks

-Brent

[Missing User]

Hi sl6rp,

You can use only one GridHTMLEditorColumnEditor for each columns. Please find attached a sample web application that demonstrates the needed approach.

Sincerely yours,
Plamen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[chris]

Using a LinkButton for Updates solves the issue of "... incorrect implementation of the AJAX ASP.NET framework in Firefox." I hope this gets fixed in a later release.

<EditFormSettings>
                <EditColumn ButtonType="LinkButton" UniqueName="EditCommandColumn1" >
                </EditColumn>
</EditFormSettings>

Hope this helps.