title: Telerik ASP .NET MVC Grid - adding custom delete button
body: <p>Currently using Telerik ASP .NET MVC Controls version 2011.2.712</p>
  
  <p>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:</p>
  
  <pre><code>Html.Telerik().Grid&lt;CommentDto&gt;()
      .Name("ReportCommentGrid")
      .DataKeys(keys =&gt; keys.Add(o =&gt; o.Id))
      .Editable(editing =&gt; editing.Mode(GridEditMode.InLine))
      .DataBinding(dataBinding =&gt; dataBinding.Ajax()
          .Select("SelectReportComment", "DebtRisk", new { id = Model.ReportCommentId })
          .Delete("DeleteReportComment", "DebtRisk")
          )
      .Columns(columns =&gt;
      {
          columns.Bound(o =&gt; o.AssetGroupTypeCode).Title("Group").Width("10em").ReadOnly();
          columns.Bound(o =&gt; o.Text).Title("Comment").Width("25em").ReadOnly();
          columns.Bound(o =&gt; o.Id).ClientTemplate(
                  "&lt;# if(CreatedBy != null) { #&gt;"
                  + "&lt;a class='t-button' href='#' onclick=\"LaunchCommentEditWindow('/DebtRisk/EditReportComment/&lt;#= Id #&gt;')\"&gt;Edit&lt;/a&gt;"
                  + "&lt;a class=\"t-button t-grid-delete\" href=\"#\"&gt;Delete&lt;/a&gt;"
                  + "&lt;# }  #&gt;"
          ).Width("15em").Title("Related Data").ReadOnly(true).HtmlAttributes(new { @class = "t-last"})
      })
      .ClientEvents(events =&gt; events.OnRowDataBound("ReportCommentGrid_onRowDataBound"))
      .Footer(false)
      .Render();
  </code></pre>
  
  <p>I have the following javascript on the "ReportCommentGrid_onRowDataBound" event handler:</p>
  
  <pre><code>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;
      });
  }
  </code></pre>
  
  <p>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</p>