Delete Row

[Nina]

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

[Marin Bratanov]

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:
        //https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/events/deleterow

        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:
        //https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/events/deleterow

        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