Rad Editor text area and tool bar move down when the editor is placed within a radgrid

[Germán]

Hi,

I have a rad editor within a rad grid master table view item template whose toolbar and text area move down like the picture attached, I tried a few things to solve the problem, set the content area mode to Iframe and added the following to the head of the page:

​ <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>'
rel="stylesheet" type="text/css" />
<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Simple.Editor.Black.css") %>'
rel="stylesheet" type="text/css" />
<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Window.css") %>'
rel="stylesheet" type="text/css" />
<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Simple.Window.Black.css") %>'
rel="stylesheet" type="text/css" />
</telerik:RadCodeBlock>


Like one of the forum post suggests but not luck. Please note that the rad grid does not have its header shown and that I use the ms-grid CSS to give the item template the layout desired, and the rad editor is within a rad ajax panel that is within a rad panel item, here is the rad grid aspx:

​ <telerik:RadGrid ID="PartsRadGrid" runat="server" ShowHeader="False" OnItemDataBound="PartsRadGrid_ItemDataBound"
OnItemCommand="PartsRadGrid_ItemCommand" BorderStyle="None" OnPreRender="PartsRadGrid_PreRender" EnableHierarchyExpandAll="true" OnItemCreated="PartsRadGrid_ItemCreated">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="id, part_statistic">
<AlternatingItemStyle BackColor="White" />
<NestedViewTemplate>
<telerik:RadGrid ID="PartsImagesRadGrid" runat="server" ShowHeader="false"
OnItemCommand="PartsImagesRadGrid_ItemCommand" OnItemDataBound="PartsImagesRadGrid_ItemDataBound"
OnItemCreated="PartsImagesRadGrid_ItemCreated">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="id">
<AlternatingItemStyle BackColor="White" />
<ItemTemplate>
<div id="part_images">
<div class="grid_long">
<div class="grid_left-left"></div>
<div class="colspan_left-right-right">
<telerik:RadBinaryImage ID="RadBinaryImage" runat="server" DataValue='<%# DataBinder.Eval(Container, "DataItem.image") %>' />
</div>
</div>
<div class="grid_long">
<div class="grid_left-left">
<label>Comments</label>
</div>
<div class="colspan_left-right-right">
<telerik:RadTextBox ID="CommentsImageRadTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.comments") %>'
TextMode="MultiLine" Width="300px">
</telerik:RadTextBox>
</div>
</div>
<div class="grid">
<div class="grid_left-left"></div>
<div class="colspan_left-right-right">
<asp:Button ID="EditPartsImageButton" runat="server" Text="Edit Picture" CommandName="EditPartImage" CommandArgument='<%# DataBinder.Eval(Container, "DataItem.id") %>' />
<asp:Button ID="DeletePartsImageButton" runat="server" Text="Delete Picture" CommandName="DeletePartImage" CommandArgument='<%# DataBinder.Eval(Container, "DataItem.id") %>' />
</div>
</div>
</div>
</ItemTemplate>
<NoRecordsTemplate></NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumn DataField="id" DataType="System.Int32" FilterControlAltText="Filter id column" HeaderText="id" ReadOnly="True" SortExpression="id" UniqueName="id">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="form_id" FilterControlAltText="Filter form_id column" HeaderText="form_id" SortExpression="form_id" UniqueName="form_id">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="part_id" DataType="System.Int32" FilterControlAltText="Filter id column" HeaderText="id" ReadOnly="True" SortExpression="id" UniqueName="id">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="comments" FilterControlAltText="Filter comments column" HeaderText="comments" SortExpression="comments" UniqueName="comments">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<asp:Panel ID="UploadPartsImagePanel" runat="server" CssClass="UploadPartImagesPanel">
<div id="part_images_upload">
<div class="grid_long">
<div class="grid_left-left">
<label>Add Image(s)</label>
</div>
<div class="colspan_left-right-right">
<telerik:RadAsyncUpload ID="UploadPartsImagesRadAsyncUpload" runat="server" MultipleFileSelection="Automatic"
AllowedFileExtensions="jpeg,.jpg,.png,.gif">
</telerik:RadAsyncUpload>
<div id="part_images_upload_control_button">
<asp:Button ID="UploadPartsImageButton" runat="server" Text="Upload" CommandName="UploadPartImage" CommandArgument='<%# DataBinder.Eval(Container, "DataItem.id") %>' />
</div>
</div>
</div>
</div>
</asp:Panel>
</NestedViewTemplate>
<ItemTemplate>
<div id="parts">
<div class="grid">
<div class="grid_left-left">
<label>Part Number*</label>
</div>
<div class="grid_left">
<telerik:RadTextBox ID="part_itemRadTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.item") %>'></telerik:RadTextBox>
<asp:RequiredFieldValidator ID="part_itemRadTextBoxValidator" ValidationGroup="Save"
runat="server" Display="Static" ControlToValidate="part_itemRadTextBox" ForeColor="red" ErrorMessage="*"></asp:RequiredFieldValidator>
</div>
<div class="grid_middle-left">
<label>Description</label>
</div>
<div class="grid_middle-right">
<telerik:RadTextBox ID="PartDescriptionRadTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.description") %>'></telerik:RadTextBox>
</div>
<div class="grid_right">
<label>Part Hours</label>
</div>
<div class="grid_right-right">
<telerik:RadNumericTextBox ID="PartHoursRadNumericTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.part_hours") %>'
NumberFormat-DecimalDigits="0">
</telerik:RadNumericTextBox>
</div>
</div>
<div class="grid">
<div class="grid_left-left">
<label>Quantity</label>
</div>
<div class="grid_left">
<telerik:RadNumericTextBox ID="PartQuantityRadNumericTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.quantity") %>'
NumberFormat-DecimalDigits="0">
</telerik:RadNumericTextBox>
</div>
<div class="grid_middle-left">
<label>Serial Number</label>
</div>
<div class="grid_middle-right">
<telerik:RadTextBox ID="PartSerialNumberRadTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.serial_number") %>'></telerik:RadTextBox>
</div>
<div class="grid_right">
<label>Position</label>
</div>
<div class="grid_right-right">
<telerik:RadNumericTextBox ID="PositionRadNumericTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.position") %>'
NumberFormat-DecimalDigits="0">
</telerik:RadNumericTextBox>
</div>
</div>
<div class="grid">
<div class="grid_left-left">
<label>Statistic</label>
</div>
<div class="grid_left">
<telerik:RadDropDownList ID="PartStatisticDropDownList" OnDataBinding="PartStatisticDropDownList_DataBinding"
runat="server" DefaultMessage="Select Part Statistic" SelectedValue='<%# DataBinder.Eval(Container, "DataItem.part_statistic") %>'>
</telerik:RadDropDownList>
</div>
<div class="grid_middle-left">
<label>Reusable</label>
</div>
<div class="grid_middle-right">
<asp:CheckBox ID="ReusableCheckBox" runat="server" Checked='<%# DataBinder.Eval(Container, "DataItem.reusable") %>' />
</div>
<div class="grid_right"></div>
<div class="grid_right-right"></div>
</div>
<div class="grid_long">
<div class="grid_left-left">
<label>Comments</label>
</div>
<div class="colspan_left-right-right">
<div id="parts_comment">
<%--This rad editor causes problems--%>
<telerik:RadEditor ID="PartsCommentRadEditor" runat="server" Content='<%# DataBinder.Eval(Container, "DataItem.comments") %>'
Width="100%" Height="100px" BorderStyle="Solid" BorderColor="Gray" BorderWidth="1" EditModes="Design" ContentAreaMode="Iframe">
<CssFiles>
<telerik:EditorCssFile Value="Styles/RadEditor.css" />
</CssFiles>
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Cut" />
<telerik:EditorTool Name="Copy" />
<telerik:EditorTool Name="Paste" />
<telerik:EditorTool Name="SpellCheck" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
</div>
</div>
</div>
<div class="grid">
<div class="grid_left-left"></div>
<div class="colspan_left-right-right">
<asp:Button ID="DeletePartButton" runat="server" Text="Delete Part" CommandName="Delete" />
</div>
</div>
</div>
</ItemTemplate>
<NoRecordsTemplate>
</NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumn DataField="id" DataType="System.Int32" FilterControlAltText="Filter id column" HeaderText="id" ReadOnly="True" SortExpression="id" UniqueName="id">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="form_id" FilterControlAltText="Filter form_id column" HeaderText="form_id" SortExpression="form_id" UniqueName="form_id">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="item" FilterControlAltText="Filter item column" HeaderText="item" SortExpression="item" UniqueName="item">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="description" FilterControlAltText="Filter description column" HeaderText="description" SortExpression="description" UniqueName="description">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="part_hours" FilterControlAltText="Filter part_hours column" HeaderText="part_hours" SortExpression="part_hours" UniqueName="part_hours">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="comments" FilterControlAltText="Filter comments column" HeaderText="comments" SortExpression="comments" UniqueName="comments">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="position" DataType="System.Int32" FilterControlAltText="Filter position column" HeaderText="position" SortExpression="position" UniqueName="position">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="serial_number" FilterControlAltText="Filter serial_number column" HeaderText="serial_number" SortExpression="serial_number" UniqueName="serial_number">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>

Any ideas on what could be causing the problem? or more importantly do you have any ideas on how to solve it?

Thanks,
Germán

[Niko]

Hello,

Indeed there is a certain incompatibility between the styles of the RadGrid control and the RadEditor control. We will look into it and try to fix this for future releases.
In the meantime you can use the following style rules as a workaround:

div.RadEditor .reLayoutWrapper td {
    padding: 0;
    border: 0 none;
}

div.RadEditor .reLayoutWrapper .reLeftVerticalSide, div.RadEditor .reLayoutWrapper .reRightVerticalSide {
    padding: 1px;
}

Hope this helps.

Regards,
Niko
Telerik