c# - Invoke kendo grid create action method to a newly inserted row from javascript

Question

I have an autocomplete and a grid where my intention is to push records from Autocomplete into the grid and save those records using grid's create action from there by invoking a method set in a custom button. Please look at the attached picture to get a clear idea of what my setup looks like.

My saveTerminalRow function doesn't work as expected. Please help.

<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>

My scripts are like follows:

<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>

Also please advise on how to hide the save button next to unsaved rows after the save operation succeeds.

question from:https://stackoverflow.com/questions/65850134/invoke-kendo-grid-create-action-method-to-a-newly-inserted-row-from-javascript

Answer 1

Well, I can answer my own question now.

This is how I ended up solving this problem:

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