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

Grid - ClientTemplate and Delete

2 Answers 153 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kelly
Top achievements
Rank 1
Kelly asked on 22 Oct 2020, 06:13 PM

So I have a grid, with a template for the command buttons.  The reason I have the template, is I'm not allowing in-line editing, and the "edit" button will take the user to a detail page where they get access to the full model record.  

I also have a "delete" button, but I can't figure out how to perform the delete from the template.  I tried what I've seen in others and attempt to get the closest "tr" and then call "removerRow", but that did not work.  

<script type="text/x-kendo-template" id="Commands">
        <form method="post" action="@Url.Page("/clients/client", new { area = "" })" style="float: left; margin-right: .55rem">
            <button type="submit" class="btn btn-info waves-effect waves-light">Edit</button>
            <input name="companyId" type="number" value="#= CompanyId #" hidden="hidden" />
            @Html.AntiForgeryToken()
        </form>
        <button name="btnDelete" class="btn btn-danger waves-effect waves-light" onclick="deleteObject()">Delete</button>
    </script>
 
    <script>
        var commandTemplate = kendo.template($('#Commands').html());
    </script>
    <script type="text/javascript">
        function deleteObject() {
            var row = $(this).closest("tr");
            $("#clientGrid").data("kendoGrid").removeRow(row);
        }
    </script>
 
@(Html.Kendo().Grid<CaterX2.Models.Client.Client>()
                            .Name("clientGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.CompanyName).Title("Client");
                                columns.Bound(p => p.Address1);
                                columns.Bound(p => p.Address2);
                                columns.Bound(p => p.City);
                                columns.Bound(p => p.State.StateCode).Title("State").Width(100);
                                columns.Bound(p => p.ZipCode).Title("Zip Code").Width(150);
                                columns.Bound(p => p.PhoneNumber).Title("Phone").Width(150);
                                columns.Bound(p => p.CompanyId).ClientTemplate("#=commandTemplate(data)#").Width(200);
                            })
                            .Pageable()
                            .Sortable()
                            .Scrollable()
                            .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                            .HtmlAttributes(new { style = "height:430px;"})
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(20)
                                .Events(events => events.Error("error_handler"))
                                .Model(model => model.Id(p => p.CompanyId))
                                .Read(r => r.Url("/index?handler=Read").Data("forgeryToken"))
                                .Update(e => e.Url("index?handler=Edit"))
                                .Destroy(d => d.Url("index?handler=Delete").Data("forgeryToken"))
                            )
 
                        )

2 Answers, 1 is accepted

Sort by
0
Kelly
Top achievements
Rank 1
answered on 22 Oct 2020, 10:05 PM

So, I finally found a post on there that was basically what I needed.

https://www.telerik.com/forums/creating-a-custom-delete-button---how-do-actually-delete-the-row

The only real difference was adding the CSRF token since I'm using razor pages.

0
Aleksandar
Telerik team
answered on 27 Oct 2020, 02:23 PM

Hi Kelly,

I am glad to hear you were able to resolve the issue. I would also like to thank you for sharing the solution, I am sure it would be beneficial to the community.

Regards,
Aleksandar
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/.

Tags
Grid
Asked by
Kelly
Top achievements
Rank 1
Answers by
Kelly
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or