This is a migrated thread and some comments may be shown as answers.
Grid_OnCommand is not firing
4 Answers 68 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Max
Top achievements
Rank 1
Max asked on 18 Jan 2012, 10:54 PM
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

4 Answers, 1 is accepted

Sort by
0
Jana
Top achievements
Rank 1
answered on 27 Feb 2012, 11:43 AM
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. :)

0
Daniel Blendea
Top achievements
Rank 1
answered on 27 Feb 2012, 01:53 PM
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.
0
Jana
Top achievements
Rank 1
answered on 27 Feb 2012, 02:42 PM
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. :(
0
Jana
Top achievements
Rank 1
answered on 28 Feb 2012, 10:42 AM
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
Tags
Grid
Asked by
Max
Top achievements
Rank 1
Answers by
Jana
Top achievements
Rank 1
Daniel Blendea
Top achievements
Rank 1
Share this question
or