CODEWITHSUNDEEP
asp.net-mvcrazortelerik
HitLikeAHammer
HitLikeAHammer

Reputation: 2695

Ajax Action link behaves strangely when inside a Telerik MVC Grid

A have a razor view with a Telerik MVC grid. The first column has a link for deleting the record. The link is an Ajax Actionlink.

@(
 Html.Telerik().Grid<QMS.Models.CustomerTableRow>(Model)
        .Name("CustomerTable")
        .Columns(c =>
        {
            c.Template(
                @<text>
                @Ajax.ActionLink("Delete","Delete", new { key = item.CustomerKey },new AjaxOptions{ Confirm="Delete this Customer?",UpdateTargetId = "CustomerTable", HttpMethod = "Delete"})
                </text>
                );
            c.Bound(col => col.FirstName);
            c.Bound(col => col.LastName);
            c.Bound(col => col.Email);
            c.Bound(col => col.HomePhone);
        })
        .Pageable()
        .Sortable()
        .Resizable(res => res.Columns(true))
        .Scrollable()
        )

//Action Method in view
 //[HttpDelete]  <-- can't have this or else a "Resource not found" error occurs
        public ActionResult Delete(String key)
        {
                repo.DeleteCustomer(key);
                return PartialView("CustomerTable", repo.GetCustomerTable());
        }

Some odd things happen when I click on the "Delete" link that I create in the template column. First, the confirmation message does not appear but the delete action is still called. Second, even though I have HttpMethod="Delete", If I decorate the action method with [HttpDelete] I get a "resource not found" error. Finally, this grid is in a partial view and the action method returns the partialview after the delete however all formatting is lost, it's as if the CSS file is no longer there. None of this happens if the link is rendered outside of the grid. I am using version 2011.1.315

Upvotes: 1

Views: 1180

Answers (2)

Ju66ernaut
Ju66ernaut

Reputation: 2691

I realize this is pretty late but I had a very similar problem that I finally figured out and this link came up during search results.
I was trying to add an Ajax.Actionlink to a client template for MVC grid. Finally found the issue to stem from the UpdateTargetID = "myElement". Ajax.ActionLink generates an unescaped "#" for the update target.
My work around was: 

columns.Bound(p => p.ID).Title("myTitle")
                            .ClientTemplate(Ajax.ActionLink("View", "myAction", "myController", new { myParam = "#=ID#" }, new AjaxOptions() { OnSuccess = "myJSFunction" }).ToHtmlString());


Then: 

function myJSFunction(response) {
    $("#updateTargetElement").html(response);
}


Hope this helps someone.

Upvotes: 1

Nick Albrecht
Nick Albrecht

Reputation: 16928

Just curious, are you using jQuery 1.6.1 (I believe this is the most recent at this time) or 1.5.1 the version telerik provides?

For example in my app I'm using @Html.Telerik().ScriptRegistrar().jQuery(false) to include the scripts Telerik needs but to not include jQuery so that I can include it myself and have control over which version it uses

Do you get the same behavior regardless of which version you include?

I'm assuming since it works outside of the grid you have jquery.unobtrusive-ajax.min.js referenced.

Upvotes: 0

Related Questions