Get selected column information in Kendo UI grid - asp.net-mvc

Question

I have one requirement for asp.net MVC application and for that inside Kendo UI grid, I have customized one column with combo box and two buttons for performing adding or deletion of any user selected value or manual typed value from combo box control.
But I am not able to get how I can get button click information for any specific row of that column.
Kindly guide how I can achieve such kind of behavior.
Sample Code for Grid is below and I want to get clickable for Category Column.
#(Html.Kendo().Grid<GridHeaderTemplate.Models.ProductModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
.Title("Category").HtmlAttributes(new
{
#class = "templateCell"
}).ClientTemplate("<table cellspacing='0' class='data-row data-personal'><tr>" +
"<td>#=data.Category.CategoryName# <span class='custom-arrow k-icon k-i-arrow-s'></span></td>" +
"<td><button id='customButton'>Add</button> <span></span> <button id='customButton1'>Delete</button></td>" +
"</tr></table>")
.HeaderTemplate(
#<text>
<table cellspacing="0" class="data-header">
<tr>
<td colspan="2"><strong>Category</strong></td>
</tr>
<tr>
<td>Category Name</td>
<td>Settings</td>
</tr>
</table>
</text>
)
.Width(300);//.ClientTemplate("#=data.Category.CategoryName# <span class='custom-arrow k-icon k-i-arrow-s'></span>"); ;
columns.Bound(p => p.UnitPrice).Width(150);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolBar =>
{
toolBar.Save();
toolBar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Groupable()
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.CategoryID).DefaultValue(1);
})

Answer 1

Enter some code to help us helping you..
You need to have in your object the Id that you want to add or delete,
If you created a client template adding the two specific buttons and calling a javascript function, then you have acess to the properties of the row
for instance:
column.Bound(c=>c.Id).hidden(true);
column.Bound(c=>c.Name).ClientTemplate("<span onclick='AddToThisId(#=Id#)'>add</span>");
Edited:
CONTROLLER:
public ActionResult Delete(int id)
{
try
{
//Delete....
}
catch (Exception ex)
{
result.SetInsucess("Erro a apagar registo: " + ex.Message + ".");
}
return Json(true, JsonRequestBehavior.AllowGet);
}
VIEW
<script>
function AddSomethingBaseOnId(id){
$.ajax({
cache: false,
type: 'GET',
data: { Id: Id },
contentType: "application/json",
url: "Controller/AddAction",
success: function (data) {
alert("sucess");
},
fail: function (jqXHR, textStatus) {
alert("Ocorreu um erro: " + textStatus);
$("#" + uid).hide();
}
});
}
function DeleteSomethingBaseOnId(id){
$.ajax({
cache: false,
type: 'GET',
data: { Id: Id },
contentType: "application/json",
url: "Controller/DeleteAction",
success: function (data) {
alert("sucess");
},
fail: function (jqXHR, textStatus) {
alert("Ocorreu um erro: " + textStatus);
$("#" + uid).hide();
}
});
}
</script>
in your client template:
"<td>#=data.Category.CategoryName# <span class='custom-arrow k-icon k-i-arrow-s'></span></td>" +
"<td><button id='customButton' onclick="AddSomethingBaseOnId(#=data.Id#)">Add</button> <span></span> <button id='customButton1' onclick="DeleteSomethingBaseOnId(#=data.Id#)">Delete</button></td>" +