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

Grid - ClientTemplate and Delete

2 Answers 866 Views

Grid

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

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"))

)

Grid - ClientTemplate and Delete

2 Answers, 1 is accepted