Kendo UI - 在编辑后添加自定义确认列或单元格按钮

时间:2015-03-08 19:29:17

标签: jquery kendo-ui kendo-grid kendo-mvvm

我有列表对象,我绑定到一个看起来像这样的网格:

{ id: 123, name: 'abc', proposed_value: 99.95, status: 'submitted' }

我想在网格中显示此内容,但添加一个列,当用户单击该列中的单元格时,该列将显示带有“批准”和“拒绝”项的下拉列表框。当他们从该单元格列表框中进行选择时,列表框应该消失,单词“accept”或“reject”应显示在单元格中,并在其左侧显示一个复选框,以便用户可以通过选中该框来确认其操作。只有在完成后才能发出更新回服务器的请求。我很难过这个......

我所做的是稍微改变模型以添加一个我可以绑定到的新列/属性:

{ id: 123, name: abc, proposed_value: 99.95, status: submitted, new_status: '' }

网格的列定义如下,自定义编辑器用于'new_status'列:

columns: [
    { field: 'new_status', title: "Action", editor: approvalDropDownEditor },
    { field: "name", title: "Name" },
    { field: "proposed_vale", title: "Proposed Value" },
    { field: "status", title: "Workflow Status" },
],

编辑功能:

function approvalDropDownEditor(container, options) {
            $('<input required data-text-field="description" data-value-field="code" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: model.allowed_actions //Approve, Reject, Cancel
                    });
        }   

网格数据源:

var grid_ds = new kendo.data.DataSource({
        schema: {
            model: {
                id: 'id',
                fields: {
                    new_status: { type: 'string', editable: true },
                    name: { type: 'string', editable: false },
                    proposed_vale: { type: 'number', editable: false },
                    status: { type: 'string', editable: false },
                }
            }
        },
        transport: {
            read: {
                url: "get_items_in_workflow",
                dataType: "json",
            },
            update: {
                url: "update_workflow",
                dataType: "json"
            }
        }
    });     

所以我的问题是:

  1. 如何在用户选择值后,让复选框或按钮显示在左侧。
  2. 如何仅针对相关行(构造按钮所在的行)从该网格更新回服务器?
  3. 这是正确的还是推荐的方法
  4. 非常感谢

1 个答案:

答案 0 :(得分:0)

听起来过于复杂。我会使用相同的模板进行显示和编辑,显示值和编辑按钮。

单击按钮将打开一个窗口,让您更改值并使用确定和取消按钮确认或拒绝编辑。

好的,你调用dataItem.set,数据源将负责与服务器同步。无需单独的列。