定制编辑网格中的命令弹出

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"} 
}, 

当我通过Actualizar和Cancel取代Update通过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回答14年6月10日在15:00 但我相信我读了你不应该链接到其他答案所以，如果奥纳拜先生会停止回答这些帖子，并忽略事实上，每个人都没有做弹出窗口并网命令按钮，我们都可能会更幸福......现在阿达什讷ķ先生优雅的答案&我除了..

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

}

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

重要细节 - 网格的更新功能被耦合到元件与k-update属性，而在取消k-grid-cancel功能的游乐设施。