Question

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. I would also like to point out that the grid is embedded within a tab on a larger display that includes other updatable grids. 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

Answer 1

I never figured out how to implement a “Command” button outside the command column. I was able to use the new custom command available in the 2011 Q3 release (currently beta) to implement my custom edit button as a custom command.

This custom edit button launches a pop-up window containing an edit form for the data on the grid row. I was not able to make the built-in popup edit work for me. Here the code below.

Custom Edit button definition:

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"))
;

Client event needed to attach row specific on-click event to edit button:

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

On-Click wireup: (pulls href from button definition for window URL)

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;
    });
}

Pop-Up Window Launcher:

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;
}