Kendo UI - adding a custom confirmation column or cell button after edit

Question

i have list objects that i am binding to a grid that looks something like this:

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

I want to display this in a grid but add a column that will display a drop down listbox with 'Approve' and 'Reject' items when the user clicks a cell in that column. When they makes a selection from that cell listbox, the listbox should disappear and the words 'accept' or 'reject' should show in the cell along with a checkbox to the left of it such that the user can confirm their action by checking that box. Only when that is done do i make a request to update back to the server. I am having a difficult time with this..

What i have done is changed the model slightly to to add a new column/property that i can bind to:

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

the columns of the grid are defined as below, with a custom editor being used for the 'new_status' column:

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

The editor function:

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

Grid datasource:

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"
            }
        }
    });

So my questions are:

How to get a checkbox or button to appear to the the left of after the user selects a value.
How to update back to the server from that grid only for the relevant row (the row that the conformation button resides in)?
Is this the correct or recommended approach

Thanks much

Lars Höppner Lars Höppner · Accepted Answer · 2015-03-09T05:05:32

Sounds overly complicated. I would use the same template for display and editor, showing the value and an edit button.

Click on the button would open a window that let's you change the value and confirm or reject the edit using ok and cancel buttons.

On ok, you call dataItem.set and the data source will take care of syncing with the server. No need for a separate column.

Kendo UI - adding a custom confirmation column or cell button after edit

1 Answers