2

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

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

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

});

希望有人帮助我！

提前致谢。

4

3 回答 3

3

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

{
    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.

于 2013-05-01T20:20:26.137 回答
0

这实际上属于 Adarsh K 于 2014 年 6 月 10 日 15:00 回答但我相信我读到你不应该发布指向其他答案的链接，所以请如果 OnaBai 先生停止回答这些帖子并忽略每个人都在做的事实一个弹出窗口而不是网格命令按钮，我们都可以更快乐......现在 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 'structure' 中的“部分”，此内联函数还允许您有条件地更改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:.........
于 2015-02-20T20:23:02.277 回答
0

另一种自定义方式如下：

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.

于 2016-07-11T19:58:47.517 回答