Grid - ClientTemplate and Delete

3 posts, 0 answers
  1. Kelly
    Kelly avatar
    2 posts
    Member since:
    Jul 2013

    Posted 22 Oct 2020 Link to this post

    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. Kelly
    Kelly avatar
    2 posts
    Member since:
    Jul 2013

    Posted 22 Oct 2020 in reply to Kelly Link to this post

    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.

  3. Aleksandar
    Admin
    Aleksandar avatar
    263 posts

    Posted 27 Oct 2020 Link to this post

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

Back to Top