Delete confirmation in TreeList

[Richard]

Hello,

Is there any way to have a delete confirmation popup or message when the Delete button is clicked in a TreeList?

I've tried using

events.Remove("onRemove");

as shown in the Events demo.  I'm using a JavaScript confirm, but the row is still deleted when I click cancel.

Many thanks,

Richard

 

[Patrick | Technical Support Engineer, Senior]

Hi Richard,

Using the same implementation in this Grid Customize Confirmation Window Knowledge base article, you can add a custom delete confirmation box to the Kendo UI TreeList.  Here are the steps:

1.  Add a Kendo UI Window

@(Html.Kendo().Window()
    .Name("window")
    .Title("Are you sure you want to delete this record?")
    .Visible(false) //the window will not appear before its .open method is called
    .Width(400)
    .Height(200)
)

 

2. Create a custom command button for Deleting a record.

@(Html.Kendo().TreeList<TreeListExample.Models.EmployeeDirectoryModel>()
    .Name("treelist")
    .Toolbar(toolbar => toolbar.Create())
    .Columns(columns =>
    {
        columns.Add().Field(e => e.FirstName).Title("First Name").Width(220);
        columns.Add().Field(e => e.LastName).Title("Last Name").Width(100);
        columns.Add().Field(e => e.Position);
        columns.Add().Field(e => e.HireDate).Format("{0:MMMM d, yyyy}");
        columns.Add().Field(e => e.Phone);
        columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
        columns.Add().Width(300).Command(c =>
        {
            c.CreateChild().Text("Add child");
            c.Edit();
            c.Custom().Name("Delete").Text("Delete").ImageClass("k-i-close").Click("onDelete");
        });
    })
    //...
)

 

3. Create a Kendo UI Template for the contents of the window

<script type="text/x-kendo-template" id="windowTemplate">
  Delete <strong>#=FirstName# #=LastName#</strong> ? </p>
  <button class="k-button" id="yesButton">Yes</button>
  <button class="k-button" id="noButton"> No</button>
</script>

 

4.  Customize the delete button.  The biggest difference from the Grid's approach is handling the deletion from the TreeList's datasource using the removeRow method.  Additionally, include the Window's Kendo UI Template:

    //Initialize the Window Template
    var windowTemplate = kendo.template($("#windowTemplate").html());

    function onDelete(e) {
        e.preventDefault(); //prevent page scroll reset
        var tr = $(e.target).closest("tr"); //get the row for deletion
        var data = this.dataItem(tr); //get the row data so it can be referred later

        var window = $("#window").data("kendoWindow");

        window.content(windowTemplate(data)); //send the row data object to the template and render it
        window.center().open();

        $("#yesButton").click(function () {
            var treelist = $("#treelist").data("kendoTreeList");
            treelist.removeRow(tr);
            window.close();
        })
        $("#noButton").click(function () {
            window.close();
        })
    }

Please take a look at the attached sample which demonstrates the above, and let me know if you have any questions.

Regards,
Patrick
Progress Telerik

[Richard]

Hi Patrick,

Many thanks for your solution.  I was able to get it to work without much effort, simply by copying your example.  One thing that is missing from step 4 is:

var windowTemplate = kendo.template($("#windowTemplate").html());

I was getting a windowTemplate error, but was able to see what was different from the code in the zip file you included.

Once again - many thanks.

Richard

 

[Patrick | Technical Support Engineer, Senior]

Hi Richard,

Thanks for the heads up!  I've updated the post above for others looking for assistance. 

Please let me know if any questions arise. 

Patrick