RadEditor in RadGrid Edit Template

4 posts, 0 answers
  1. Michael
    Michael  avatar
    13 posts
    Member since:
    May 2006

    Posted 22 Jul 2010 Link to this post

    RadControls version

    RadControls for ASP.NET AJAX Q1 2010 SP2
    .NET version

    3.5
    Visual Studio version

    2008
    programming language

    C#

    PROJECT DESCRIPTION
    I am allowing users to update SQL records through a rad grid. I use a radEditor in a template. I need to allow users to click a button and import the attribute in the previous record. I am running into a problem with the reference to teh RadEditor Client script. I added this script to handle my custiom tool inside the template like so:

    ASPX Template Markup
    <telerik:GridTemplateColumn HeaderText="Narrative" UniqueName="Narrative" DataField="Narrative">
        <EditItemTemplate>
            <telerik:RadEditor ID="reNarrative" runat="server" SkinID="ScorecardInput" Content='<%#Bind("Narrative") %>'>
            </telerik:RadEditor>
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                Telerik.Web.UI.Editor.CommandList["ImportNarrative"] = function(commandName, editor, args) {
                    editor.pasteHtml('Test narrative here');
                };
                </script>
            </telerik:RadCodeBlock>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="lblNarrative" runat="server" Text='<%# Eval("Narrative") %>'></asp:Label>
        </ItemTemplate>
    </telerik:GridTemplateColumn>


    Code behind (I define the structure of the tools in my code behind)
    EditorToolGroup etgNarrative = new EditorToolGroup();
    EditorTool etImportNarrative = new EditorTool("ImportNarrative");
    etImportNarrative.ShowText = true;
    etImportNarrative.ShowIcon = false;
    etImportNarrative.Text = "Import Last Narrative";
    etgNarrative.Tools.Add(etImportNarrative);
    neweditor.Tools.Add(etgNarrative);


    This works fine unless the user clicks edit on another row in the grid. Once this happens the javascript declaration adding my custom button to the command list does not happen. I get the error "The command ImportNarrative is not implimented yet" - even though I have explicitly done so in the template right after the RadEditor code.



    If I could create a reference to the RadEditor API without placing it on my page, I could put the script at the top of the page so it is always run.

    Any help would be appreciated.
  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 27 Jul 2010 Link to this post

    Hello Michael,

    My recommendation is to put the JavaScript command under the RadGrid declaration and add a check whether the Telerik.Web.UI.Editor is defined, e.g.

    <telerik:RadGrid ID="RadGrid1" Skin="Vista" runat="server" OnNeedDataSource="RadGrid_NeedDataSource"
        OnItemDataBound="RadGrid1_ItemDataBound">
        <MasterTableView AutoGenerateColumns="true">
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" />
            </Columns>
            <EditFormSettings>
                <EditColumn ButtonType="ImageButton" />
            </EditFormSettings>
            <Columns>
                <telerik:GridTemplateColumn HeaderText="Narrative" UniqueName="Narrative" DataField="Narrative">
                    <EditItemTemplate>
                        <telerik:RadEditor ID="reNarrative" runat="server" SkinID="ScorecardInput">
                        </telerik:RadEditor>
                        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                        </telerik:RadCodeBlock>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblNarrative" runat="server" Text='dsadas'></asp:Label>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
     <script type="text/javascript">
         if (Telerik.Web.UI.Editor) {
             Telerik.Web.UI.Editor.CommandList["ImportNarrative"] = function (commandName, editor, args) {
                 editor.pasteHtml('Test narrative here');
             };
         }
    </script>

    You should not put the JavaScript code in the EditItemTemplate because it will be generated multiple times.

    For your convenience I have attached my test project.


    Best regards,
    Rumen
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Jonathan
    Jonathan avatar
    47 posts
    Member since:
    Sep 2010

    Posted 14 Feb 2012 Link to this post

    Hello Rumen,

    For the life of me, I cannot get my custom toolbar button to work using the recommended procedure.

    I too have a RadEditor inside an EditTemplate of a RadGrid. The only difference is that the Editor is inside a DetailTableView and not the MasterTableView. I don't know if this makes a difference. Anyway, it doesn't matter where I put that JavaScript that defines the command (immediately after the Editor definition in the template, immediately after the grid definition, at the bottom of the page, at the top of the page). I always get "The command [CommandName] is not yet implemented".

    Try and see if you can recreate this:
    1. Place a RadEditor inside a RadGrid's DetailTable EditTemplate for any one of the bound fields.
    2. The RadGrid itself is contained inside a RadPanel.
    3. The RadPanel is inside a RadPageView of a MultiPageView.
    4. The RadMultiPageView is inside a RadAjaxPanel

    See if you can get your Editor's custom toolbar function to work.

    Since I wasn't able to get it working, I ended up doing this:
    1. For the RadEditor, I set it's OnClientCommandExecuting property to a JavaScript function I defined in in the main RadCodeBlock.
    2. I define that JavaScript function as follows:
    //Custom Command function for radeditor. The command name is 'Circulate'
    function Editor_OnClientCommandExecuting(sender, args) {
        if (args.get_commandName() == 'Circulate') {
            args.set_cancel(true);
            radalert("Circulate dialog will eventually be called.", 330, 110, "Debug");
        }
    }

    As you can see, I had to cancel the command from being executed, and implement what the command should do after cancelling it. I cancel the command so that the "The [CommandName] has not been implemented yet." error does not appear.

    While this works, can anyone suggest how to get the RadEditor to see the command definition for a custom command when it is that many controls deep? Is this a limitation of the RadGrid control or the RadEditor control? Is it a bug?

    Any answers would be appreciated. Thanks in advance.

    Regards,
    Jonathan.

  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 17 Feb 2012 Link to this post

    Hi,

    If the following code works

    //Custom Command function for radeditor. The command name is 'Circulate'
    function Editor_OnClientCommandExecuting(sender, args) {
        if (args.get_commandName() == 'Circulate') {
           radalert("Circulate dialog will eventually be called.", 330, 110, "Debug");
     
    args.set_cancel(true);
          
        }
    }

    and RadAlert is launched than you can use this approach to write the custom command code just before the args.set_cancel(true) method. This is the other way to execute code through a custom button.

    As to the other approach, my suggestion is to wrap the script tag in RadScriptBlock or RadCodeBlock and test again, e.g.


    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
     <script type="text/javascript">
         if (Telerik.Web.UI.Editor) {
             Telerik.Web.UI.Editor.CommandList["ImportNarrative"] = function (commandName, editor, args) {
                 editor.pasteHtml('Test narrative here');
             };
         }
    </script>
    </telerik:RadScriptBlock>



    All the best,
    Rumen
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top