从javascript调用剑道网格创建操作方法到新插入的行

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