0

我想在顶部工具栏的右上角添加一些名为更新、删除和添加列的按钮状图像（单击时将处理下面的数据）。同样，这些图像会在点击时调用事件。

这是最好的方法吗？

这会通过模板完成吗？不太确定我是否理解这些。模板是否存在其他依赖项？

$("#grid").kendoGrid({
     columns: [{field: "patientName", title: "Patient Name"},
               {field: "MRN", title: "MRN"},
               {field: "account", title: "Account#"},
               {field: "dateOfBirth", title: "Date of Birth"}, 
               {field: "room", title: "Room"},
               {field: "bed", title: "Bed"},
               {field: "admitDate", title: "Admit Date" }],

     //toolbar: [
     //{"name": "create"}, 
     // {"name": "save"}, 
     //  {"name": "cancel"}
     // ],

     dataSource: {
       data:people
     },

     height:300,
     scrollable:true,
     pageable: true,
     pageSize: 2,
     sortable: true                
  });
4

1 回答 1

1

您可以使用toolbar.template并执行以下操作：

$("#grid").kendoGrid({
    columns   : [
        {field: "patientName", title: "Patient Name"},
        {field: "MRN", title: "MRN"},
        {field: "account", title: "Account#"},
        {field: "dateOfBirth", title: "Date of Birth"},
        {field: "room", title: "Room"},
        {field: "bed", title: "Bed"},
        {field: "admitDate", title: "Admit Date" }
    ],
    toolbar   : [
        {"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
        {"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
        {"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
    ],
    dataSource: {
        data    : people,
        pageSize: 2
    },
    editable  : true,
    scrollable: true,
    pageable  : true,
    sortable  : true
});

这些class值很重要，因为这是 Kendo UI 用于将标准处理程序绑定到此图像单击事件的方法。

另外pageSize需要在dataSource.

为了使图标向右对齐，您应该定义以下样式：

#grid .k-toolbar {
    text-align: right;
}

#grid你的网格在哪里id。

在此处查看一个运行示例：http: //jsfiddle.net/OnaBai/Y9vhE/唯一的问题是，由于图像未加载，您会看到它缺少图像，但它们仍然功能齐全。

于 2013-02-07T19:09:23.263 回答