Controlling What Is Sent To WebApiAdapter From Grid On ASP.NET Core Razor Pages (or MVC)

[danacon]

Hi,

I have noticed that when an update is required, the request sent to the web api endpoint is slightly non-standard from a REST API perspective (I think!) - instead of making a PUT to (for example) api/orders/5 (where 5 is the id of the order to update), it makes a PUT to api/orders and places the id in the json body.

Is it possible to configure the grid to place the id in url (as above)?

Thanks in advance :)

[Mohammed Farook J]

Hi Dan, 

 

Thanks for contacting Syncfusion support. 

 

We have analyzed your query. We suggest you to use the “CustomAdaptor” which is extended from an “WebApiAdaptor”. In this custom adaptor we have defined a customized “update” method which will override the default update method of WebApiAdaptor. In this method we have customized the “url” for the “PUT” action based on your requirement. Please refer to the following sample code, 

 

Please refer the screenshot below, 

 

[Index.cshtml] 

 

    <div> 

        <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Update", "Cancel" })" allowGrouping="true" allowFiltering="true" load="load"> 

            <e-data-manager url="/api/Orders/" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager> 

            ... 

       </ejs-grid> 

    </div> 

 

    <script> 

        window.customAdaptor = new ej.data.WebApiAdaptor(); 

 

        customAdaptor = ej.base.extend(customAdaptor, { 

            update(dm, keyField, value, tableName) { 

               return { 

                    type: 'PUT', 

                    url: dm.dataSource.url + value[keyField],    //This will generate the “PUT” action request as “api/Orders/5” 

                    data: JSON.stringify(value) 

                }; 

            } 

        }); 

    </script> 

 

    <script> 

        function load(args) { 

           this.dataSource.adaptor = customAdaptor; 

        } 

    </script> 

 

 

In the above code, we have used customadaptor in Grid which is extended from WebApiAdaptor. In the “load” event of Grid, we have set the customadaptor for Grid. Here we have customized the default “update” method of WebApiAdaptor. We have added “value[keyField]” which contains the id value to the “url” generated for the “PUT” action. Now the request url for “PUT” action will contain the id also, please refer the screenshot below, 

 

 

 

 

Please get back to us if you need further assistance. 

 

 

Regards, 

J Mohammed Farook 

[danacon]

Hi Mohammed, that worked perfectly, many thanks for the quick response :)

PS For info, I had to add a forward slash to the string in this bit of code otherwise it sent just api/Orders5  - url: dm.dataSource.url + value[keyField],

[Mohammed Farook J]

Hi Dan,  

 

Thanks for your update. 

 

We are happy to hear that the provided solution has been resolved your problem. 

 

Please get back to us if you need further assistance. 

 

Regards 

J Mohammed Farook