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

[Ashish]

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>

 

These are the screenshots.

[Ashish]

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

[Tsvetomir]

Hi Ashish,

I have investigated the provided code snippet and I have noticed that you are invoking the saveRow method as a stand-alone method. Indeed, it would work out as expected only if there was a row in edit mode. Since there is no one, the method would not behave as you anticipated.

As a workaround, you could actually enter the edit mode of the grid manually, by calling the editRow() method and passing a reference to the TR element as an argument.

However, it is important to point out that adding multiple rows and saving them one by one is not supported. This is due to the fact that when the grid detects more than one item with no ID, it will send the row for saving as well. Therefore, the "Save" button that is on each of the rows would not be necessary as all items will get saved at once.

 

Best regards,
Tsvetomir
Progress Telerik

[Ashish]

Hi Tsvetomir,

Thank you so much for the response.

But I waited almost 5 days to get an answer that doesn't help me in any way. I was expecting to get at least a code snippet that would help me accomplish my requirement.

Just so you know, I already tried sending editRow() with the row as the parameter, but that opens up the edit window which I do not want.

[Tsvetomir]

Hi Ashish,

Thank you for your valuable feedback. Indeed, the forum threads have a 72h response time excluding weekends. Therefore, this might have caused the delay. 

What I have noticed is that your current account does not have a dedicated license with a support package. If you would like to assign a license to an account check the information from the article below:

https://www.telerik.com/purchase/faq/licensing-purchasing

This way, you could post support threads in our official support system and receive a response within 24h.

With that aside, in order to enter the edit mode, you should pass a jQuery reference of the TR element to the editRow() method. 

However, this would not be necessary as you would save all the rows at once. What I can recommend is that you call the sync method of the data source after adding the rows to the grid:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/sync

This way, you can get rid of the save button as everything will be saved automatically.

 

Kind regards,
Tsvetomir
Progress Telerik

[Ashish]

Hi Tsvetomir,

Thank you for the response, but this is how I solved my requirement.

Just putting it here so someone might benefit from it.

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

[Tsvetomir]

Hi Ashish,

Thank you for sharing the approach with the custom AJAX request used for saving the data on the server-side. It can be beneficial for our community, your efforts are appreciated. 

Kind regards,
Tsvetomir
Progress Telerik