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

Edit and delete rows in Kendo Grid

2 Answers 4182 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zoran
Top achievements
Rank 1
Veteran
Zoran asked on 01 Sep 2020, 03:19 PM

In my .net core app, I have a kendo grid in which I am trying to add buttons to edit /update& delete the rows. Basically what I am trying to do is get the objectid from the parameter in the row and redirect to an update or delete view.

<div class="clearfix">
        @(Html.Kendo().Grid<M20_AEK.Models.ContractSettlement>()
                    .Name("ContractSettlementGrid")
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .Scrollable()
                    .Sortable()
                    .Filterable()
                    .ColumnMenu()
                    .Groupable()
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.OBJECTID).Title("ID").Hidden();
                        columns.Bound(c => c.OPERATOR_OBJECTID).Title("Operator").Width("100px");
                        columns.Bound(c => c.Year).Title("Year").Width("100px");
                        columns.Bound(c => c.Month).Title("Month").Width("100px");
                        columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("Settlement").Width("100px");
                        columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("Technology").Width("100px");
                        columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("Upload").Width("100px");
                        columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("Download").Width("100px");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.OBJECTID))
                    .Read(read => read.Action("LoadSettlementContracts_Read", "SettlementContract"))
                    .Update(update => update.Action("Save", "SettlementContract"))
                    .Destroy(update => update.Action("Delete", "SettlementContract"))
                    )
        )
    </div>

 

I tried to map the command.Edit() & the command.Destroy() commands to use my corresponding methods my controller. When I click the Update button, I get an error in console:

Failed to load resource :44326/SettlementContract/Save:1 the server responded with a status of 400 ()

Can I map the buttons the way I am trying to? It's not even calling the corresponding methods, it's not hitting my breakpoints. Maybe it can't be done like this?

Andi
Top achievements
Rank 1
Iron
Iron
commented on 05 Oct 2022, 04:36 PM | edited

Hello this is my Controller in my code I am trying to update or delete from the database.

I get a 200 status which says its succesful but it never gets updated or deleted.

I can read and create fine but updating is a little challenging.

this is the response i get from the debbuger when i edit a row:

Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request finished HTTP/1.1 POST https://localhost:57770/Grid/ClientsEdit/14416 application/x-www-form-urlencoded;+charset=UTF-8 176 - 200 - application/json;+charset=utf-8 683.0242ms
public ActionResult ClientsEdit(int id, ClientDatum clientDatum, [DataSourceRequest] DataSourceRequest request)
        {
            PrincipalContext pc = new PrincipalContext(ContextType.Domain, "WIX");
            UserPrincipal up = UserPrincipal.FindByIdentity(pc, User.Identity.Name);
            GroupPrincipal ad = GroupPrincipal.FindByIdentity(pc, "Administrators");
            GroupPrincipal gr = GroupPrincipal.FindByIdentity(pc, "Gr");
            clientDatum = _clientContext.ClientData.Find(id);
            var clients = _clientContext.ClientData.ToList();
            var dsClient = cleints.ToDataSourceResult(request);
         
            if (id == null)
            {
                return BadRequest();
            }
            else if (gangDatum == null)
            {
                return NotFound();
            }
            else if (User.Identity.IsAuthenticated && (up.IsMemberOf(ad) || up.IsMemberOf(gr)))
            {
                if (ModelState.IsValid)
                { 
                    _clientContext.ClientData.Update(clientDatum);
                    _clientContext.Entry(clientDatum).State = EntityState.Modified;
                    _clientContext.SaveChanges();
                }
                return Json(clients);
            }
            else
            {
                string msg = "You need to authenticate to create a user";
                return Json(msg);
            }
        }



<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid <TelerikGangsApp.Models.ClientDatum>()
                            .Name("grid")
                            .Columns(columns =>
                            {   
                                //columns.Bound(p => p.Id);
                                columns.Bound(p => p.FirstName);
                                columns.Bound(p => p.MiddleName);
                                columns.Command(command => command.Edit()).Width(150);
                                columns.Command(command => command.Destroy()).Width(150);
                            })
                            .ToolBar(toolbar => 
                            {
                                toolbar.Create();
                                //toolbar.Save();
                                toolbar.Pdf();
                                toolbar.Search();
                            })
                            .Pdf(pdf => pdf
                            //.AllPages()
                            .AvoidLinks()
                            .PaperSize("A1")
                            .Margin("2cm", "1cm", "1cm", "1cm")
                            .Landscape()
                            .RepeatHeaders()
                            .TemplateId("page-template")
                            .FileName("Gangs.pdf")
                            .ProxyURL(Url.Action("PdfExport", "Grid"))
                            )
                            .Editable(editable => editable.Mode(GridEditMode.InLine))
                            .Pageable()
                            .Sortable()
                            .Scrollable()
                            .Filterable()
                            .Groupable()
                            .HtmlAttributes(new { style = "height:550px;" })
                            .DataSource(dataSource => dataSource
                                .WebApi()
                                .Batch(false)
                                .PageSize(20)
                                .ServerOperation(false)
                                .Model(model => {
                                    model.Id(gangster => gangster.Id);
                                    model.Field(gangster => gangster.Id).Editable(false);
                                })
                                .Read(read => read.Action("ClientRead", "Grid").Type(HttpVerbs.Get))
                                .Create(create => create.Action("ClientCreate", "Grid").Type(HttpVerbs.Post))
                                .Update(update => update.Action("ClientsEdit", "Grid", new {id = "{0}"}).Type(HttpVerbs.Post))
                                .Destroy(destroy => destroy.Action("ClientDelete", "Grid", new {id = "{0}"}).Type(HttpVerbs.Post))
                            )
        )
    </div>
</div>

2 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 04 Sep 2020, 01:16 PM

Hi Zoran,

 

You can find here a full blown working sample with similar Edit and Update buttons:
https://demos.telerik.com/aspnet-core/grid/editing-inline

In addition to demos, you can find other runnable working samples here:
https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Grid

If you need a custom command button regardless of the samples above, here is the way to achieve it:
https://demos.telerik.com/aspnet-core/grid/custom-command

I hope these resources will help you resolving the issue.

 

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Andi
Top achievements
Rank 1
Iron
Iron
answered on 07 Oct 2022, 07:06 PM

I want to thank you for your support I was able to manage and fix my issue which was not a grid related issue what so ever.

I was able to track my issue to the  database and have it fixed.

Tags
Grid
Asked by
Zoran
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
Andi
Top achievements
Rank 1
Iron
Iron
Share this question
or