Unable to get updated dropdownlist value in Grid from ajax call

[Meng]

Hi There,

I am working on a grid which has a dropdownlist column. I use the solution in the following demo:

https://demos.telerik.com/aspnet-core/grid/editing-custom

The difference is that we need to save the grid through an ajax call instead of the build-in "Save Changes" button. I added a "Save" button under the grid, change the dropdownlist value and use the following code to post the grid data to Controller action, but the value of products passed to Action always contains the original dropdownlist value other than the updated value. Is there anything not right in my code? Please help. Thank you.

$('#btnSaveGridData').click(function () {
            var data = $("#grid").data("kendoGrid").dataSource.data();

            $.ajax({
                url: '/Editing_CustomController/SaveGridData',
                type: "post",
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(data),
                complete: function (response) {
                    $("#gridSection").empty();
                    $("#gridSection").html(response.responseText);
                },
                failure: function (response) {
                    //alert(response.responseText);
                },
                error: function (response) {
                    //alert(response.responseText);
                }
            });
        });

Controller Action
[HttpPost]
public async Task<IActionResult> SaveGridData([FromBody] List<ProductViewModel> products)
       {
            //Action logic
            return PartialView("_Grid");
        }

 

 

[Meng]

Issue fixed by calling dataSource.sync()

var data = $("#grid").data("kendoGrid").dataSource.sync().data();

Thanks!

[Meng]

Sorry, dataSource.sync() is also not working, it called the UpdateGrid Action, but that is not what we needed, we need to call SaveGridData action when clicking the custom save button. Anyone can help?

[Meng]

The real question is how to get the updated dropdownlist value in javascript,  $("#grid").data("kendoGrid").dataSource.data() does not give the updated dropdownlist value, any ideas?

[Tsvetomir]

Hi Meng,

If upon changing the value of the Kendo UI DropDownList, the new values do not take place in the data of the grid, then there might be a chance of the dropdown not being correctly bound to its model. Therefore, the changes would be only visually and in the value of the dropdown, and the data source would remain untouched.

Can you try changing any other value in the row and see if it is reflected in the data source?

I have noticed that you are retrieving and sending all of the data in the data source and sending it to the data source. I believe this would be unnecessary since this data is already available on the server-side. I would recommend sending only the modified items and here is an example of how to achieve this:

var data = $("#grid").getKendoGrid().dataSource.data();
var dirty = $.grep(data, function(item) {
    return item.dirty
});

In case the issue is still present, is it possible for you to send me relevant code snippets for the grid's declaration as well as the ones for the DropDownList editor? Ideally, send a runnable project in which the faulty behavior could be observed.

Looking forward to your reply.

 

Best regards,
Tsvetomir
Progress Telerik

[Meng]

Hi Tsvetomir,

Thanks for your reply. Issue fixed now.

Cheers