RadEditor in RadGrid Edit Template

[Michael]

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.

[Rumen]

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

[Jonathan]

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.

[Rumen]

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