Delete Row

2 posts, 0 answers
  1. Nina
    Nina avatar
    8 posts
    Member since:
    Aug 2014

    Posted 01 Feb 2019 Link to this post

    Hi,

    for my scenario I need to override the DeleteRow javascript event. Please see my code below:

    function OnClientItemClicked(sender, args) {
            var selectedItemValue = args.get_item().get_value();
            if (selectedItemValue === "CommandDeleteRow") {
                var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
                var activeSheet = spreadsheet.get_activeSheet();
                activeSheet.deleteRow(0);
            }
    }

    Instead of deleteRow(0) I need to get the correct row index. How can this be achieved?

    Thanks in advance and best regards,

    Nina

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5072 posts

    Posted 04 Feb 2019 Link to this post

    Hi Nina,

    The .deleteRow() method only takes an index and it is up to the developer to decide what index to pass to it, it cannot determine that on its own: https://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/sheet/methods/deleterow. The definition of "correct" is up to the project's logic.

    If you want to prevent the deletion of rows based on a condition, you should use the deleteRow event: https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/events/deleterow. Here's how to attach it after the widget initialization: https://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#event-binding-after-initialization. Here's an example:

    <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">
    </telerik:RadSpreadsheet>
    <script>
        Sys.Application.add_load(function () {
            var kSpreadsheet = $find("<%=RadSpreadsheet1.ClientID%>").get_kendoWidget();
            kSpreadsheet.bind("deleteRow", onDeleteRow);
        });
     
        function onDeleteRow(arg) {
            //see the event arguments here and how to cancel it:
     
            arg.preventDefault();
     
            console.log("The row at index " + arg.index + " on sheet " + arg.sheet.name() + " was about to be deleted but the code prevented it");
             
        }
    </script>

    which can work with the built-in commands on a customized menu as well:

    <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">
           <ContextMenus>
            <CellContextMenu OnClientItemClicked="CellContextMenuItemClicked">
                <Items>
                    <telerik:RadMenuItem Text="Copy" Value="CommandCopy"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Paste" Value="CommandPaste"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="HideRow" Value="CommandHideRow"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="HideColumn" Value="CommandHideColumn"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Alert" Value="CustomAlert"></telerik:RadMenuItem>
                </Items>
            </CellContextMenu>
            <RowHeaderContextMenu OnClientItemClicked="CellContextMenuItemClicked">
                <Items>
                    <telerik:RadMenuItem Text="HideRow" Value="CommandHideRow"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="DeleteRow" Value="CommandDeleteRow"></telerik:RadMenuItem>
                </Items>
            </RowHeaderContextMenu>
            <ColumnHeaderContextMenu>
                <Items>
                    <telerik:RadMenuItem Text="HideColumn" Value="CommandHideColumn"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="DeleteColumn" Value="CommandDeleteColumn"></telerik:RadMenuItem>
                </Items>
            </ColumnHeaderContextMenu>
        </ContextMenus>
    </telerik:RadSpreadsheet>
    <script>
        Sys.Application.add_load(function () {
            var kSpreadsheet = $find("<%=RadSpreadsheet1.ClientID%>").get_kendoWidget();
            kSpreadsheet.bind("deleteRow", onDeleteRow);
        });
     
        function onDeleteRow(arg) {
            //see the event arguments here and how to cancel it:
     
            arg.preventDefault();
     
            console.log("The row at index " + arg.index + " on sheet " + arg.sheet.name() + " was about to be deleted but the code prevented it");
             
        }
     
        function CellContextMenuItemClicked(sender, args) {
            alert(args.get_item().get_value());
        }
    </script>


    Regards,
    Marin Bratanov
    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