Delete confirmation in TreeList

1 Answer 62 Views
TreeList
Richard
Top achievements
Rank 3
Iron
Iron
Iron
Richard asked on 27 Sep 2021, 09:52 AM

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

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 29 Sep 2021, 08:34 PM | edited on 30 Sep 2021, 02:49 PM

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

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

Richard
Top achievements
Rank 3
Iron
Iron
Iron
commented on 30 Sep 2021, 09:52 AM

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
Telerik team
commented on 30 Sep 2021, 02:50 PM

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

Tags
TreeList
Asked by
Richard
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or