2

Using telerik mvc grid with ajax, give me some headaches. I am trying to insert a column with some simple links, to perform the same behaviors that Delete command does (because I just don't want the default command column). But I am fail. The default Delete command works great: delete the record and refresh the grid. My custom link, only delete the record, but the grid is not refreshed.

Here is my code. Maybe I am missing a simple thing.

View:

@model  Benner.Saude.Mapeamento.Especialidade[]


@(Html.Telerik().Grid(Model)
    .Name("Grid")
    .DataKeys(keys => keys.Add(c => c.Handle))         
    .DataBinding(dataBinding => dataBinding
        .Ajax()
        .OperationMode(GridOperationMode.Client)
        .Select("AjaxPesquisar", "Especialidade")
        .Update("AjaxAtualizar", "Especialidade")
        .Delete("Delete", "Especialidade"))
    .HtmlAttributes(new { @class = "grid-padrao" })
    .ClientEvents(events => events
        .OnDataBound("atualizarCss")
    )
    .Columns(columns =>
    {
        .ClientTemplate("<text><a href='/Especialidade/Delete/33' class='formatacao delete-link' image='delete'/></text>")
        .Width(20).Title("Commands");  ***this does not works ***


        columns.Bound("Descricao").Title("Descrição");
        columns.Bound("Handle").Title("Código");
        columns.Command(commands =>
        {
            commands.Delete().ButtonType(GridButtonType.BareImage); ***this works***

        }).Width(70);

    })        
    .Pageable()
    .Sortable()

    )

Controller:

    [AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get)]
    [GridAction]
    public ActionResult Delete(int id)
    {
        cadastro.ExcluirEspecialidade(Session["token"].ToString(), id);
        Especialidade[] especialidades = consulta.PesquisarEspecialidades(Session["token"].ToString());
        return View(new GridModel(especialidades));
    }

Javascript:

$("a.delete-link").click(function (event) {
    var link = $(this)[0];

    if (confirm("Confirm delete?")) {
        $.post(link.href);
    }

    return false;
});
Beetlejuice
  • 4,292
  • 10
  • 58
  • 84

1 Answers1

2

you have to get grid object and call rebind in ajax callback like

$("a.delete-link").click(function (event) {
    var link = $(this)[0];

    if (confirm("Confirm delete?")) {
        $.post(link.href, function(data)
          {
             var $grid = $("#Grid").data("tGrid");
             $grid.rebind();
          });
    }

    return false;
});

In $("#Grid") "Grid" is name of your grid control on the page. rest is syntax

Muhammad Adeel Zahid
  • 17,474
  • 14
  • 90
  • 155