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" />
            <button name="btnDelete" class="btn btn-danger waves-effect waves-light" onclick="deleteObject()">Delete</button>
            var commandTemplate = kendo.template($('#Commands').html());
        <script type="text/javascript">
            function deleteObject() {
                var row = $(this).closest("tr");
                                .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);
                                .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                                .HtmlAttributes(new { style = "height:430px;"})
                                .DataSource(dataSource => dataSource
                                    .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.

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

  3. Aleksandar
    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.

    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

Back to Top