Edit and delete rows in Kendo Grid

2 posts, 0 answers
  1. Zoran
    Zoran avatar
    9 posts
    Member since:
    Oct 2012

    Posted 01 Sep 2020 Link to this post

    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?

  2. Eyup
    Admin
    Eyup avatar
    4074 posts

    Posted 04 Sep 2020 Link to this post

    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/.

Back to Top