How to create custom DeleteTable toolbar button

[Brian]

Hi,

I want to create a custom toolbar button to delete table I see there is a command DeleteTable, does this support undo/redo??

Should I be able to fire this command simply using??

editor.fire("DeleteTable");

[Rumen]

Hi,

You can delete a table inside the content area using this line of code:

editor.fire("DeleteTable", true);

Regards,
Rumen
Telerik by Progress

[Brian]

This removes the table yes, but undo does not work thought.

As this is a generic command I would expect undo to restore the table, but it undoes the previous action.

[Rumen]

Hi Brian,

There is a private _deleteTable(tableElement) method, which you can use to delete a selected table and add this operation to the Undo/Redo list:

EditorCommandList["TableDelete"] = function (commandName, editor, args) {
    var selectedElement = editor.getSelectedElement();

    while (selectedElement.tagName.toLowerCase() != "table") {
        selectedElement = selectedElement.parentNode;
    }
    if (selectedElement.tagName.toLowerCase() == "table") {
        editor._deleteTable(selectedElement);
    }
};

Best regards,

Rumen
Telerik by Progress

[Brian]

Hi Rumen,

Can you give me an example with it adding the operation to the undo/redo list as well please?

Thanks

[Rumen]

Hi Brian,

The execution of the _deleteTable() method automatically adds an entry in the undo list as you can see in the following video: http://screencast.com/t/HGK9o9E7orDW.

Best regards,

Rumen
Telerik by Progress

[Sean]

Hello,

I have a similar question/problem. For some specific reason, we want to modify existing "DeleteTable" Command to preserve State before and after delete. We are doing something like following:

Telerik.Web.UI.Editor.CommandList["DeleteTable"] = function(commandName, editor, args){

     //some stuff goes here...

    var cmd = new Telerik.Web.UI.Editor.DeleteTable("Delete Table", editor.get_contentWindow(), editor, customManager);

    preserveStateBefore here

     editor.executeCommand(cmd,false,true);

     preserveStateAfter here

}

Just like Modules as shown on this link:

https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/modules/custom-modules 

we setup Editor.DeleteTable = function(){ ... }, Editor.DeleteTable.prototype ={ close:function(){ ...} ...}

then when  i say Telerik.Web.UI.Editor.DeleteTable.registerClass('Telerik.Web.UI.Editor.DeleteTable',Telerik.Web.UI.Editor.CommandBase);   

last line throws javascript exception that something is already registered.

"JavaScript runtime error: Sys.InvalidOperationException: Type Telerik.Web.UI.Editor.DeleteTable has already been registered. The type may be defined multiple times or the script file that defines it may have already been loaded." 

Can you help me with how to do this properly? i thought it might act as pointer and i wont have to update it but that is not the case. Any help will be appreciated.

Thank you,

Sean

[Rumen]

Hello,

You can override the built-in DeleteTable function as shown below:

<script>
    Telerik.Web.UI.Editor.CommandList.DeleteTable =  function(commandName, editor, args)
    {
        console.log("test");
        var oElem = args.value;
        if (!oElem)
        {
            oElem = editor.getSelectedElement();
        }

        if (oElem && "TABLE" != oElem.tagName) //Can be a TD - so obtain the table from the TD.
        {
            oElem = Telerik.Web.UI.Editor.Utils.getElementParentByTag(oElem, "TABLE");
        }

        if (oElem)
        {
            //#track changes
            if (!editor.get_enableTrackChanges() || editor.get_enableTrackChangesOverride())
            {
                var range = editor.getDomRange();
                range.setStartBefore(oElem);
                range.collapse(true);
                $telerik.$(oElem).remove();
                range.select();
            }
            else
            {
                var selection = editor.getSelection();
                Telerik.Web.UI.Editor.TrackChangesUtils.wrapElementInTrackChangeDelete(selection.getParentElement(), editor.get_author());
            }
            //#end track changes
        }
    }
</script>
<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>

This will allow you to execute your own code at the desired location.


Regards,
Rumen
Progress Telerik