GridClientDeleteColumn does postback when the onCommand client event is used in RadGrid

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 17 Jun 2020 16:20 by ADMIN

Yann

Created on: 12 Feb 2019 13:30

Category: Grid

Type: Bug Report

GridClientDeleteColumn does postback when the onCommand client event is used in RadGrid

Steps to reproduce the error.

Create a ClientDeleteColumn with CommandName="Delete" and wire up the onCommand client-event to RadGrid.

<telerik:RadGrid ID="RadGrid1" runat="server">

<MasterTableView>

<Columns>

<telerik:GridClientDeleteColumn CommandName="Delete" ButtonType="LinkButton"></telerik:GridClientDeleteColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnCommand="OnCommand" />

</ClientSettings>

</telerik:RadGrid>

The event handler does not need to do anything.

function OnCommand(sender, args) {

}

1 comment

ADMIN

Doncho

Posted on: 17 Jun 2020 16:20

Thank you for your time in reporting this problem.

I would like to share two approaches that can serve as a viable workaround:

Use the GridClientDeleteColumn with a CommandName defined. Inside the OnCommand event handler, set a condition to cancel the event when it is fired by a Delete command.

Markup declaration:

<telerik:GridClientDeleteColumn UniqueName="MyDeleteColumn" CommandName="Delete" ButtonType="ImageButton"></telerik:GridClientDeleteColumn>

JavaScript - OnCommand event handler:

function OnCommand(sender, args) {
    if (args.get_commandName() == "Delete") {
        args.set_cancel(true);
    }
}

2. Use a Template Column with a RadButton that executes a JavaScript method on click.

Markup declaration

<telerik:GridTemplateColumn>
    <ItemTemplate>
        <telerik:RadButton ID="RadButton1" runat="server" Text="Delete" AutoPostBack="false" OnClientClicked="OnClientClicked"/>
    </ItemTemplate>
</telerik:GridTemplateColumn>

JavaScript - OnClientCliecked event handler:

function OnClientClicked(sender, args) {
    let buttonElement = sender.get_element();
    let gridElement = $(buttonElement).closest('.RadGrid')[0];
    if (gridElement && gridElement.control) {
        let grid = gridElement.control;
        let masterTable = grid.get_masterTableView();
        masterTable.get_dataItems();

        let rowElement = $(buttonElement).closest('tr')[0];
        if (rowElement && rowElement.control) {
            let dataItem = rowElement.control;
            let itemIndex = dataItem.get_itemIndex();

            masterTable._deleteRow(rowElement, itemIndex);
        }
    }
}

Kind regards,
Doncho
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.