[Solved] AJAX Update Action in Grid Detail

[Kevin]

I'm looking for a way to add a button to each row in the grid, where clicking the button makes an AJAX request to the controller containing the ID of the row the button is in.  The controller will then set a boolean flag in a database, and the grid will rebind using the AJAX select method.

I didn't see any examples of this on the demo pages.

[frederic rybkowski]

Hi Kevin,

You can try :

columns.Bound(o => o.isChecked)
    .ClientTemplate(
            Ajax.ActionLink(
                    "<#=isChecked_str#>",
                    "_ToggleChecked",
                    "Controller",
                    new { id = "<#=id#>", value = "<#= isChecked #>" },
                    new AjaxOptions { OnSuccess = "RebindTheGrid" },
                    ).ToString()
    )

where RebindTheGrid is a java function that call the rebind of the grid.

[Kevin]

That renders a cell, but doesn't provide a link or any other type of interactive UI element.  I must be missing something, and I've not used the Ajax.ActionLink() method before.

EDIT:  It does render properly, but only after the grid has performed an AJAX refresh.  On the first load it just shows a check box.

[frederic rybkowski]

Hi Kevin,

Grid Ajaxed.

<% Html.Telerik().Grid<Employees>()
DataBinding(dataBinding => dataBinding.Ajax().Select("_getEmployee", "Employee"}))

[AcceptVerbs(HttpVerbs.Post)]

public virtual AjaxViewResult _ToggleChecked(int id, bool value)

{
  // your update here
  return null;
}

for the rebind:

function GridRebind(gridname) {
    var Grid = $('#' + gridname).data('tGrid');
    Grid.rebind();
}