Navigation with Parameter on Button Click

[Joel]

Using this Grid with the Groups command button definition, I want to navigate to another MVC Action passing a CustomerId value as a parameter.  I have an Event handler (with no JavaScript) but am not sure if this is the right approach.  Should this be some type of HTML call?  If JavaScript is the right way to do this then please supply some code.

This is for ASP.NET Core.  Thanks in advance for your help, Joel.

@(Html.Kendo().Grid<GsiPortal.Models.Customer>()
                      .Name("grid")
                      .Columns(columns =>
                      {
                          columns.Bound(p => p.Name);
                          columns.Bound(p => p.DisplayName).Title("Display Name");
                          columns.Bound(p => p.AddTimestamp).Format("{0:MM/dd/yyyy}");
                          columns.Command(command => command.Custom("Groups").Click("goGroups"));
                          columns.Command(command => command.Edit()).MinResizableWidth(75);
                          columns.Command(command => command.Destroy()).MinResizableWidth(75);
                      })
                      .Editable(editable => editable.Mode(GridEditMode.InLine)) //.TemplateName("CustomerEdit")) //Turn on the inline cell editing by setting
                      .Pageable()
                      .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
                      .PersistSelection(true)
                      .Navigatable()
                      .Sortable()
                      .Scrollable()
                      .Filterable()
                      .HtmlAttributes(new { style = "height:550px;" })
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .PageSize(20)
                          .ServerOperation(false)
                          .Events(events => events.Error("error_handler"))
                          .Model(model =>
                          {
                              model.Id(p => p.Id);
                              model.Field(p => p.Id).Editable(false);
                              model.Field(p => p.AddTimestamp).Editable(false);
                          })
                          .Read("IndexJson", "Customers")
                          .Update("Edit", "Customers")
                          .Create("CreateJson", "Customers")
                          .Destroy("DeleteJson", "Customers")
              ))

 

[Viktor Tachev]

Hi Joel,

In order to call a specific action when a custom command button is clicked you can initiate a jQuery.ajax from the JavaScript click handler. The code would look similar to the following:

function goGroups(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var itemId = dataItem.Id;

    $.ajax({
        url: '@Url.Action("ActionName","ControllerName")',
        data: { id: itemId},
        success: function (data) {
            //call is successfully completed and we got result in data
        },
        error: function (xhr, ajaxOptions, thrownError) {
            //some errror, some show err msg to user and log the error
            alert(xhr.responseText);
        }
    });

}

If you would like to navigate to another View you can use the approach from this stackoverflow thread:

• https://stackoverflow.com/a/34310240

Regards,
Viktor Tachev
Progress Telerik

[Joel]

Yes, this got me there.   

I discovered some alternative syntax (below).  Can you explain why its better to invoke .ajax here instead of going directly to the using my alternative? Is it purely for the error handling?

Thanks, Joel

function goGroups(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    window.location.href = '@Url.Action("Hierarchy", "Groups")/' + dataItem.Id;
}

 

[Tsvetomir]

Hi Joel,

Invoking the ActionResult directly, using the Razor syntax is a possible option in case you seek simplicity and you do not need much customization. Another option would be to use the @Ajax.ActionLink method. The downside for those two approaches is that if the request returns an invalid response or if the ActionResult is not found, the error will not be handled and hence, unexpected behavior will occur.

In comparison, using the jQuery.ajax request is going to provide you with a wide range of callbacks and most importantly error handling. And it is a developer's preference which approach is going to be used. We always recommend the safest and least error-prone approach, in this case, using the jQuery.ajax.


Kind regards,
Tsvetomir
Progress Telerik

[Joel]

Thank you for the good explanation, Joel