CODEWITHSUNDEEP
asp.net-mvcbuttonkendo-uikendo-griddelete-row
KamalF
KamalF

Reputation: 105

Kendo grid delete button passing the details of the row

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:"[email protected]+"}"
)

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

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

Upvotes: 3

Views: 8099

Answers (2)

chiapa
chiapa

Reputation: 4412

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)

Upvotes: 0

user5250407
user5250407

Reputation:

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.

Upvotes: 2

Related Questions