自定义网格中命令的编辑弹出窗口

Question

有一个简单的剑道网格，带有编辑和销毁命令。

编辑命令，显示一个弹出窗口，我可以在其中修改我的数据。 我需要自定义编辑窗口的标题和按钮文本（更新和取消按钮）。 这是我的代码：

var ds = createJSONDataSource();

function createJSONDataSource() {

var dataSource = new kendo.data.DataSource({

    transport: {
        autoSync: true,
        read: {
            type: "POST",
            url: "WebServices/GetDataTest.asmx/getCustList",
            dataType: "json",
            contentType: mime_charset
        }
    },
    pageSize: 5,
    schema: {
        data: function (data) {
            if (data) {
                if (serverSelectReturnsJSONString)
                    return $.parseJSON(data.d);

                else
                    return data.d;
            }
        },
        model:{
              id: "customer_id",
              fields: {
              customer_id: { type: "string", editable: false },
              name_customer: { type: "string" },
              address_customer: { type: "string" }
               }
         }
   });

    var grid = $("#grid").kendoGrid({
    selectable: true,
    theme: "metro",
    dataSource: ds,
    scrollable: {
        virtual: true
    },
    reorderable: true,
    resizable: true,
    pageable: true,
    height: 300,
    toolbar: ["save", "cancel"],
    columns: [
        { field: "customer_id", title: "ID" },
        { field: "name_customer", title: "Cliente" },
        { field: "address_customer", title: "Indirizzo" },
        { field: "PI_customer", title: "Partita IVA", hidden: true },
        { field: "cap_customer", title: "CAP", hidden: true },
        { field: "city_customer", title: "Città" },
        { field: "state_customer", title: "Nazione", selected: false },
        { command: ["edit", "destroy"], title: " " }
    ],
    filterable: true,
    editable: "popup",
    sortable: true,
    columnMenu: {
        messages: {
            columns: "Scegli colonne",
            filter: "Applica filtro",
            sortAscending: "Ordina (ASC)",
            sortDescending: "Ordina (DESC)"
        }

    },
    groupable: {
        messages: {
            empty: "Trascina la colonna qui..."
        }
    }

});

希望有人帮助我！

提前致谢。

Answer 1

要自定义按钮，您应该将命令定义为：

{
    name: "edit",
    text: { update: "Actualizar", cancel: "Cancelar"}
},

我将Update 替换为Actualizar 和Cancel 替换为Cancelar。

所以你的列定义是：

columns: [
    { field: "customer_id", title: "ID" },
    { field: "name_customer", title: "Cliente" },
    { field: "address_customer", title: "Indirizzo" },
    { field: "PI_customer", title: "Partita IVA", hidden: true },
    { field: "cap_customer", title: "CAP", hidden: true },
    { field: "city_customer", title: "Città" },
    { field: "state_customer", title: "Nazione", selected: false },
    { 
        command: [
            {
                name: "edit",
                text: { update: "Actualizar", cancel: "Cancelar"}
            }, 
            "destroy"
        ], 
        title: " "
    }
],

要更改窗口的标题，您应该将editable: "popup", 更改为：

editable  : {
    mode : "popup",
    window : {
        title: "Edición",
    }
}, 

我将标题定义为Edición。

Answer 2

这实际上属于 Adarsh K 的功劳于 2014 年 6 月 10 日 15:00 回答 但我相信我读到你不应该发布指向其他答案的链接，所以，如果 OnaBai 先生停止回答这些帖子并无视每个人都在做 POPUP 而不是网格命令按钮这一事实，我们都会更开心。 . 现在 Adarsh K 先生的优雅回答和我的补充..

function OnEdit(e){
if (e.model.isNew())
 {
  var update = $(e.container).parent().find(".k-grid-update");
  $(update).html('<span class="k-icon k-update"></span>Insert');
  }
 }

这是 .kendoGrid umm '结构'中的一个“部分”，这个内联函数还允许您有条件地更改 POPUP 对话框的标题.. . 这里我的添加部分（是新的）将按钮文本更改为保存，并将我编辑的标题 POPUP 更改为添加文本标题而不是编辑文本标题...

        edit: function (e)
        {
            if (e.model.isNew())
            {
                $('.k-window-title').text("Add New xxxxxxxxxx");
                var update = $(e.container).parent().find(".k-grid-update");
                $(update).html('<span class="k-icon k-update"></span>Save');
            }                           
            else
            { $('.k-window-title').text("Edit Existing xxxxxxxxxxx"); }
        },

        columns: [
                        { field:.........

Answer 3

另一种自定义方式如下：

columns: [
{ command: 
    [{ name: 'edit', 
    click: editButtonClick, 
    template: editButtonTemplate }], title: 'Edit', width: '40px'}..]


var editButtonTemplate = '<a class="btn btn-link btn-xs k-grid-edit" href="\\#"><span class="glyphicon glyphicon-pencil"></span></a>';

editButtonClick = function (e) {
/* Changes default rendering of 'update' & 'cancel' buttons
 * but keeps default behaviour
 */
var btnCancel = $('.k-grid-cancel');
btnCancel.removeClass('k-button k-button-icontext').addClass('btn btn-link btn-xs');
btnCancel.text('');
btnCancel.append('<span class="glyphicon glyphicon-ban-circle"></span>');

var btnOk = $('.k-grid-update');
btnOk.removeClass('k-button k-button-icontext k-primary').addClass('btn btn-link btn-xs');
btnOk.text('');
btnOk.append('<span class="glyphicon glyphicon-ok-circle k-update"></span>');

}

此方法处理标准edit 命令的click 事件并修改呈现的html，但保留标准功能。

重要细节 - 网格的更新功能与具有k-update 属性的元素耦合，而取消功能依赖于k-grid-cancel。