1. Home
  2. Forum
  3. ASP.NET Core
  4. retrieving data from remote controller while using remoteSaveAdaptor

retrieving data from remote controller while using remoteSaveAdaptor

I want to use remoteSaveAdaptor as it provides client side filter/sort/etc..
But I don't want to provide the data from the viewBag or the viewModel throught json property.
I want the grid to retrieve the data from remote url, like how UrlAdaptor works.

is this possible.

Or I want to use UrlAdaptor but with client side filter/sort

7 Replies
RS Renjith Singh Rajendran Syncfusion Team January 8, 2018 10:20 AM UTC

Hi Muhammad, 

Thanks for contacting Syncfusion support. 

We have analyzed your query . We suspect that you need to perform filtering/sorting at client side. We suggest you to use the URL Adaptor with Offline as true. When offline is set true, the DataManager requests the server only once and further data manipulation operation such as  filtering, sorting can be done at client side itself. 

Please refer the code example below, 

[Index.cshtml] 
 
<ej-grid id="FlatGrid" allow-paging="true"> 
    <e-datamanager url="DataSource" adaptor="UrlAdaptor" offline="true" /> 
    ... 
    ... 
</ej-grid> 
 
[HomeController.cs] 
 
public ActionResult DataSource([FromBody]DataManager dm) 
        { 
            //Your code  
        } 

Please refer the documentation links below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


MA Muhammad Assar January 8, 2018 10:31 PM UTC

Hi Renjith,

thanks for your reply, but I'm afraid I wasn't clear enough.

I want remote Create/Read/Update/Delete and client-side Sort/Filter/Group

remoteSaveAdaptor already provides remote Create/Update/Delete and client-side Sort/Filter/Group, but it is missing remote Read.

URLAdaptor provides remote Create/Read/Update/Delete, but it is missing client-side Sort/Filter/Group

I just want remote Create/Read/Update/Delete and client-side Sort/Filter/Group

I tried your suggestion by using UrlAdaptor and setting offline(true), it provided remote Read and client-side Sort/Filter/Group, but I couldn't save after Create/Update/Delete, the save button on the toolbar was disabled.
and I'm not looking for batch mode, I want the changes to be saved server-side after each Create/Update/Delete action.

thank you

RS Renjith Singh Rajendran Syncfusion Team January 9, 2018 12:14 PM UTC

Hi Muhammad, 

We have analyzed your query. We have prepared a sample based on your requirement, which could be downloaded from the link below, 

We have used the remoteSaveAdaptor and action-begin event of Grid. Initially we have bound empty value to the datasource of Grid. Later in the action-begin event we have made a server call and bound the result of the call to the dataSource of Grid. Please refer the code example below, 

[Index.cshtml] 
 
<ej-grid id="FlatGrid" allow-paging="true" action-begin="begin"> 
    <e-datamanager json="(IEnumerable<object>)ViewBag.datasource" adaptor="remoteSaveAdaptor" /> 
    ... 
   </e-columns> 
     
</ej-grid> 
<script type="text/javascript"> 
    function begin(args) { 
        if (ej.isNullOrUndefined(args.requestType)) { 
            $("#FlatGrid").ejWaitingPopup("show"); 
            $.ajax({ 
                url: "/Home/DataSource", 
                type: "POST", 
                datatype: "json", 
                contentType: "application/json; charset=utf-8", 
                success: function (result) { 
                    var gridObj = $("#FlatGrid").ejGrid('instance'); 
                    $("#FlatGrid").ejWaitingPopup("hide"); 
                    gridObj.dataSource((ej.DataManager({ json: result.result, adaptor: new ej.remoteSaveAdaptor(), insertUrl: "Home/Insert", updateUrl: "Home/NormalUpdate"})),true); 
                } 
            }); 
        } 
    } 
</script> 
 
[HomeController.cs] 
 
        public IActionResult Index() 
        { 
            if (order.Count() == 0) 
                BindDataSource(); 
            ViewBag.datasource = null; 
            return View(); 
        } 
        public ActionResult DataSource([FromBody]DataManager dm) 
        { 
            IEnumerable data = order; 
            DataOperations operation = new DataOperations(); 
            int count = data.Cast<Orders>().Count(); 
            return Json(new { result = data, count = count }); 
 
        } 
        public ActionResult NormalUpdate([FromBody]CRUDModel<Orders> myObject) 
        { 
            //Update Code 
        } 
        public ActionResult Insert([FromBody]CRUDModel<Orders> value) 
        { 
            //Insert Code 
        } 
 

Please refer the documentation links below, 

Regards, 
Renjith Singh Rajendran. 


MA Muhammad Assar January 9, 2018 08:14 PM UTC

thank you Renjith,

I tried the solution that you suggested and it worked successfully.

and it will be more easier if you added in future release the id of the grid to the arguments object of the event,

for example , in this function you mentioned:
"function begin(args) {"
if args has the id of the grid (FlatGrid) that'd be great.

thanks again

RS Renjith Singh Rajendran Syncfusion Team January 10, 2018 01:30 PM UTC

Hi Muhammad, 

We have analyzed your query. We suspect that you need to get the id of the Grid in the action-begin event. The Grid’s id can be fetch inside the action-begin event by using the following code example. Please refer the code example below, 

<ej-grid id="FlatGrid"  action-begin="begin">  
       ... 
</ej-grid> 
 
 
<script type="text/javascript">  
    function begin(args) {  
        ...  
        this.element[0].id  //Displays the Grid id as "FlatGrid" 
        ...  
    }  
</script>  

By using the above code (i.e. this.element[0].id)  it is possible to get the id of the Grid during action-begin event. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


MA Muhammad Assar January 10, 2018 10:36 PM UTC

Thanks Renjith,

I used your help to make a more generic version that doesn't depend on the current grid:

    function begin(args) {
        if (ej.isNullOrUndefined(args.requestType)) {
            var grid = $(`#${this._id}`);
            grid.ejWaitingPopup("show");
            $.ajax({
                url: args.model.dataSource.dataSource.url,
                type: "POST",
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    var gridObj = grid.ejGrid('instance');
                    gridObj.model.dataSource.dataSource.json = result.result;
                    gridObj.dataSource(gridObj.model.dataSource);
                    grid.ejWaitingPopup("hide");
                }
            });
        }
    }

now the grid uses the same DataSource as defined in the razor synatax without changing it, only appending the json result to it,
and it works flawlessly

thanks again

RS Renjith Singh Rajendran Syncfusion Team January 11, 2018 01:00 PM UTC

Hi Muhammad, 

Thanks for the update. 

We are happy to hear that your requirement has been achieved. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran.  


Loader.
Up arrow icon