[Solved] telerik grid delete event

[Pablo]

Hi,

I've got a telerik grid and with button on each row to delete the item. It works fine, but i would like to call a javascript function exactly after the row is deleted. The reason is that I want to show a message in a panel outside the grid just telling the user that the row has been deleted. I need to do it in that way.

I have read that using OnDataBound event I might be able to do it but I cannot see how.

Thanks

[Dimo]

Hi Pablo,

I suppose you are using client-side (e.g. AJAX) binding. Here is a starting point for you:

Html.Telerik().Grid().ClientEvents(ev => ev.OnDataBound("attachClickAndNotify"))

var deleteFlag = null; // global variable

function attachClickAndNotify(e)
{
    if (deleteFlag) {
        deleteFlag = null;
        var grid = $("#Grid").data("tGrid");
        // display notification
    }

    $(this).bind("click", function(ev) {
        if (ev.target.className && ev.target.className.indexOf("t-grid-delete") != -1) {
            var grid = $("#Grid").data("tGrid");
            var dataItem = grid.dataItem($(ev.target).closest("tr"));
            // deleteFlag = ... ;
        } else {
            deleteFlag = null;
        }
    } );

    $("a.t-link, .t-grid-filter", this).bind("click", function(ev) {
        deleteFlag = null;
    } );
}

Upon receiving a click event from a delete button, you can store information about the item that will be deleted for use after the rebinding.

A tricky moment occurs if the user clicks on "Delete" and then cancels the operation, then deleteFlag will no longer be null, so a notification will be displayed if the user navigates to another page, sorts, or executes any action that causes rebinding. That's why you need to take care of clearing the flag in these cases.

All the best,
Dimo
the Telerik team

[Pablo]

Thanks for the answer but it's not working for me, because of this bit of code inside the attachClickAndNotify function:

$(this).bind("click", function(ev) {

        if(ev.target.className && ev.target.className.indexOf("t-grid-delete") != -1) {

            vargrid = $("#Grid").data("tGrid");

            vardataItem = grid.dataItem($(ev.target).closest("tr"));

            // deleteFlag = ... ;

        } else{

            deleteFlag = null;

        }

    } );

with the first $(this) selector i'm getting the div which contains the whole grid, and binding that function inside to the event click. However nothing happens when I delete a row in the grid. The function is never called as the binding is not working properly. Shouldn't i bind that function to other element got using other selector?

Any ideas?

[Dimo]

Hello Pablo,

The $(this) selector is OK, because it is the Grid wrapper and it will fire all click events that bubble, including the ones on the delete buttons (unless you are doing something to prevent event bubbling).

Please see the attached video and compare with your implementation. Let me know if you need additional information.

Regards,
Dimo
the Telerik team

[Pablo]

Hi,

the code in the video is exactly the same i have, and it didn't solve my problem.

@model List<IRIS.Aurora.Domain.Tax.Dialogs.SA102.CarFuelDetails>

@(Html.Telerik().Grid(Model)
        .Name("CarFuelBenefitsGrid")
        .Localizable("en-GB")
        .DataKeys(keys => keys.Add(c => c.EntryId))
            .ClientEvents(events => events.OnRowSelected("onCarFuelRowSelected").OnDataBound("attachClickAndNotify"))
        .ToolBar(toolbar => toolbar.Template(@<text>
            <a class="AddNewCarFuelBenefit t-button t-button-icon"><span class="t-icon t-add"></span></a>
        </text>))
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Delete("_AjaxDeleteSA102GridData", "TaxForm", new { pobID = (int)ViewData["pobID"], dialogType = (string)ViewData["dialogType"] })
                .Select("_AjaxGetSA102GridData", "TaxForm", new { pobID = (int)ViewData["pobID"], dialogType = (string)ViewData["dialogType"] });
        })

        .Columns(columns =>
        {
            columns.Bound(o => o.EntryId).Width(100).Hidden();
            columns.Bound(o => o.CarMake).Width(100);
            columns.Bound(o => o.CarModel).Width(160);
            columns.Bound(o => o.ApprovedCo2);
            columns.Bound(o => o.CarBenefitAmount).Format("{0:c}");
            columns.Bound(o => o.FuelBenefitAmount).Format("{0:c}");

            columns.Command(commands =>
            {
                commands.Delete().ButtonType(GridButtonType.Image);
            }).Width(180).Title("");
        })
        .Scrollable(scrolling => scrolling.Enabled(true))
        .Sortable()
        .Selectable()
        .Pageable(paging => paging.Enabled(false))
        .Filterable()
        .Footer(false))

And my js code:

function attachClickAndNotify(e) {

    if (deleteFlag) {
        deleteFlag = null;
        vargrid = $("#CarFuelBenefitsGrid").data("tGrid");
    }
    $(this).bind("click", function(ev) {
        alert('Se ha hecho el binding correctamente');
        if (ev.target.className && ev.target.className.indexOf("t-grid-delete") != -1) {
            alert('1');
            vargrid = $("#CarFuelBenefitsGrid").data("tGrid");
            vardataItem = grid.dataItem($(ev.target).closest("tr"));
            deleteFlag = 'JUAS' ;
        } else {
            deleteFlag = null;
        }
    });
    $("a.t-link, .t-grid-filter", this).bind("click", function (ev) {
        deleteFlag = null;
    });

The problem is in the line $(this).bind("click", function(ev) { ... })

If i put an alert instead of function(ev) as the last argument of the binding, it works. But as soon as i define the function there, it doesn't do the binding properly.

Any ideas?

Thanks in advance

[Atanas Korchev]

Hi Pablo,

You can try a different solution - to use the OnDelete event. It is raised when the user clicks the delete button:

var deleteFlag = false;

function onDelete(e) {
   deleteFlag = 'JUAS' ;
}

function onDataBound(e) {
  if (deleteFlag) {
   //show the notification
   deleteFlag = null;
 } 
}

Kind regards,
Atanas Korchev
the Telerik team