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

Navigation with Parameter on Button Click

4 Answers 196 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 03 Dec 2018, 03:42 PM

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")
              ))

 

4 Answers, 1 is accepted

Sort by
0
Accepted
Viktor Tachev
Telerik team
answered on 06 Dec 2018, 11:28 AM
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:



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 12 Dec 2018, 03:29 PM

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;
}

 

0
Accepted
Tsvetomir
Telerik team
answered on 17 Dec 2018, 03:49 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 18 Dec 2018, 04:38 PM
Thank you for the good explanation, Joel
Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Viktor Tachev
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Tsvetomir
Telerik team
Share this question
or