Kendo Grid edit event handler not updating row

Question

When adding a new item to a Kendo Grid using inline editing, the ContractID datasource is filtered by the selected OrgID. Once a row has been added, the OrgID column is no longer editable (set using isOrgEditable()) but the ContractID is. Unfortunately the cascade doesn't then work for editing and the datasource for ContractID is unfiltered.

To resolve that issue I subscribe to the edit event (data-edit="setContractsDataSource") and filter the data source manually. That works but then the Update button doesn't do anything and the edit is lost.

<div id="grid">
    <div class="k-content wide">
        <div>
            <div data-role="grid"
                 data-editable="inline"
                 data-edit="setContractsDataSource"
                 data-toolbar="[{ name: 'create', text: 'Add Item' }]"
                 data-columns='[
                 { field: "OrgID", title: "Company", editable: isOrgEditable, editor: orgDropDownEditor, template: "#: lookupForOrg(organisationID) #" },
                 { field: "ContractID", title: "Contract", editor: contractsDropDownEditor, template: "#: lookupForContract(ContractID) #" },
                 { command: ["edit", "destroy"], width: "220px" }
            ]'
            data-sortable="true"
            data-pageable="true"
            data-filterable="true"
            data-bind="source: items"></div>
        </div>
    </div>
</div>

David Clarke David Clarke · Accepted Answer · 2020-06-10T03:55:18

As is often the case, I resolved the issue while writing the question. For future reference, the reason it wasn't being updated was due to not returning true from the event handler:

function setContractsDataSource(e) {
    let orgID = e.model ? e.model.OrgID : this.dataItem().OrgID;
    if (orgID) {
        $("#contracts").data("kendoDropDownList").setDataSource(contractsData.filter(elt => elt.ContractorID == orgID));
    }
    return true; // fixed it
}

Subsequently established that the column would only update if it already contained a value, i.e. the new value wouldn't save if previously it had been empty. This telerik forum post helped to resolve it. The editor for the Contracts column needed valuePrimitive: true.

function contractsDropDownEditor(container, options) {
    $('<input id="contracts" name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "ContractNo",
            dataValueField: "ContractID",
            dataSource: contractsData,
            optionLabel: "Select contract...",
            valuePrimitive: true
        });
}

Kendo Grid edit event handler not updating row

1 Answers