从同一行

Question

我在用例场景中苦苦挣扎：

用户选择终端并填充服务下拉列表（级联）。填充服务下拉列表的JSON包含一个字段Fee，我想为当前正在编辑/插入的行的网格/数据源列的ServiceFee选择并使用它的值< / p>

。

到目前为止，我尝试了两种方法：

方法＃1： 我试图挂钩Service DropDownList的事件以查看用户选择的项目并提取Fee并尝试更新网格的编辑/新行的dataItem＆＃39; s ServiceFee字段。但是，我挂钩到Service DropDownList事件的地方无法访问网格。

var gridMain = $("#serviceDetailsGrid").kendoGrid({
    dataSource: kendoDataSource,
    pageable: false,
    sortable: false,
    toolbar: ["create"],
    columns:
    [
        { field: "ParkingServiceId", title: "Id", hidden: true },
        { field: "TerminalId", title: "Terminal", width: 130, template: getTerminalTitle, editor: terminalDropDownEditor },
        { field: "ServiceId", title: "Service", template: getServiceTitle, editor: serviceDropDownEditor },
        { field: "ParkingCardNumber", width: 120, title: "Card #" },
        { field: "ParkingCardIssueDate", width: 120, title: "Issued On", format: "{0:dd-MMM-yyyy}", template: "#= kendo.toString(kendo.parseDate(ParkingCardIssueDate,  'dd-MMM-yyyy'), 'dd-MMM-yyyy') #" },
        { field: "ParkingCardExpiryDate", width: 120, title: "Expiry", format: "{0:dd-MMM-yyyy}", template:   "#= kendo.toString(kendo.parseDate(ParkingCardExpiryDate, 'dd-MMM-yyyy'), 'dd-MMM-yyyy') #" },
        { field: "ServiceFee", width: 100, title: "Fee" },
        { command: ["edit", "destroy"], title: "Actions", width: "200px" }
    ],
    editable: "inline",
    cancel: function (e) { $('#serviceDetailsGrid').data('kendoGrid').dataSource.cancelChanges(); },
}).data("kendoGrid");

function serviceDropDownEditor(container, options) {
    $('<input id="servicesDropDownList" required data-text-field="NameEnglish" data-value-field="Code" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        optionLabel: "Select service...",
        autobind: false,
        dataTextField: "NameEnglish",
        dataValueField: "Code",
        change: serviceDropDown_OnChange
    });
}

function serviceDropDown_OnChange(a) {
    var serviceDropDown = $("input[id^='servicesDropDownList']").data("kendoDropDownList");
    var extract = serviceDropDown.dataItem(serviceDropDown.select());
    // I have the fee at extract.Fee but don't know how to send it back to grid
}

方法2： 我试图加入网格edit事件。但这甚至只触发一次，并立即触发新行或编辑行。 Service DropDownList是级联的。因此用户需要首先选择终端然后选择服务。在用户进行这些选择之前，edit已经触发：

var gridMain = $("#serviceDetailsGrid").kendoGrid({
    dataSource: kendoDataSource,
    pageable: false,
    sortable: false,
    toolbar: ["create"],
    columns:
    [
        { field: "ParkingServiceId", title: "Id", hidden: true },
        { field: "TerminalId", title: "Terminal", width: 130, template: getTerminalTitle, editor: terminalDropDownEditor },
        { field: "ServiceId", title: "Service", template: getServiceTitle, editor: serviceDropDownEditor },
        { field: "ParkingCardNumber", width: 120, title: "Card #" },
        { field: "ParkingCardIssueDate", width: 120, title: "Issued On", format: "{0:dd-MMM-yyyy}", template: "#= kendo.toString(kendo.parseDate(ParkingCardIssueDate,  'dd-MMM-yyyy'), 'dd-MMM-yyyy') #" },
        { field: "ParkingCardExpiryDate", width: 120, title: "Expiry", format: "{0:dd-MMM-yyyy}", template:   "#= kendo.toString(kendo.parseDate(ParkingCardExpiryDate, 'dd-MMM-yyyy'), 'dd-MMM-yyyy') #" },
        { field: "ServiceFee", width: 100, title: "Fee" },
        { command: ["edit", "destroy"], title: "Actions", width: "200px" }
    ],
    editable: "inline",
    cancel: function (e) { $('#serviceDetailsGrid').data('kendoGrid').dataSource.cancelChanges(); },
    edit: function (e) {
        var model = e.model; //reference to the model that is about the be edited
        var container = e.container; //reference to the editor container

        //find second dropdown and then get the widget instance
        var serviceDropDownList = container.find("[data-role=dropdownlist]").eq(1).data("kendoDropDownList");

        // if DropDownListwidget is found
        if (serviceDropDownList) {
            var extract = serviceDropDownList.dataItem(serviceDropDownList.select());
            // I have "Select service" item here as the edit event triggered far too early

            console.log("Grid Edit Event --> DropDownList (Id: " + serviceDropDownList.id + "), Selected: " + extract, serviceDropDownList);
            e.model.ServiceFee = extract.Fee;
        }
    }
}).data("kendoGrid");

这是来自IE的方法2的调试视图：

现在我认为我应该挂钩更新/确认按钮并在那里手动完成需要，但我需要一些关于方法1和方法的输入。 2在我开始接近3.我在这里遗漏了什么？方法1是最佳候选人AFAIK。

更新 方法＃1从Telerik论坛获得了更新：http://www.telerik.com/forums/update-a-read-only-column-with-value-while-editing#dExxMF1g9UenKYD0vE_XkA

在Serice DropDownList上测试新的Select事件后，我看到一个奇怪的行为：它没有反映最新选择的记录，而是反映最后一个记录。我在这里回复了官方帖子：http://www.telerik.com/forums/update-a-read-only-column-with-value-while-editing#RXPhUgu-_0yo7MhPsaDTEw

问候。