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

Passing Multiple Parameters with a Detail Action Button (AJAX)

1 Answer 193 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jennifer
Top achievements
Rank 1
Jennifer asked on 31 Jan 2018, 05:32 PM

Hello,

I would like to use the ASP.NET MVC Kendo UI Grid to render a list of records that have a "Detail" button for each record (similar to this look: https://demos.telerik.com/aspnet-mvc/grid/custom-command).

I am currently using an AJAX-bound grid. I need to pass two values to the "Details" controller. Here is what I have so far:

.Columns( c=>
{
  c.Bound(c => personId);
  c.Bound(c => positionId);

 

  // Want to use a "Details" button to pass personId and positionId to HomeController/Details/{personId}/{positionId}

  c.Command( c => cmd.Custom("Details"))

})
.DataSource(d => d
  .Ajax()
  .Read(r => r.Action("GetPersons", "Home"))
)

 

However, the business logic in our application requires two values passed to the "Details" controller (see below).

1.
[HttpGet]
      public ActionResult Details(int personId, int positionId)
2.{
3.  Person person = Person.GetPerson(personId, positionId, myConnection);
4.  return View(person);
5.}

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 01 Feb 2018, 12:53 PM
Hi Jennifer,

The example you are referring to opens the dialog window via JavaScript. The showDetails method that shows the dialog retrieves the entire Grid dataItem. Thus, all fields for the respective row can be accessed there.

You can use similar approach and attach a click handler for the custom command. In the handler get the data item and the relevant fields. Then you can create a $.ajax request that will call the server-side action and pass the data as to it. 

The showDetails method would look similar to this:


function showDetails(e) {
    e.preventDefault();
             
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 
    personId = dataItem.personId;
    positionId = dataItem.positionId;
     
    // additional custom code
}


The stackoverflow thread below illustrates how to call a server action via JavaScript:


Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Jennifer
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or