How to pass selected row of Kendo grid data to controller - kendo-grid

Question

I've got a kendo grid with an image near it that will act like a button. When pressed, it will call a controller method. I want to send the selected row data to that method.
VIEW
<a href="#" id="ic_open" class="tooltip2" title="Abrir">
<span title="">
<img class="toolbar-icons" src="../../Images/open.png"/>
</span>
</a>
...
<div id="datagrid">
#(Html.Kendo().Grid(Model)
.Name("datagrid_Concessoes")
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(70);
columns.Bound(c => c.Code);
columns.Bound(c => c.Description);
columns.Bound(c => c.CreationDate);
columns.Bound(c => c.CreationUser);
})
.HtmlAttributes(new { style = "height: 534px;" })
.Scrollable()
.Sortable()
.Selectable()
.Pageable(pageable => pageable
.Refresh(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.Read(read => read.Action("GetConcessoes", "MasterData"))
)
)
</div>
And the script:
<script type="text/javascript">
$(function () {
$('.tooltip2').click(function () {
var id = this.id;
$.get('#Url.Content("GetPartialView")',
{ "id": id },
function (data) {
$('#div-for-partial').html(data);
});
});
});
</script>
This script sends the link's id (ic_open) to the controller successfully. I want to send the selected row data, via this same function or some other (doesn't matter), to the controller so I can manipulate that info.
EDIT
Controller method
public ActionResult GetPartialView(string id)
{
switch (id)
{
case "":
return PartialView("_Concessoes");
case "tab1":
return PartialView("_Concessoes");
case "tab2":
return PartialView("_AutoEstradas");
case "ic_open":
return PartialView("_NovaConcessao");
}
return RedirectToAction("Index");
}

Answer 1

Your Script should be as below:
<script type="text/javascript">
$(function () {
$('.tooltip2').click(function () {
var id = this.id;
var concessoesGrid = $("#datagrid_Concessoes").data("kendoGrid");
var row = concessoesGrid.select();
$.get('#Url.Content("GetPartialView")',
{ "id": id, "modelData":row },
function (data) {
$('#div-for-partial').html(data);
});
});
});
</script>
Now there will be change on your controller side also:
public ActionResult GetPartialView(string id, ModelClass modelData)
{
//here you can access the modelData Object which will have the value of Selcted row of Grid
switch (id)
{
case "":
return PartialView("_Concessoes");
case "tab1":
return PartialView("_Concessoes");
case "tab2":
return PartialView("_AutoEstradas");
case "ic_open":
return PartialView("_NovaConcessao");
}
return RedirectToAction("Index");
}
NOTE: if you want to pass multiple selected grid records to controller then you will need to change the controller argument to accept List of objects.

Answer 2

I am using KendoJS but I believe this would also work on your side too:
var grid = $("yourgrid's id or class");
var selectedRow;
grid.change = function()
{
grid.select().each(function () {
var dataItem = grid.dataItem($(this));
selectedRow = dataItem;
});
}
I also found this for Kendo ASP.NET MVC:
#(Html.Kendo().Grid(Model)
.Name("grid")
.Events(e => e
.DataBound(#<text>
function() {
//Handle the dataBound event inline
}
</text>)
.Change(#<text>
var selectedRow;
function() {
var grid = this;
grid.select().each(function () {
var dataItem = grid.dataItem($(this));
selectedRow = dataItem;
});
}
</text>)
)
)
After getting the selected row, the rest is easy. Just send the value you want into your hidden value element on your cshtml page or just call the ajax method for your controller right over on your JavaScript code.