Approval Checkbox with batch update to an external API

[Hans Dickel]

I have a .NET 6 website (C#, ASP.NET, Razor) that is secured via OAuth2 that has a Syncfusion.EJ2.AspNet.Core 20.2.0.45 DataGrid. Via server side, this calls an Azure Function that is protected by a code (so not seen by the web browser) to get all records that haven't been approved. I have checkboxes on the grid to allow the user to check those entries they approve.

I need to allow the user to click "Approve" (or leverage the built-in Update) after checking one or more boxes. I would like it to take all of the records selected and send up as a single batch via server-side (not JavaScript) to the Azure Function, pull the same list pulled on entry, updating the grid once the Azure Function update is completed.

What is the best way to do this, bridging between JavaScript (of the DataGrid) and server-side website hosting the DataGrid that can talk to the Azure Function?

[Rajapandi Ravi]

Hi Hans,

Greetings from Syncfusion support

Currently we are checking on your query with your shared information and we will update you the details on or before 2^nd Sep 2022. Until then we appreciate your patience.

Regards,
Rajapandi R

[Rajapandi Ravi]

Hi Hans,

Thanks for your patience

We have checked your shared information and we could see that you like to pass the selected records to the server-side when the Approve button is clicked. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement.

 

<button id="btnSave" class="btn btn-primary btn-sm float-end">Approve</button>

<ejs-grid id="Grid" allowPaging="true" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>

    <e-grid-selectionsettings type="Multiple" checkboxOnly="true" persistSelection="true"></e-grid-selectionsettings>

    <e-grid-columns>

    .  .  .  .  .  .  .  .  .  .  .  .

    .  .  .  .  .  .  .  .  .  .  .  .

    </e-grid-columns>

</ejs-grid>

 

<script>

    document.getElementById('btnSave').onclick = function () { //Approve button click event

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

        var selectedRecords = grid.getSelectedRecords();

        var rows = JSON.stringify(selectedRecords);

        var ajaxObj = new ej.base.Ajax();

        ajaxObj.type = 'POST';

        ajaxObj.contentType = 'application/json';

        ajaxObj.url = '/Home/SelectRecord';

        ajaxObj.data = rows;

        ajaxObj.beforeSend = function (xhr) {

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

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

        };

        ajaxObj.send().then(function (value) {

            //you can use the below way to convert the date

            var parsed = ej.data.DataUtil.parse.parseJson(value);

            console.log(parsed);

        })

    };

 

</script>

HomeController.cs

 

public class SelectedModel

        {

            public List<Gridcolumns> rowData { get; set; }

        }

 

        public class Gridcolumns

        {

            public int OrderID { get; set; }

            public string CustomerID { get; set; }

            public int EmployeeID { get; set; }

            public DateTime OrderDate { get; set; }

 

 

        }

        public ActionResult SelectRecord([FromBody]List<Gridcolumns> row) //here the selected records are received at the server-side method, you can perform your action here as you want

        {

                return Json(row);

        }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-673565067.zip

Screenshot:

Regards,

Rajapandi R

[Hans Dickel]

The problem with this approach is securing the API endpoint (e.g., /Home/SelectRecord).  This is open the JavaScript client on the browser.  I cannot secure this via OAuth2 as we are already leveraging the hybrid grant type with the C# website (as the client) with our identity server.  This isn't a SPA-based client, which would be beneficial for a JavaScript-based client.

[Rajapandi Ravi]

Hi Hans,

Thanks for the update

From your query we suspect that you like to call the Azure function by using OAuth2. Since it was a common query, we suggest you follow the below general discussion link to achieve your requirement.

General Link: https://tests4geeks.com/blog/oauth2-javascript-tutorial/

If you like to send the authorization token using the DataManager. To achieve this, we suggest you use the headers property of the DataManager. We have already discussed about this in the below forum thread, please refer the below documentation and thread for more information.

Documentation: https://ej2.syncfusion.com/javascript/documentation/data/how-to/#adding-custom-headers

Forum: https://www.syncfusion.com/forums/158007/how-do-i-add-an-authorization-token-to-a-datagrid-which-is-accessing-data-using-odata

Regards,

Rajapandi R