Update DataSource in Grid after command click

[Rodrigo]

I created a command button that triggers the command click to update a grid field

    function commandClick(args) {

        var ajax;

        if (args.commandColumn.type === "ResendEmail") {

            // here we are making an ajax call to server

            ajax = new ej.base.Ajax({

                url: "/Users/List?handler=ResendConfirmation",

                type: "POST",

                contentType: "application/json",

                dataType: "json",

                data: JSON.stringify({ value: args.rowData })

            });

            ajax.beforeSend = function (xhr) {

                ajax.httpRequest.setRequestHeader("XSRF-TOKEN",

                    $('input:hidden[name="__RequestVerificationToken"]').val());

            }

            ajax.send();

            ajax.onSuccess = function (data) {

                if (data.StatusCode === 400) {

                    showErrorMessageTop(data.Message);

                }

            };

        }

        if (args.commandColumn.type === "LockUnlock") {

            // here we are making an ajax call to server

            ajax = new ej.base.Ajax({

                url: "/Users/List?handler=LockUnlock",

                type: "POST",

                contentType: "application/json",

                dataType: "json",

                data: JSON.stringify({ value: args.rowData })

            });

            ajax.beforeSend = function (xhr) {

                ajax.httpRequest.setRequestHeader("XSRF-TOKEN",

                    $('input:hidden[name="__RequestVerificationToken"]').val());

            }

            ajax.send();

            ajax.onSuccess = function (data) {

               if (data.StatusCode === 400) {

                    showErrorMessageTop(data.Message);

               }

            };

        }

    }

And on the server side it looked like this:

 public async Task<IActionResult> OnPostLockUnlock([FromBody] CRUDModel<UserModel> valor)

        {

            var result = await _helperClient.PingAsync();

            var dto = valor.Value;

            return Json(result.Success, result.StatusCode, "/Users/List", success =>

            {

                var userLockOrUnlock = _userClient.LockOrUnlockUserAsync(new UserLockOrUnlockByUserDTO

                {

                    UserId = dto.Id,

                    Value = !dto.IsLocked

                }).Result;

                if (userLockOrUnlock.Errors?.Count > 0)

                    return JsonError(userLockOrUnlock);

                LoadDataSource();

                return new JsonResult(new { result = Items, count = Items.Count() });

            });

LoadDataSource(); fills the Items list and returns.

I need you to update the grid's dataSource.

[Rodrigo]

I managed to solve it like this:

 var grid = document.getElementById("Grid").ej2_instances[0];

 grid.dataSource = data;

[Rajapandiyan Settu]

Hi Rodrigo,

We are happy to hear that you have resolved the requirement by yourself. You can use grid.dataSource property to bind the updated data to the Grid.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S