3

I have a kendo grid in which I want to form delete button to pass the details of the row to the controller (as I am using mvc). Then I will use these details to delete the row from the database.

I searched in kendo website and I found the part for the delete or destroy call but I don't know how to pass these details of the row to the controller. 

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()    
.Name("Grid")    
.Columns(columns => {        
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice).Width(140);
    columns.Bound(p => p.UnitsInStock).Width(140);
    columns.Bound(p => p.Discontinued).Width(100);
    columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar => {
    toolbar.Create();
    toolbar.Save();        
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource        
    .Ajax()         
    .Batch(true)
    .PageSize(20)
    .ServerOperation(false)                
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.ProductID))
    .Create("Editing_Create", "Grid")
    .Read("Editing_Read", "Grid")
    .Update("Editing_Update", "Grid")
    .Destroy("Editing_Destroy", "Grid")
)
)

My grid:

<div id="grid">

   @(Html.Kendo().Grid<dynamic>()
.Name("BrowseGrid")
.Columns(columns =>
{
    foreach (System.Data.DataColumn c in Model.Grid.Columns)
    {
        columns.Bound(c.ColumnName).EditorTemplateName("String");

    }
    columns.Command(command =>
    {
        command.Destroy();
        command.Custom("").Text("editteam").HtmlAttributes(new { id = "editteam", onClick = "editRow()" });

    });
})

.Scrollable()
.DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        //Define the model
        foreach (System.Data.DataColumn column in Model.Grid.Columns)
        {
            model.Field(column.ColumnName, column.DataType);
            model.Id("Id");
        }
    })
    .Read(read =>

        read.Action("BrowseGrid", "Configuration")
    )
    .Destroy( update => update.Action("Delete", "Configuration"))

    //Data("{nodeID:"+@Model.nodeID+"}"
)

        .Pageable(pageable => pageable
             .Refresh(true)

        .PageSizes(new int[] { 10, 100, 1000, 10000, 100000, 1000000 })
        .ButtonCount(10)
    )
  )

KamalF
  • 105
  • 1
  • 3
  • 19

2 Answers2

2

Please change to:

.Destroy(update => update.Action("Process_Destroy", "controller name"))

and in controller,

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Process_Destroy([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
{
    if (product != null)
    {
        //write your code for delete action;
    }

    return Json(ModelState.ToDataSourceResult());
}

This will work.

chiapa
  • 4,362
  • 11
  • 66
  • 106
  • Thanks, but it is not working still The thing is my code is not as the grid done in the kendo website exactly. I fill up the grid from a dataTable in one model and so i want to select one row when pressing delete and pass it to the controller and from there i can delete it. my code is in added to the question – KamalF Sep 02 '15 at 10:03
  • .Editable(editable => editable.Mode(GridEditMode.InLine)) –  Sep 02 '15 at 10:14
  • the model that i receive is an empty model, nothing in the dataTable so nothing passed to the controller – KamalF Sep 02 '15 at 11:41
0

I am assuming you only need the id of the row to delete it, but I think you can send the full model of the selected row. I am sending both.

Like this:

.Destroy(d => d.Action("controllerMethod", "controllerName").Data("jsFunction"))

And in javascript:

function jsFunction() {
    var grid = $("#BrowseGrid").data("kendoGrid");
    var id = grid.dataItem(grid.select()).Id;
    return {
        id: id
    };
}

Your controller method should receive the parameter:

public ActionResult controllerMethod(string id)
chiapa
  • 4,362
  • 11
  • 66
  • 106
  • Thanks, i did that and for unknown reason for me adding the .Data("jsFunction") part affects the whole View and the grid is not responding to the datasource as well as the combobox under it was some how altered!! Do you know a reason for that? – KamalF Sep 02 '15 at 14:37
  • If you remove the `.Data("jsFunction")` part, that doesn't happen? – chiapa Sep 02 '15 at 15:09
  • No, if it is removed, the grid is displayed fine and every thing appears in it even the delete buttons, although they dont function – KamalF Sep 02 '15 at 15:11
  • That can't be, something else must be wrong. Can you try the same thing but for the Read method? See if it sends data to the controller when reading? I do it and it works, I'm just trying to see where's the error there. Alter the jsFunction and send a trivial value, like `return { test: 1 };` and catch the parameter `test` in your read method in the controller. Also, if you can put more of your code, the grid definition and the javascript (in a [fiddle](http://jsfiddle.net/) link, for example) – chiapa Sep 02 '15 at 15:22
  • It did the same thing !! would using a partial view cause that ?! This is more of the code hope it is useful. http://jsfiddle.net/mf184nzf/ – KamalF Sep 02 '15 at 15:43
  • No, the partial can't do that. It's not normal as that's the way data is sent to the controller from read, create, destroy, etc methods ([here's the source](http://docs.telerik.com/KENDO-UI/aspnet-mvc/helpers/grid/ajax-binding#pass-additional-data-to-the-action-method)). I do ii like that. As I said, something else must be wrong and it's not the partial – chiapa Sep 02 '15 at 16:15
  • Check my edit, the code won't break your grid now. Tell me if you got the id on the controller method (assuming your model has an Id property) – chiapa Sep 03 '15 at 15:23
  • Thanks for your effort ! but unfortunately the grid is broken once i add the .Data part !! and still not working – KamalF Sep 03 '15 at 16:30