This is a migrated thread and some comments may be shown as answers.

adding Command column with Edit() or Delete() buttons prevents Ajax calls from working

3 Answers 94 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Richard
Top achievements
Rank 1
Richard asked on 23 Mar 2011, 05:02 PM
When defining a Command column with Edit and/or Delete buttons, an unrelated Ajax call fails.  Column definition like:
.Columns(columns =>
{
    columns.Bound(m => m.Quantity).Width(100);
    ...
    columns.Command(commands =>
        {
            commands.Edit().ButtonType(GridButtonType.Text);
                commands.Delete().ButtonType(GridButtonType.Text);
    }).Width(180).Title("Commands");
})
The Select() command works fine and the order of commands doesn't appear to make a difference. If Edit() or Delete() are used, Ajax calls (outside of the grid) fail. Note the grid itself is using Ajax() binding:
<%= Html.Telerik().Grid<RecipeIngredientModel>()
    .Name("IngredientsList")
    //.TableHtmlAttributes(new { style = "table-layout:fixed" })
    .DataKeys(keys => keys.Add(m => m.Id))
    .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).HtmlAttributes(new { value = "Add new ingredient", style = "margin-left:0" }))
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Select("SelectAjaxIngredients", "Cookbook", new { recipeId = Model.Id })
        .Insert("InsertAjaxIngredient", "Cookbook", new { recipeId = Model.Id })
        .Update("UpdateAjaxIngredient", "Cookbook", new { recipeId = Model.Id })
        .Delete("DeleteAjaxIngredient", "Cookbook", new { recipeId = Model.Id }))
    .Columns(columns =>
    {
        columns.Bound(m => m.Quantity).Width(100);
        columns.Bound(m => m.Unit.Unit).Width(130);
        columns.Bound(m => m.Ingredient).Width(230).ClientTemplate("<#= Ingredient.IngredientName #>").Title("IngredientId");
        columns.Bound(m => m.Preparation).Width(500);
        columns.Command(commands =>
        {
            commands.Edit().ButtonType(GridButtonType.Text);
            commands.Delete().ButtonType(GridButtonType.Text);
        }).Width(180).Title("Commands");
    })
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .Footer(true)
%>
That is, the Ajax call is received in the controller, executes and returns but triggers an error rather than success on the page. Ajax code is like:
$.ajax({
    type: "POST",
    url: "/Home/TestJson",
    dataType: "json",
    data: ({ 'recipeId': 1, 'ingredientInfoId': 10 }),
    success: function (data) {
        alert("Success from Json ");
    },
    error: function (req, status, error) {
        alert("failure from Json");
    }
});
with controller action:
[HttpPost]
public JsonResult TestJson(int recipeId, int ingredientInfoId)
{
    return Json(new { string.Empty });
}
GET and POST have the same affect.
Any ideas for a workaround or fix?

3 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 1
answered on 01 May 2011, 01:35 AM
Richard, 
Have you found a resolution to this yet?  I am having the same issue.

Steve
0
Richard
Top achievements
Rank 1
answered on 01 May 2011, 01:45 AM
Hi Steve,
I submitted a bug which has mysteriously disappeared but in any case, I haven't had any response to the bug or this post - disheartening because one of the main reasons I switched to Telerik controls is because of the great support I heard they provide.  Since this bug is so easily reproducable and causes such a serious error, I really hope to have a resolution soon.
In any case, my current workaround is to not implement Edit() or Delete() at the row level but to make the grid Selectable() and implement buttons outside the grid that invoke Insert, Edit, Delete and other row based operations on the currently selected row.  Actually, in my current UI, this works out better (although not 100% reliably working yet) because I need the rows to have user defined ordering (Move Up, Move Down).  I haven't found a way to invoke user defined events at the row level other than to take invocation out of the grid.
I'd really love to see Telerik provide a canned solution to this sort of UI (Grid with a set of buttons that operate on the row and user defined buttons/event triggers as well).
All the best,
Richard.
0
Carl
Top achievements
Rank 1
answered on 03 May 2011, 12:11 AM
Please add your votes in favor of Feature Request for better support for row-based custom commands here:

http://www.telerik.com/support/pits.aspx#/public/aspnet-mvc/5485
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Carl
Top achievements
Rank 1
Share this question
or