How to create custom DeleteTable toolbar button

8 posts, 1 answers
  1. Brian
    Brian avatar
    4 posts
    Member since:
    Sep 2012

    Posted 03 Jan 2017 Link to this post

    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");
  2.
  3. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 04 Jan 2017 Link to this post

    Hi,

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

    editor.fire("DeleteTable", true);

    Regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Brian
    Brian avatar
    4 posts
    Member since:
    Sep 2012

    Posted 05 Jan 2017 Link to this post

    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.

  7. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 06 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Brian
    Brian avatar
    4 posts
    Member since:
    Sep 2012

    Posted 06 Jan 2017 in reply to Rumen Link to this post

    Hi Rumen,

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

    Thanks

  11. Answer
    Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 09 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Sean
    Sean avatar
    22 posts
    Member since:
    Feb 2018

    Posted 01 Nov 2018 Link to this post

    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

  14.
  15. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 06 Nov 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top