[Solved] Problem implementing custom delete button

[Roland]

Currently using Telerik ASP .NET MVC Controls version 2011.2.712

Hello all, I am trying to implement a custom delete button. The reason for this is I have some other custom commands on my grid row and I would like to keep them all together. My grid definition is as follows:

Html.Telerik().Grid<CommentDto>()    

    .Name("ReportCommentGrid")
    .DataKeys(keys => keys.Add(o => o.Id))
    .Editable(editing => editing.Mode(GridEditMode.InLine))

    .DataBinding(dataBinding => dataBinding.Ajax()

           .Select("SelectReportComment", "DebtRisk", new { id = Model.ReportCommentId})
        .Delete("DeleteReportComment", "DebtRisk")

    )
    .Columns(columns => {
        columns.Bound(o => o.AssetGroupTypeCode).Title("Group").Width("10em").ReadOnly();

        columns.Bound(o => o.Text).Title("Comment").Width("25em").ReadOnly();

        columns.Bound(o => o.Id)
            .ClientTemplate("<# if(CreatedBy != null) { #>"

                + "<a class='t-button' href='#' onclick=\"LaunchCommentEditWindow('/DebtRisk/EditReportComment/<#= Id #>')\">Edit</a>"

                + "<a class=\"t-button t-grid-delete\" href=\"#\">Delete</a>"

                + "<# }  #>"

            ).Width("15em").Title("Related Data").ReadOnly(true).HtmlAttributes(new { @class = "t-last"}
    .ClientEvents(events => events.OnRowDataBound("ReportCommentGrid_onRowDataBound"))

    .Footer(false)
    .Render();

I have the following javascript on the "ReportCommentGrid_onRowDataBound" event handler:

function  ReportCommentGrid_onRowDataBound(e)
{    

$(e.row).find('.t-grid-delete').click(function (ev)

    {

        ev.stopPropagation();

        ev.stopImmediatePropagation();

        ev.preventDefault();
        var grid = $("#ReportCommentGrid").data('tGrid');

        grid.deleteRow($(this).closest('tr'));

        return  false;
     });
}

When I run the code and select the "Delete" button I get an "Object doesn't support this property or method" error on the "grid.deleteRow". Does anyone have any suggestions as to why this is happening?

[Roland]

Ended up using the new 2011 Q3 beta that allows me to create my own custom command buttons. I re-implemented my "Edit" command as a custom command button:

commands.Custom("EditReportComment")
    .Text("Edit")
    .Ajax(true)
    .Action("EditReportComment","DebtRisk")
    .HtmlAttributes(new { @class="edit-report-comment" })
    .DataRouteValues(route => route.Add(o => o.Id).RouteKey("id"))
    ;

The I added a OnRowBoundEvent handler

.ClientEvents(events => events.OnRowDataBound("ReportCommentGrid_onRowDataBound"))

To allow me to wire up my own click event for the Edit button

function ReportCommentGrid_onRowDataBound(e)

{

    var editLink = $(e.row).find('.edit-report-comment')

    editLink.click(function (ev)

    {

        ev.stopPropagation();

        ev.stopImmediatePropagation();

        ev.preventDefault();

        LaunchCommentEditWindow(editLink.attr("href"));

        return false;

    });

}

The click event grabs the HREF from defined in the command button and
passes it to a little javascript function that I use to launch a pop-up
editor window.

function LaunchCommentEditWindow(editUrl)
{
    var newWindow = $("<div id='EditReportComment'></div>").tWindow(
        {
            title: 'Edit Comment',
            contentUrl: editUrl,
            modal: true,
            resizeable: false,
            scrollable: false,
            width: 550,
            height: 200,
            onClose: function (e) { e.preventDefault(); newWindow.data('tWindow').destroy(); }
        });
    newWindow.data("tWindow").center().open();
    return false;
}