对来自 javascript 的新插入行调用 kendo 网格创建操作方法

Question

我有一个自动完成和一个网格，我的目的是将记录从自动完成推送到网格中，并通过调用自定义按钮中设置的方法使用网格的创建操作从那里保存这些记录。请查看所附图片以清楚地了解我的设置。

我的 saveTerminalRow 函数没有按预期工作。请帮忙。

<div>
    @(Html.Kendo().AutoComplete()
        .Name("terminalsAutoComplete")
        .DataTextField("cmp_name")
        // omitted for brevity
        .Events(e => e.Select("onTerminalNameSelect"))
    )
</div>
<div>
    @(Html.Kendo()
    .Grid<ProjectName.TerminalOutOfState>()
    .Name("manageTOSSqlRecordsGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.TerminalOutOfStateID).Hidden();
        columns.Bound(c => c.TerminalCompanyID).Title("Terminal ID").Width(60);
        columns.Bound(c => c.CompanyID).Title("Region").ClientTemplate("#=CompanyName#").Width(40);
        columns.Command(cmd =>
        {
            cmd.Edit();
            cmd.Destroy();
            cmd.Custom("Save").Visible("showSaveCommand").Click("saveTerminalRow");
        }).Title("Action").Width(80);
    })
    .ToolBar(tbr =>
    {
        tbr.Create();
        tbr.Custom().Text("Load the table");
    })
    .Editable(edt => edt.Mode(GridEditMode.PopUp).TemplateName("TOoSTemplate").CreateAt(GridInsertRowPosition.Top))
    .DataSource(dataSrc => dataSrc
        .Ajax()
        .ServerOperation(true)
        .PageSize(15)
        .Model(mdl => mdl.Id(column => column.TerminalOutOfStateID))
        .Create(update => update.Action("UpsertTerminalOoSRecordAsync", "Configuration"))
        //omitted for brevity
    )
    .AutoBind(false)
    )
</div>

我的脚本如下：

<script>
    //This will add the data from autocomplete into the grid.
    function onTerminalNameSelect(e) {
        var dataItem = this.dataItem(e.item);
 
        var terminalData = {
            TerminalOutOfStateID: 0,
            TerminalCompanyID: dataItem.cmp_id,
            CompanyID: dataItem.region_id,
            CompanyName: dataItem.region_name
        };
 
        var grid = $("#manageTOSSqlRecordsGrid").data("kendoGrid");
        grid.dataSource.add(terminalData);
    }
     
    //This is used to hide and show "Save" button to those rows that are not yet saved to Db.
    function showSaveCommand(dataItem) {
        // show the Save button for the item with TerminalOutOfStateID =0
        if (dataItem.TerminalOutOfStateID == 0) {
            return true;
        }
        else {
            return false;
        }
    }
     
    //This is the method to save the inserted row into Db by calling the create action method. But this doesn't work:
    function saveTerminalRow(e) {
        var terminalData = this.dataItem($(e.currentTarget).closest("tr"));
        var grid = $("#manageTOSSqlRecordsGrid").data("kendoGrid");
        grid.saveRow();
    }
</script>

另请指教如何在保存操作成功后隐藏未保存行旁边的保存按钮。

Answer 1

好吧，我现在可以回答我自己的问题了。

这就是我最终解决这个问题的方式：

function saveTerminalRow(e) {
    var terminalData = this.dataItem($(e.currentTarget).closest("tr"));
    var saveButton = $(e.currentTarget).closest("tr td a.k-grid-Save");
 
     $.ajax({
        type: "POST",
        url: "@Url.Action("AddTerminalOoSRecordAsync", "Configuration")",
        contentType: "application/json",
        data: JSON.stringify(terminalData),
         success: function (result) {
             var title = "", content = "";
             if (result[0].TerminalOutOfStateID != undefined && result[0].TerminalOutOfStateID > 0) {
                 if (!result[0].IsAlreadyInDb) {
                     title = "Save Success";
                     content = "New record has been saved.";
                 }
                 else {
                     title = "No new row inserted";
                     content = "This terminal already exists in Db.";
                 }
             } else {
                 title = "Save Failed";
                 content = "Record is not saved.";
             }
 
            $("<div></div>").kendoDialog({
                closable: false, // hide X
                title: title,
                content: content,
                actions: [{
                    text: "OK",
                    action: function (e) {
                        if (result[0].TerminalOutOfStateID != undefined && result[0].TerminalOutOfStateID > 0) {
                            saveButton.remove();
                        }
                        return true;
                    },
                    primary: true
                }]
            }).data("kendoDialog").open().center();
         },
         error: function (request, error) {
             alert("Record Saving failed.");
         }
     });
}