This is a migrated thread and some comments may be shown as answers.

Delete Row

1 Answer 49 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
Nina
Top achievements
Rank 1
Nina asked on 01 Feb 2019, 12:22 PM

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

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 04 Feb 2019, 04:17 PM
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.
Tags
Spreadsheet
Asked by
Nina
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or