KendoDialog配置actions报错TypeError: name.toLowerCase is not a function

我需要实现一个带两个按钮的Kendo Dialog，JSP中的代码如下。调用deleteRow函数时出现TypeError: name.toLowerCase is not a function错误，移除actions配置块后功能正常，请求排查错误原因。

function deleteRow(rowdata) {
 $("#dialog").kendoDialog({
        width: "300px",
        height: "300px",
        title: "Delete row?",
        closable: true,
        modal: true,
        content: "<p>Are you sure you want to delete this row?<p>",
        actions: [
            { text: 'Cancel', action: onCancel },
            { text: 'Delete', primary: true, action: onDelete }
        ]
    });

 function onDelete(e) {
        // Delete action confirmed
        if(rowdata){
            $.ajax({
                type: 'DELETE',
                url : "${pageContext.request.contextPath}/mvc/abc/service/" + finalRowval.id + "/xyz",
                dataType: 'text/html',
                data: "",
                async: true,
                success: function(response) {
                    //Handle success response
                    },
                error: function(xhr, status, error) {
                    // Handle error response
                    }
            });
        }

    }
}

错误原因及解决办法 #

错误原因 #

你在actions配置中引用了未定义的onCancel函数。Kendo Dialog在处理action配置项时，若传入的action值不是有效函数或内置动作字符串，内部会尝试对其执行toLowerCase方法做格式处理，但onCancel是未定义状态（undefined），无法调用该方法，因此触发TypeError错误。

解决办法 #

有两种可行方案：

1. 定义onCancel函数
   添加onCancel函数的实现，哪怕只是简单关闭对话框：

   function deleteRow(rowdata) {
    $("#dialog").kendoDialog({
           width: "300px",
           height: "300px",
           title: "Delete row?",
           closable: true,
           modal: true,
           content: "<p>Are you sure you want to delete this row?<p>",
           actions: [
               { text: 'Cancel', action: onCancel },
               { text: 'Delete', primary: true, action: onDelete }
           ]
       });
   
    function onDelete(e) {
           // Delete action confirmed
           if(rowdata){
               $.ajax({
                   type: 'DELETE',
                   url : "${pageContext.request.contextPath}/mvc/abc/service/" + finalRowval.id + "/xyz",
                   dataType: 'text/html',
                   data: "",
                   async: true,
                   success: function(response) {
                       //Handle success response
                       },
                   error: function(xhr, status, error) {
                       // Handle error response
                       }
               });
           }
   
       }
   
       // 新增取消按钮的处理函数
       function onCancel(e) {
           e.sender.close(); // 关闭对话框
       }
   }
   

2. 使用Kendo内置取消动作
   如果不需要自定义取消逻辑，直接将action设为Kendo内置的'cancel'字符串，框架会自动处理关闭对话框的逻辑：

   actions: [
       { text: 'Cancel', action: 'cancel' },
       { text: 'Delete', primary: true, action: onDelete }
   ]
   

内容的提问来源于stack exchange，提问作者Adil