Pass Data Back to Update Function

Question

I'm using a kendo hierarchy grid. I am trying to figure out how to pass data from a a row in the child grid back to my update function so I can update my database.

Here is the code for my grid:

$("#NewPhraseGrid").kendoGrid({
    dataSource: gridNewPhraseDataSource,
    columns: [
        { template: "<input type='checkbox' class='checkbox' />" },
        { field: "Status", editable: false, title: "Status" },
        { field: "PhraseCodeComputed", editable: false, title: "Phrase Code Computed" },
        { field: "PhraseText", editable: true, title: "Phrase Text" },
        { field: "Example", title: "Example" },
        { field: "NotesDesc", title: "Notes" },
        { field: "Source", title: "Source" }
    ],
    selectable: true,
    pageable: true,
    detailInit: detailInit,
    dataBound: function () {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
});

Here is the code for my child grid:

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        scrollable: false,
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: "concepts/getSimplifications",
                    dataType: "json",
                    type: "get"
                },
                create: {
                    url: "concepts/createSimplifications",
                    dataType: "json",
                    data: { "originalPhraseCodeComputed": e.data.PhraseCodeComputed },
                    type: "post"
                },
                update: {
                    url: "concepts/updateSimplifications",
                    dataType: "json",
                    data: { "phraseText": PhraseText, "phraseType": PhraseType },
                    type: "post"
                }
            },
            schema: {
                data: "data",
                model: {
                    id: "NewPhraseCodeComputed",
                    fields: {
                        OriginalPhraseCode: { type: "string", editable: false },
                        NewPhrasePrefix: { type: "string", editable: false },
                        NewPhraseNumber: { type: "number", editable: false },
                        NewPhraseCodeComputed: { type: "string", editable: false },
                        PhraseType: { type: "string", editable: "true" },
                        PhraseText: {type: "string", editable: "true"}
                    }
                }
            }
        },
        sortable: true,
        pageable: true,
        toolbar: ["create"],
        filter: { field: "OriginalPhraseCode", operator: "eq", value: e.data.PhraseCodeComputed },
        columns: [
            { field: "NewPhraseCodeComputed", title: "New Phrase Code", width: "110px" },
            { field: "PhraseType", title: "Phrase Type", width: "110px", editor: phraseTypeDropDownEditor},
        { field: "PhraseText", title: "Phrase Text", width: "110px" },
        { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
        editable: "inline"
    });
}

Here is the code for my custom drop down editor:

function phraseTypeDropDownEditor(container, options) {

    $('<select id= phraseTypeSelection' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "phraseType",
            dataValueField: "phraseType",
            dataSource: {
                type: 'json',
                transport: {
                    read: {
                        dataType: 'json',
                        url: "concepts/getPhraseTypes",
                        type: 'get'
                    }
                }
            }
        });
};

I'd like to pass back the values of the row being edited in the child grid for the columns Phrasetext and PhraseType to my update function for said grid, but I don't know how to access those values.

Can anyone provide any insight on how to do so?

Answer 1

Try binding your custom editor to the name attribute, like this

function phraseTypeDropDownEditor(container, options) {

    $('<select id="phraseTypeSelection" name"' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "phraseType",
            dataValueField: "phraseType",
            dataSource: {
                type: 'json',
                transport: {
                    read: {
                        dataType: 'json',
                        url: "concepts/getPhraseTypes",
                        type: 'get'
                    }
                }
            }
        });
};