[Solved] RadEditor Height with Content will not Resize

[Rengo]

Hello,

I am able to dynamically create and resize the RadEditor within a RadGrid with the code listed below.  Although, if any of the previous RadEditors contain content they will not resize to the specified height of 25px, when dynamically adding a new instance of the RadEditor in the RadGrid.

UI:




Code:
 <script type="text/javascript">
         function OnClientLoad(editor) {
             editor.get_text();

             /* Increase height of Instruction Editor */
             editor.attachEventHandler("onfocus", function (e) {
                 editor.setSize("225", "200");
             });
             /* Reset to default height of Instruction Editor */
             editor.attachEventHandler("blur", function (e) {
                 editor.setSize("225", "25");
                 editor.set_html(editor);
             });
         }
    </script>
    <style type="text/css">
    .reContentArea
    {
        white-space: pre-line !important;
        word-wrap: break-word !important;
        max-width: 200px;
        text-align: left;
    }

 <telerik:GridTemplateColumn HeaderText="Instructions" UniqueName="Instructions" HeaderStyle-HorizontalAlign="Center" ItemStyle-Wrap="false">
                <ItemTemplate>
                    <telerik:RadEditor ID="txtInstruction" runat="server" MaxTextLength="1000" Style="overflow:auto; overflow-x: hidden; overflow-y: scroll;" AutoResizeHeight="true" EditModes="Design" ContentAreaMode="Div" ToolbarMode="Default" OnClientLoad="OnClientLoad" Width="220px" Height="25px" ToolsWidth="130px">
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool  Name="ForeColor" />
                            <telerik:EditorTool Name="Bold" />
                            <telerik:EditorTool Name="Italic" />
                            <telerik:EditorTool Name="Underline" />
                        </telerik:EditorToolGroup>
                    </Tools>
                    </telerik:RadEditor>
                </ItemTemplate>
            </telerik:GridTemplateColumn>

How do I dynamically collaps2 all previous RadEditors, that contain content, to 25px when creating a new RadEditor row within the RadGrid?

Thank You in Advance!

[Rumen]

Hello,

Your custom scenario is not supported out-of-the box. Could you please explain your scenario in more detail so that we can see whether it is possible to implement such a solution? Please, also try to isolate it in a simple working project and send it for examination via a support ticket.

Do you add the new item on the client or on the server? Does the text in the editors come from the DB or it is entered or pasted by the end user? Will the text be saved to the database? Do you create a new item for each new editor in the Database?

Basically, RadGrid offers an interface to work with the data of a datasource, but not the ability to create and modify the interface. What you are trying to create is exactly the opposite.
If you want to add new grid items and in the DataSource, please see this live demo: RadGrid Edit Template.

If you apply a command to the Add Instructions button, you can use the OnCommand client-side event of RadGrid to check the page for the available editors and collapse (decrease their height) them. You can learn how to get reference to the editors available on the page in this article: How-to create a javascript array of all particular RadControls on the page.

Best regards,
Rumen
the Telerik team

[Rengo]

Hello Rumen,

Thank you for the follow-up.

We did notice that this functionality is not available out-of-the-box and we have implemented a different solution.

Thank You!