Tree List Inline Edit

[Rakesh]

Hi Team,

I am using the Kendo TreeList with inline edit mode.

I have implemented the remove event to display a confirmation popup when the delete button is clicked. The confirmation box appears correctly, but after clicking "Confirm," the record is not being deleted.

Is there an alternative solution to achieve this functionality?

Thank you.

//// I have provided code for reference

@(Html.Kendo().TreeList<RVNLMIS.Models.DMS.FolderSettingModel>()
.Name("FolderTreeList")
.Toolbar(toolbar => toolbar.Create())
.Columns(columns =>
{
    columns.Add().Field(e => e.FolderName).HtmlAttributes(new { style = "text-align:left" })
    .HeaderAttributes(new { style = "text-align:left" }).Title("Folder Name").Width(400);

    columns.Add().Field(e => e.Level).HeaderAttributes(new { style = "text-align:left"})
    .HtmlAttributes(new { style = "text-align:right"}).Title("Level").Width(30);

    columns.Add().Title("Action").Width(300).Command(c =>
    {
        c.CreateChild().Text("Add child");
        c.Edit();
        c.Destroy();
        //c.Custom().Text("<i class='btn btn-xs btn-danger fa fa-trash'></i>")
        //.Click("showDeleteConfirmation");
    });
})
.Editable(e=>e.Mode("inline"))
.DataSource(dataSource => dataSource
    .Create(create => create.Action("Create", "DMSFolderSetting"))
    .Read(read => read.Action("FolderSettingDetails", "DMSFolderSetting"))
    .Update(update => update.Action("Update", "DMSFolderSetting"))
    .Destroy(delete => delete.Action("Destroy", "DMSFolderSetting"))
    .Model(m => {
        m.Id(f => f.FolderId);
        m.ParentId(f => f.ParentFolderId);
        m.Expanded(true);
        m.Field(f => f.FolderName);
        m.Field(f => f.Level);
    })
    .ServerOperation(false)
)
.Events(e=>e.Save("OnSaveRecord"))
.Events(e=>e.Remove("onDeleteConfirm"))
.Height(700)
)

//// Java script code

function showDeleteConfirmation(e) {
    e.preventDefault(); // Stop the default delete behavior

    var treeList = $("#FolderTreeList").data("kendoTreeList");
    rowToDelete = $(e.row).closest("tr");
    var dataItem = treeList.dataItem(rowToDelete);

    //console.log(e);
    //console.log(dataItem);

    // Store the row and update modal info
    $("#deleteModal").data("row", rowToDelete); // store row
    $("#folderName").text(dataItem.FolderName);

    $("#deleteModal").modal("show");
}

function confirmDelete() {
    var treeList = $("#FolderTreeList").data("kendoTreeList");
    var row = $("#deleteModal").data("row");

    if (treeList && row) {
        treeList.removeRow(row);
    }

    $("#deleteModal").modal("hide");
}

 

/// Confirmation Modal

<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this folder name?</p>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" onclick="confirmDelete()">Yes</button>
                <button type="button" class="btn" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

[Mihaela]

Hello Rakesh,

I examined the code snippets, and it appears that the data item that should be deleted is not selected correctly:

function showDeleteConfirmation(e) {
    e.preventDefault(); // Stop the default delete behavior

    var treeList = $("#FolderTreeList").data("kendoTreeList");
    rowToDelete = $(e.row).closest("tr"); // returns null
    var dataItem = treeList.dataItem(rowToDelete); // null
    ...
}

Update the row selection as follows:

function showDeleteConfirmation(e) {
    e.preventDefault(); // Stop the default delete behavior

    var treeList = $("#FolderTreeList").data("kendoTreeList");
    rowToDelete = $(e.target).closest("tr");
    var dataItem = treeList.dataItem(rowToDelete);
    ...
}

Here is a runnable REPL sample that demonstrats the complete example:

https://netcorerepl.telerik.com/mzkTPKPq58jyXCL523

I hope that helps.

Regards,
Mihaela
Progress Telerik