Grid batch editing with server side update

[Ken]

Hello

I want to apply the data changed at server-side while using Grid control with batch editing.

observe that Url request show format as "api/Quote/$batch" while click update button in toolbar, meanwhile the data source format is "/api/Quote".

For the batch editing feature, there is registration for webapi BatchHandler in WebApiConfig class, how can I to handle the batch CRUD request from client in BatchHandler 

Please help to check the sample as attached solution, thank you.

Controller : TopOneWeb.Controllers.DataController.cs

Action : TopOneWeb.Controllers.DataController.Quote

View : TopOneWeb.Views.Data.Quote.cshtml   (Grid control in this view)

BatchHandler class : TopOneLib.WebApi.BatchHandler2.cs

QuoteController  (Api Controller) : TopOneLib.WebApi.QuoteController.cs  ( to implement action for CRDU )

Attachment: TopOne5_9b8aa285.zip

[Rahul Narayanasamy]

Hi Ken, 

 

Thanks for contacting Syncfusion support. 

 

Query: I want to apply the data changed at server-side while using Grid control with batch editing. observe that Url request show format as "api/Quote/$batch" while click update button in toolbar, meanwhile the data source format is "/api/Quote". 

 

We have validated your query and now the batch request is send properly. Here, we have achieved this by using Query class and CustomAdaptor. Please find the below code example for your reference. 

 

[Code example] [Quote.cshtml] 

<div class="wrapper-form-layout"> 

@Html.EJS().Grid("quoteDetail").Locale("zh-TW").DataSource(dm => dm.Url("/api").CrossDomain(true).Adaptor("WebApiAdaptor")) 

            .Query("new ej.data.Query().from('Quote')").AllowTextWrap(false).ShowColumnChooser(true).ShowColumnMenu(false).Load("load").Columns(col => 

        { 

               ... 

               ... 

        }).EditSettings(edit => 

        { 

            edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch).ShowDeleteConfirmDialog(true); 

        }).Toolbar( 

      new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search", "ColumnChooser" } 

   ).Render() 

</div> 

 

 

<script> 

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

 

    customAdaptor = ej.base.extend(customAdaptor, { 

 

        batchRequest: function (data, changes, e) { 

            e.url = 'Quote'; 

            return ej.data.WebApiAdaptor.prototype.batchRequest.call(this, data, changes, e) 

        } 

    }); 

</script> 

 

<script> 

    function load(args) { 

        this.dataSource.adaptor = customAdaptor; 

    } 

</script> 

We found that the “Query table name is not used by grid CRUD operations” as a bug and logged report for the same. The fix for the issue will be available on any of our upcoming release. 

 

In the below sample, batch request is sent properly. Use this until our patch release. In your side, the batch saving process is not maintained properly. Please check batch saving process from your side. 

 

 

 

We have prepared a sample based on your requirement. Please find the sample in below link. 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TopOne5_Sample-287744473 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rahul Narayanasamy.