kendo ui confirm dialog box in jsp file jquery

Question

I have a jsp file. I need to add confirm dialog box when user clicks on delete button

currently script has simple confirm, but i want kendo ui confirm box. I am not sure how confirm box is in jsp file.

function deleteRow(rowdata) {
if(confirm("Are you sure want to delete this record ?")){
        if(finalRowval){
            $.ajax({
                type : 'DELETE',
                url : "${pageContext.request.contextPath}/mvc/abc" + finalRowval.id + "/xyz",
                dataType : 'text/html',
                data : "",
                async : true,
            });
        }
    }
}

Answer 1

You need to modify your deleteRow function to use Kendo UI Dialog.

Edit : improved debug version of the deleteRow function

function deleteRow(rowdata) {
// Create a Kendo UI Dialog
$("<div></div>").kendoDialog({
    width: "450px",
    title: "Confirm",
    closable: false,
    modal: true,
    content: "<p>Are you sure you want to delete this record?</p>",
    actions: [
        { text: 'Cancel' },
        { 
            text: 'Delete', 
            primary: true, 
            action: function(e) {
                // Log rowdata to debug
                console.log("rowdata:", rowdata);
                if (rowdata) {
                    $.ajax({
                        type: 'DELETE',
                        url: "${pageContext.request.contextPath}/mvc/abc/" + rowdata.id + "/xyz",
                        dataType: 'html',
                        success: function(response) {
                            // Handle success response
                            console.log("Record deleted successfully.");
                            // Possibly refresh the table or remove the row from the DOM
                        },
                        error: function(xhr, status, error) {
                            // Handle error response
                            console.error("Error deleting record:", error);
                            alert("Failed to delete the record. Please try again.");
                        }
                    });
                } else {
                    console.error("Invalid rowdata:", rowdata);
                }
            }
        }
    ]
}).data("kendoDialog").open();

}