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: "&nbsp;" }
    ],
    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: "&nbsp;"
    }
],

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

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

我将标题定义为Edición。

Answer 2

此信用实际属于Adarsh K于2014年6月10日15:00回复但我相信我读到你不应该发布其他答案的链接，所以，如果OnaBai先生不再回答这些帖子而忽略了每个人都在做POPUP而不是网格命令按钮的事实，我们都会更高兴。现在Adarsh K先生的优雅回答＆amp;我的补充..

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

Another way to customize is as following:

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>');

}

This approach handles click event of standard edit command and modifies rendered html, but preserves standard functionality.

Important detail - grid's update functionality is coupled to element with k-update attribute, while cancel functionality rides on k-grid-cancel.

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

3 个答案: