Refresh grid using UrlAdaptor

[Roger Criebaum]

I'm rather new to Razor and MVC. I have an EJS Grid with a DataSource of a UrlAdaptor. The source is going to my controller and a "data" method in the controller. This method grabs the data as a DataTable, then converts it to IEnumerable<TAmazonRestockInventory>. The initial load of the grid works without issue. The data is actually cached data in the form of a tab-delimited text file.

I added a "Refresh" button on the form to allow me to get updated data--not a cached copy that could be hours or days old. I setup the call to the server-side method and that seems to work fine. However, when I make the call, the DataManagerRequest values are not provided as they are in the original call. Also, I don't know how to get the updated data into the grid. Further, I need to pass in a parameter to the method that indicates I want to get fresh data and not cached data.

[CSHTML]

@Html.EJS().Button("RefreshButton").Content("Refresh").CssClass("e-info").Render()

@Html.EJS().Grid("RestockGrid").DataSource(ds => ds.Url(@Url.Action("RestockData","Amazon")).Adaptor("UrlAdaptor")).Columns(col => ...

<script type="text/javascript">

document.getElementById('RefreshButton').addEventListener("click", function() {

new ej.DataManager({

url: "/Amazon/RestockData",

adaptor: new UrlAdaptor  <-- this causes an "undefined" error

}).executeQuery(new Query().take(14)).then((e) => {

//e.result will contain the records

$("#RestockGrid").ejGrid("dataSource", e.result);

});

});

</script>

[Controller]

public ActionResult RestockData(DataManagerRequest dm)

{

ViewBag.LastRefreshDate = IniManager.ReadValue(null, "Amazon-Restock", "LastRefresh");

DataTable dtRestockInventory = AmazonData.GetRestockInventory();

IEnumerable<TAmazonRestockInventory> DataSource = ConvertToAmazonStockInventory(dtRestockInventory);

DataOperations operation = new DataOperations();

if (dm.Search != null && dm.Search.Count > 0)

{

DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search

}

if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

{

DataSource = operation.PerformSorting(DataSource, dm.Sorted);

}

if (dm.Where != null && dm.Where.Count > 0) //Filtering

{

DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);

}

int viewCount = DataSource.Count();

if (dm.Skip != 0)

{

DataSource = operation.PerformSkip(DataSource, dm.Skip);         //Paging

}

if (dm.Take != 0)

{

DataSource = operation.PerformTake(DataSource, dm.Take);

}

return dm.RequiresCounts ? Json(new { result = DataSource, count = viewCount }, JsonRequestBehavior.AllowGet) : Json(DataSource, JsonRequestBehavior.AllowGet);

}

I have looked on forums and in documentation, and I can't get a clear understanding of how to do this. Please help.

[Pavithra Subramaniyam]

Hi Kevin, 

 

Greetings from Syncfusion. 

 

You can achieve your requirement by simple calling the refresh() method of Grid component which will send the server request with all parameters. Please refer to the below code example and documentation link for more information. 

 

[index.cshtml] 

@Html.EJS().Button("RefreshButton").Content("Refresh").CssClass("e-info").Render() 

@(Html.EJS().Grid("ProductGrid").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("130").Format("yMd").Add(); 

} ).AllowPaging().EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()) 

 

 

<script type="text/javascript"> 

    document.getElementById('RefreshButton').addEventListener("click", function () { 

        var grid = document.getElementById("ProductGrid").ej2_instances[0];  // grid instance 

        grid.refresh();        

    }); 

</script> 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/#refresh  

 

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

 

Regards, 

Pavithra S. 

[Roger Criebaum]

Thanks for the reply, but this didn't completely answer my question.

I tried a simple call to grid.refresh() and it worked, passing in the original values.

Now, I need to know how to pass a value to that method (from refresh button click). I need to send a specific value to the RestockData method, but only when I click the Refresh button. On first load, I don't need that parameter.

Thanks!

[Pavithra Subramaniyam]

Hi Kevin, 

 

Thanks for your update. 

 

From your query we found that you want to send the additional values to server while change the Grid dataSource in button click. But before that we would like to inform that you have used some EJ1 codes with EJ2 Grid. We have highlighted that codes in the below table, 

 

@Html.EJS().Button("RefreshButton").Content("Refresh").CssClass("e-info").Render() 

 

@Html.EJS().Grid("RestockGrid").DataSource(ds => ds.Url(@Url.Action("RestockData","Amazon")).Adaptor("UrlAdaptor")).Columns(col => ... 

 

<script type="text/javascript"> 

    document.getElementById('RefreshButton').addEventListener("click", function () { 

        new ej.DataManager({ 

            url: "/Amazon/RestockData", 

            adaptor: new UrlAdaptor < --this causes an "undefined" error 

        }).executeQuery(new Query().take(14)).then((e) => { 

            //e.result will contain the records 

            $("#RestockGrid").ejGrid("dataSource", e.result); 

        }); 

    }); 

</script> 

 

Please change these code like as following code snippet, 

 

<script type="text/javascript"> 

    document.getElementById('RefreshButton').addEventListener("click", function () { 

        var grid = document.getElementById("RestockGrid").ej2_instances[0]; // ej2-grid instance 

        grid.dataSource = new ej.data.DataManager({ // assigned the new datasource to Grid 

            url: "/Amazon/RestockData", 

            adaptor: new ej.data.UrlAdaptor() 

        }); 

    }); 

</script> 

 

In the above code, we have directly provide the dataManager object in Grid datasource instead of using the dataManager then function.  

 

To send the additional values to sever, we suggest to use grid addParams method to achieve this requirement. After sending the additional parameter through the addParams you need to create one new argument in your controller function to get that value. Please refer the below code snippet, 

 

Button Click: 

 

<script type="text/javascript"> 

    document.getElementById('RefreshButton').addEventListener("click", function () { 

        var grid = document.getElementById("RestockGrid").ej2_instances[0]; // ej2-grid instance 

        grid.query = new ej.data.Query().addParams('additionalParams', 1); 

        grid.dataSource = new ej.data.DataManager({ // assigned the new datasource to Grid 

            url: "/Amazon/RestockData", 

            adaptor: new ej.data.UrlAdaptor() 

        }); 

    }); 

</script> 

 

Controller: 

 

public ActionResult RestockData(DataManagerRequest dm, int? additionalParams) 

        { 

             

                       ... 

 

       } 

 

For your convenience we have prepared the sample with this requirement and you can find that sample from the below link, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid16287165.zip 

 

Regards, 

Pavithra S. 

[Roger Criebaum]

Thanks for the clarification. I made the changes and it is working well.

[Pavithra Subramaniyam]

Hi Kevin, 

Thanks for your update. 

We are happy to hear that the provided solution is working. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.