在 Kendo Ui Grid 弹出窗口中更改按钮文本

Posted

技术标签:

【中文标题】在 Kendo Ui Grid 弹出窗口中更改按钮文本【英文标题】:Change Button text in Kendo Ui Grid Popup Window 【发布时间】:2013-05-31 10:33:17 【问题描述】:

我有一个 Kendo UI Grid,它在创建新记录或编辑现有记录时会加载一个弹出窗口。

当我创建新记录时,我正在努力寻找一种方法将更新按钮的文本更改为“保存”(它目前显示为“更新” - 它不正确)。

我可以更改弹出窗口的标题,但我的问题是:如何更改按钮文本?

这是代码:

 $("#grid").kendoGrid(
            dataSource: dataSource,
            pageable: true,
            sortable: true,
            groupable: true,
            height: resizeGrid(),
            filterable: true,
            toolbar: ["create"],
            columns: [
                 field: "OfficeName", title: "Office Name" ,
                 field: "SupportNo", title: "Phone No.", width: "100px" ,
                 field: "SupportEmail", title: "Email Address", width: "130px" ,
                 field: "SupportFax", title: "Fax No.", width: "100px" ,
                 field: "SupportFtp", title: "Ftp Url", width: "150px" ,
                 command: ["edit", "destroy"], title: "Actions", width: "160px" ],
            editable: "popup",
            edit: function (e) 
                var editWindow = e.container.data("kendoWindow");

                if (e.model.isNew()) 
                    e.container.data("kendoWindow").title('Add New Office');
                    $(".k-grid-update").text = "Save";
                
                else 
                    e.container.data("kendoWindow").title('Edit Office');
                
            
        );

【问题讨论】:

【参考方案1】:

您应该将command 定义为:

command: [
    
        name: "edit",
        text:  
            edit: "Edit",               // This is the localization for Edit button
            update: "Save",             // This is the localization for Update button
            cancel: "Cancel changes"    // This is the localization for Cancel button
        
    ,
     
        name: "destroy", 
        text: "Delete Office"           // This is the localization for Delete button
    
]

另外,如果你还想更改弹出窗口中的文字Edit,你应该使用:

editable  : 
    mode : "popup",
    window : 
        title: "Edit Office",           // Localization for Edit in the popup window
    

【讨论】:

感谢 OnaBai 的回复,我相信您的建议适用于可编辑的网格,对吗?我的问题是我想更改用于编辑特定行的弹出窗口上的更新按钮。大概它会像我在上面的代码中放置的那样与编辑事件挂钩?但我正在使用 jQuery,但它不起作用。在这种情况下,您有什么建议 OnaBai? 这适用于编辑行的Update 按钮。为此,您不需要 jQuery。 Kendo UI 在为弹出窗口生成按钮时使用这些标签 添加新记录怎么样? @Charmie,“添加新记录怎么样”是什么意思? 在 kendogrid 中,我们有工具栏吗?比如说,我们有工具栏:['create'],每次我为网格点击“创建”新记录时,都会弹出一个窗口让我输入记录。在该弹出窗口中,将有标有“更新”和“取消”的默认按钮。我只是觉得如果我在技术上“创建”一条新记录,不应该是“创建”而不是“更新”吗?我可以更改这些按钮的标签吗?【参考方案2】:

这将更新PopUp Editor按钮中的文本:

if (e.model.isNew()) 
  $("a.k-grid-update")[0].innerhtml = "<span class='k-icon k-update'></span>Activate";

else 
  $("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Save";

【讨论】:

【参考方案3】:
edit: function (e) 
    if (e.model.isNew()) 
        $(".k-window-title")[0].innerHTML = "Add";
    

【讨论】:

以上是关于在 Kendo Ui Grid 弹出窗口中更改按钮文本的主要内容,如果未能解决你的问题,请参考以下文章

Kendo Grid - 从弹出窗口编辑后刷新行

Kendo Grid - 自定义编辑弹出窗口

弹出窗口在 Kendo UI 网格中的工作原理以及如何在 MVC4 的 Kendo UI ajax 网格中将控件带入弹出窗口

Kendo UI Grid:如果有任何未决更改,则无法拦截和取消排序事件

在 kendo ui 网格中以编程方式更改 serverSorting

Kendo UI Grid 保存单元格模糊