Grid_OnCommand is not firing

[Max]

Hey all
I am not using Server binding and I do not want to call ".Action" from command => commands.Action()
Here is my code:

        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("_SelectAjax", "Site")
                .Insert("_InsertAjax", "Site")
                .Update("_UpdateAjax", "Site")
                .Delete("_DeleteAjax", "Site");
        })
        .Columns(columns =>
        {
            columns.Bound(p => p.ID).Width(210).Hidden(true);
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(buttonType);
                commands.Delete().ButtonType(buttonType);
                commands.Custom("viewDetails").Text("D").ImageHtmlAttributes(new { @class = "my-audit-command" }).ButtonType(GridButtonType.ImageAndText);
            }).Width(150).Title("Commands");
        })

function Grid_onCommand(e) {
    alert("onCommand");
    if (e.name == "viewDetails") {
        alert("viewDetails");
        //call a partial view here which will render another Grid inside a popup window    }
}

Thank you
Max

[Jana]

Dear Telerik-Team,
is there any feedback on this - I experience the same problem, just as Max I am not using Server binding.
The events for expanding and collapsing the detail view are firing ok.

Html.Telerik().Grid<InverterModel>()
            .Name("InverterGrid")
            .DetailView(detailView => detailView.ClientTemplate(
                "Detail view is being loaded..."

                ))
            .DataBinding(d => d
                .Ajax()
                    .Select("AjaxGrid", "Inverter")
            )
            .DataKeys(k => k.Add(o => o.Item.InverterId))
            .ToolBar(commands => commands.Custom().Name("CreateInverter").Text(LabelsLocalized.GetLabelEntryLocalized(Labels.InverterCreate)).Action("Create", "Inverter"))
            .Columns(c =>
            {
                // col. definition omitted
                c.Command(commands => commands.Custom("CloneItem")
                    .HtmlAttributes(new { @class = "CopyButton", @style = "width: 10px !important;" })
                    .Action("CloneItem", "Inverter")
                    .DataRouteValues(route => route.Add(o => o.Item.InverterId).RouteKey("inverterId")))
                    .Title(@LabelsLocalized.GetLabelEntryLocalized(Labels.InverterCopy));
                c.Command(commands => commands
                    .Custom("ReplaceItem")
                    .HtmlAttributes(new { @class = "ReplaceButton", @style = "width: 10px !important;" })
                    .Action("ReplaceItem", "Inverter")
                    .DataRouteValues(route => route.Add(o => o.Item.InverterId).RouteKey("inverterId")))
                    .Title("Ersetzen");
                c.Command(commands => commands.Custom("DeactivateItem")
                    .HtmlAttributes(new { @class = "DeactivateButton", @style = "width: 10px !important;" })
                    .Action("DeactivateItem", "Inverter")
                    .DataRouteValues(route => route.Add(o => o.Item.InverterId).RouteKey("inverterId")))
                    .Title(@LabelsLocalized.GetLabelEntryLocalized(Labels.InverterDeactivate));
            })
             .ClientEvents(events => events
                .OnCommand("GridOnCommand")
                .OnDetailViewExpand("GridOnDetailViewExpand")
                .OnDetailViewCollapse("GridOnDetailViewCollapse")
            )
            .Pageable(paging => paging.PageSize(12).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom))
            .Sortable()
            .Render();

I played around a little bit and added the built-in Ajax Delete command like this:

Html.Telerik().Grid<InverterModel>()
            .Name("InverterGrid")
            .DetailView(detailView => detailView.ClientTemplate(
                "Detail view is being loaded..."

                ))
            .DataBinding(d => d
                .Ajax()
                    .Select("AjaxGrid", "Inverter")
                    .Delete("_DeleteAjaxEditing", "Inverter")
            )
            .DataKeys(k => k.Add(o => o.Item.InverterId))
            .ToolBar(commands => commands.Custom().Name("CreateInverter").Text(LabelsLocalized.GetLabelEntryLocalized(Labels.InverterCreate)).Action("Create", "Inverter"))
            .Columns(c =>
            {
                // col. definition omitted
                c.Command(commands => commands.Delete());
                c.Command(commands => commands.Custom("CloneItem")
                    .HtmlAttributes(new { @class = "CopyButton", @style = "width: 10px !important;" })
                    .Action("CloneItem", "Inverter")
                    .DataRouteValues(route => route.Add(o => o.Item.InverterId).RouteKey("inverterId")))
                    .Title(@LabelsLocalized.GetLabelEntryLocalized(Labels.InverterCopy));
                c.Command(commands => commands
                    .Custom("ReplaceItem")
                    .HtmlAttributes(new { @class = "ReplaceButton", @style = "width: 10px !important;" })
                    .Action("ReplaceItem", "Inverter")
                    .DataRouteValues(route => route.Add(o => o.Item.InverterId).RouteKey("inverterId")))
                    .Title("Ersetzen");
                c.Command(commands => commands.Custom("DeactivateItem")
                    .HtmlAttributes(new { @class = "DeactivateButton", @style = "width: 10px !important;" })
                    .Action("DeactivateItem", "Inverter")
                    .DataRouteValues(route => route.Add(o => o.Item.InverterId).RouteKey("inverterId")))
                    .Title(@LabelsLocalized.GetLabelEntryLocalized(Labels.InverterDeactivate));
            })
             .ClientEvents(events => events
                .OnCommand("GridOnCommand")
                .OnDetailViewExpand("GridOnDetailViewExpand")
                .OnDetailViewCollapse("GridOnDetailViewCollapse")
            )
            .Pageable(paging => paging.PageSize(12).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom))
            .Sortable()
            .Render();

If the user (i.e., me :)) clicks the delete button the onCommand-Event IS fired, so it does not seem to be working for custom commands (?). It is firing neither for the custom toolbar command nor for the custom column commands.
Any ideas would be very appreciated. :)

[Daniel Blendea]

Are you using the latest version of Telerik MVC?
Have you updated the javascript files as well?

I had the same problem, see here: http://www.telerik.com/community/forums/aspnet-mvc/grid/column-custom-command-not-firing.aspx
and fixed it by updating the javascript.

[Jana]

Thank you Daniel for the hint.
I am using the latest version of Telerik components for MVC and also re-checked that the js files were updated.
Unfortunately the problem persists. :(

[Jana]

Ok, what is missing is setting the property 'Ajax' to true for the custom commands:

.Ajax(true)

Of course following on that the controller actions will have to be adapted, in which way exactly I will try to figure out.

For me that was absolutely not clear from the Demo/Documentation. Please improve explanations on that! Clicking on the ajax custom command on this demo page: http://demos.telerik.com/aspnet-mvc/razor/grid/customcolumncommand does not show up a telerik window as described in the sample.

BR,
Jana