We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Return data to client after grid refresh

Return data to client after grid refresh

In my application, I have a grid and a refresh button. From a different post, I was able to get the refresh button to work. Now, I need to be able to return data back to the client after the grid has been refreshed.

[CSHTML]
@(Html.EJS()
.Grid("RestockGrid")
.DataSource(ds => ds.Url(@Url.Action("RestockData", "Amazon")).Adaptor("UrlAdaptor"))
.Columns(col => { ... })
.Height("auto")
.Width("auto")
.AllowFiltering(true)
.FilterSettings(filt => filt.Type(Syncfusion.EJ2.Grids.FilterType.FilterBar))
.AllowSorting(true)
.AllowPaging(true)
.PageSettings(page => page.PageSize(14))
.AllowTextWrap()
.Render()
)

[JS]
document.getElementById('RefreshButton').addEventListener("click", function () {
var grid = document.getElementById("RestockGrid").ej2_instances[0]; // ej2-grid instance
grid.query = new ej.data.Query().addParams('fullRefresh', true); 
grid.dataSource = new ej.data.DataManager({ // assigned the new datasource to Grid
url: "/Amazon/RestockData",
adaptor: new ej.data.UrlAdaptor()
});
});

[CONTROLLER]
public ActionResult RestockData(DataManagerRequest dm, bool fullRefresh = false)
{
DataTable dtRestockInventory = AmazonData.GetRestockInventory(fullRefresh);
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);
}
ViewBag.LastRefreshDate = IniManager.ReadValue(null, "Amazon-Restock", "LastRefresh");

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

Specifically, I need to update a text element with the value from ViewBag.LastRefreshDate. The data in the grid initially comes from a cache (if it exists). When the button is clicked, the data gets refreshed from the source. The date/time of the source refresh also gets updated. I need to be able to get the new date onto the page.

Any ideas on how to accomplish this?

Thanks,
Kevin

15 Replies
HJ Hariharan J V Syncfusion Team July 1, 2019 12:24 PM UTC

Hi Kevin, 

Thanks for contacting Syncfusion support. 

From your query we found that you want to send the additional values from controller to view while update the Grid datasource through the button click. We suggest to use the custom adaptor concept to achieve this requirement. Because, you can easily get the returned additional value in view by using this custom adaptor. To achieve this requirement you need to change your code like as below code snippet, 

Client side: 
 
window.customAdaptor = new ej.data.UrlAdaptor(); // create the custom adaptor by extending the default UrlAdaptor 
    document.getElementById('RefreshButton').addEventListener("click", function () { 
        var grid = document.getElementById("RestockGrid").ej2_instances[0]; // ej2-grid instance 
        grid.query = new ej.data.Query().addParams('fullRefresh', true); 
        grid.dataSource = new ej.data.DataManager({ // assigned the new datasource to Grid 
            url: "/Amazon/RestockData", 
            adaptor: window.customAdaptor // assign the created custom adaptor 
        }); 
    }); 
    customAdaptor = ej.base.extend(customAdaptor, { 
        processResponse(data, ds, query, xhr, request, changes) { 
            document.getElementById("textbox").value = data.date; // provide the returned date (additional value to textbox) 
            return data; 
        } 
    }); 

Controller: 
 
public ActionResult RestockData(DataManagerRequest dm, bool fullRefresh = false) 
    { 
         
                        ... 
 
       var dateTime = IniManager.ReadValue(null, "Amazon-Restock", "LastRefresh"); 
 
        return ( 
            dm.RequiresCounts 
                ? Json(new { result = DataSource, count = viewCount, date = dateTime }, JsonRequestBehavior.AllowGet) 
                : Json(DataSource, JsonRequestBehavior.AllowGet) 
        ); 
    } 

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


Regards, 
Hariharan  


RC Roger Criebaum July 8, 2019 02:30 PM UTC

Thanks for the suggestion. It worked. However, there is now a side-effect: when I click on a column header to sort the data, the "fullRefresh" flag is still set to "true", thereby doing a full refresh. How do I only set the flag when I press the [Refresh] button and not when I click on the column header?

HJ Hariharan J V Syncfusion Team July 9, 2019 08:42 AM UTC

Hi Kevin, 

We suggest to change the Grid addParams value in customAdaptor processResponse method to achieve this requirement. Please refer the below code snippet, 

customAdaptor = ej.base.extend(customAdaptor, { 
        processResponse(data, ds, query, xhr, request, changes) { 
            document.getElementById("textbox").value = data.date; // provide the returned date (additional value to textbox) 
            var grid = document.getElementById("Grid").ej2_instances[0]; // ej2-grid instance 
            grid.query.addParams().params[0].value = false; 
            return data; 
        } 
    }); 

Regards, 
Hariharan 


RC Roger Criebaum November 27, 2019 06:29 PM UTC

I'm now having an issue with filtering. When I type a simple string (not using '='), the code fails on Operator being null

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

Why would this be happening? When I inspect dm.where[0].predicates.Operator, it shows "startswith". Any suggestions?

TS Thavasianand Sankaranarayanan Syncfusion Team November 28, 2019 01:21 PM UTC

Hi Kevin, 

By default, when we filter the string column then it automatically set filter operator as “startswith” for that column. We have attached a sample for your reference. 


If we misunderstood your query then share more information(did you faced any exception or console error when filter string column/ do you want to change the filter operator) that will helpful for us to validate further at our end. 

Regards, 
Thavasianand S. 


FR Francisco February 4, 2020 09:11 PM UTC

Hi
i want to use ej2 mvc grid with  [ValidateAntiForgeryToken] in all controllers and i want to paint the grid and after that raise a trigger to load data, and load data size to page size, to avoid bottlenecks and be faster

can you help me with this?

DR Dhivya Rajendran Syncfusion Team February 5, 2020 01:31 PM UTC

Hi Francisco, 
 
Thanks for contacting Syncfusion support. 
 
Query: i want to use ej2 mvc grid with  [ValidateAntiForgeryToken] in all controllers and i want to paint the grid and after that raise a trigger to load data, and load data size to page size, to avoid bottlenecks and be faster 
 
We have validated your query and you want to use AntiForgeryToken with Grid. You can achieve your requirement by using below way. Find the below code snippets and sample for your reference. 
 
public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddMvc().AddJsonOptions(options => 
            { 
                options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver(); 
            }); 
            services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN"); 
 
        } 
@{ 
    ViewData["Title"] = "Home Page"; 
} 
@Html.AntiForgeryToken() 
<div> 
    <div> 
        @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").CrudUrl("/Home/CrudUpdate").Adaptor("UrlAdaptor"); }).AllowPaging(true).AllowReordering().Width("auto").Columns(col => 
    { 
        col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Add(); 
        col.Field("OrderDate").HeaderText("OrderDate").Add(); 
        col.Field("CustomerID").HeaderText("FirstName").Add(); 
    }).Load("load").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
    </div> 
</div> 
 
<script> 
function load(){ 
this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]; 
} 
</script> 
 
        [ValidateAntiForgeryToken] 
        public IActionResult UrlDatasource([FromBody]Data dm) 
        { 
            var order = OrdersDetails.GetAllRecords(); 
            var Data = order.ToList(); 
            int count = order.Count(); 
            return dm.requiresCounts ? Json(new { result = Data.Skip(dm.skip).Take(dm.take), count = count }) : Json(Data); 
        } 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
R.Dhivya 


FR Francisco February 6, 2020 08:06 PM UTC

Hi Dhivya , thanks for your kindle answer
i made a partial solution with next code

but i want to know how i can send data for create the DataManagerRequest object in controller, specialy Skip and take, and trigger the same call with ajax for pagging

thanks!!

[CSHTML]
@{
    ViewBag.Title = "Home Page";
}

<input type="text" id="textbox" />

<br />

@Html.EJS().Button("RefreshButton").Content("Refresh").CssClass("e-info").Render()
@Html.AntiForgeryToken()
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowPaging(true).PageSettings(page => page.PageCount(4).PageSizes(true)).AllowTextWrap().Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").Add();
    col.Field("EmployeeID").HeaderText("Employee ID").Width("120").Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("120").Format("yMd").Add();
}).Render()

<script type="text/javascript">
    window.customAdaptor = new ej.data.UrlAdaptor(); // create the custom adaptor by extending the default UrlAdaptor
    document.getElementById('RefreshButton').addEventListener("click", function () {
        
        var token1 = document.getElementsByName("__RequestVerificationToken")[0].value;
        var gridObj = document.getElementById("Grid").ej2_instances[0]; 
        gridObj.showSpinner(); // show the spinner 
        gridObj.query = new ej.data.Query().addParams('fullRefresh', 1);
        var Ajax = new ej.base.Ajax({
            type: "POST",
            url: "/Home/UrlDatasource",
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
            
            token: token1,
            data: $.param({
                    __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
                    action: 'insert',
                    additionalParams:1
                }),
            postData: JSON.stringify([{ fullRefresh: 1, memberGroupId: 2, '__RequestVerificationToken': token1, }]) 
           
        }); 
        Ajax.send(); 
        Ajax.onSuccess = function (result) {  
            debugger;
            var gridObj = document.getElementById("Grid").ej2_instances[0];             
            var data = new ej.data.DataUtil.parse.parseJson(result);  
            gridObj.dataSource = data; 
             document.getElementById("textbox").value = data.date;
            gridObj.hideSpinner(); // We have hide the spinner while bind data in Grid 
        }; 
        Ajax.onFailure = function (data) { 
            console.log(data);
             gridObj.hideSpinner();
        } 


    });

    customAdaptor = ej.base.extend(customAdaptor, {
            beforeSend: function (request, settings) {
                    settings.setRequestHeader("myData1", "Syncfusion");
                    settings.setRequestHeader("myData2", 23243);
                
                },
        processResponse(data, ds, query, xhr, request, changes) {
            document.getElementById("textbox").value = data.date; // provide the returned date (additional value to textbox)
            return data;
        }
    });
</script>


[CONTROLLER]

 [ValidateAntiForgeryToken]
        public ActionResult UrlDatasource(DataManagerRequest dm, int? additionalParams)
        {
            IEnumerable DataSource = order;
            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 count = DataSource.Cast<Orders>().Count();
            if (dm.Skip != 0)
            {
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging
            }
            if (dm.Take != 0)
            {
                DataSource = operation.PerformTake(DataSource, dm.Take);
            }
            var dateTime = DateTime.Now;
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count, date = dateTime }) : Json(DataSource);
        }

DR Dhivya Rajendran Syncfusion Team February 7, 2020 12:19 PM UTC

Hi Francisco, 
 
Thanks for your update. 
 
Query: i want to know how i can send data for create the DataManagerRequest object in controller, specialy Skip and take 
 
We have validated your query and we suspect that you want to handle paging operations in server side. By default, we have built-in support for handling server side operations(paging, sorting, etc). You can achieve your requirement by using UrlAdaptor. Find the below code snippets, documentation and sample for your reference. 
 
@Html.AntiForgeryToken() 
<div> 
    <div> 
        @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").CrudUrl("/Home/CrudUpdate").Adaptor("UrlAdaptor"); }).AllowPaging(true).Width("auto").Columns(col => 
    {   //need to define dataSource as Adaptor type 
        col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Add(); 
        col.Field("OrderDate").HeaderText("OrderDate").Add(); 
        col.Field("CustomerID").HeaderText("FirstName").Add(); 
    }).Load("load").PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()  //you can change PageSize property to customize the number of records get from Controller. Now it will take 15 records 
    </div> 
</div> 
... 
 
[ValidateAntiForgeryToken] 
        public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
            IEnumerable DataSource = OrdersDetails.GetAllRecords(); 
            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 count = DataSource.Cast<OrdersDetails>().Count(); 
            if (dm.Skip != 0)   
            { 
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 
            } 
            if (dm.Take != 0)   //based on the Skip and Take values, the paging operation is performed. Skip denotes that the number of records need to skiped and the Take denoted that the number od records needs to be taked from server 
            { 
                DataSource = operation.PerformTake(DataSource, dm.Take); 
            } 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource); 
        } 
 
Help Documentation:                https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#url-adaptor 
                                             https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/#handling-on-demand-grid-actions 
                                             https://ej2.syncfusion.com/aspnetmvc/documentation/grid/paging/ 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
R.Dhivya 


FR Francisco February 7, 2020 06:17 PM UTC

Hi Dhivya, you are right, but i need to add the antiforgery token with urladaptor and sen extra params from others html fields, can you help me?

i try to add in header in the load, but i cant lucky to maketo work

i use the EJ2MVCSampleBrowser.csproj

[CSHTML]
   
        @Html.AntiForgeryToken()
        @Html.EJS().Grid("UrlAdaptor2").DataSource(ds => ds.Url(@Url.Action("UrlDatasource", "Grid")).Adaptor("UrlAdaptor")).Load("onLoad").AllowSorting().Columns(col =>
         {
             col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
             col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add();
             col.Field("Freight").HeaderText("Freight").Width("130").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
             col.Field("ShipCity").HeaderText("Ship City").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
         }).AllowPaging().AllowFiltering().Toolbar(new List() { "Search" }).Render()
   
   


DR Dhivya Rajendran Syncfusion Team February 10, 2020 08:18 AM UTC

 
Hi Francisco, 
 
Thanks for your update. 
 
Query: but i need to add the antiforgery token with urladaptor and sen extra params from others html fields, can you help me? 
 
We have validated your query and we suspect that you want to send some additional parameters to server. You can achieve your requirement by using the Query property. Please find the below code snippets and help documentation for more information. 
 
[code snippets] 
... 
<div> 
    <div> 
        @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").CrudUrl("/Home/CrudUpdate").Adaptor("UrlAdaptor"); }).AllowPaging(true).Query("new ej.data.Query().addParams('ej2Grid', 'true')").Width("auto").Columns(col => 
    { 
        ... 
   }).Load("load").PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
    </div> 
</div> 
 
[ValidateAntiForgeryToken] 
       public IActionResult UrlDatasource([FromBody]TestDm dm) 
        { 
            IEnumerable DataSource = OrdersDetails.GetAllRecords(); 
            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 count = DataSource.Cast<OrdersDetails>().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 = count }) : Json(DataSource); 
        } 
 
        public class TestDm : DataManagerRequest 
        { 
            public string ej2Grid { get; set; } 
        } 
 
[screenshot] 
 
 
 
Query: i try to add in header in the load, but i cant lucky to maketo work 
 
You can add header in data request by using below way. Find the below code snippet for your reference. 
 
... 
<div> 
    <div> 
        @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").CrudUrl("/Home/CrudUpdate").Adaptor("UrlAdaptor"); }).AllowPaging(true).Query("new ej.data.Query().addParams('ej2Grid', 'true')").Width("auto").Columns(col => 
    { 
        ... 
   }).Load("load").PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
    </div> 
</div> 
 
<script> 
function load(){ 
this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]; 
} 
</script> 
[screenshot]  
 
Please get back to us if you need further assistance. 
 
Regards, 
R.Dhivya 


FR Francisco February 10, 2020 02:56 PM UTC

thanks Dhivya , seem its asp.net core, how can achieve this in net 4.7? i'm preparing a question with my all enviroment

RN Rahul Narayanasamy Syncfusion Team February 13, 2020 05:46 PM UTC

Hi Francisco,

Sorry for the delay in getting back to you.

Based on your request, we have prepared a sample in ASP.NET MVC. Please find the sample in the below link.


  
@Html.AntiForgeryToken() 
        @Html.EJS().Grid("Grid").AllowFiltering(true).DataSource(dm => dm.Url("Home/DataSource").InsertUrl("Home/Insert").UpdateUrl("Home/Update").RemoveUrl("Home/Delete").Adaptor("UrlAdaptor")).Load("load").ActionComplete("actioncomplete").Columns(col => 
                        { 
  
                          .  .  .  .  .  .  . 
  
                        }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
    </div> 
</div> 
  
<script> 
  
    ... 
  
    function load(args) { 
        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]; 
  
    } 
</script> 



Please get back to us if you need further assistance.

Regards,
Rahul


AW Abdul Wahab May 7, 2020 10:45 PM UTC

I have used the same way to refresh my grid but after that it shows 
No records to display
0 of 0 pages (0 items)
in grid

RR Rajapandi Ravi Syncfusion Team May 8, 2020 01:54 PM UTC

Hi Abdul, 

Based on your query we have checked our previous attached sample and tried to reproduce the issue but it works fine from our end. Please refer the below sample and video demo for more information.  



If you still face the issue, Please share the below details that will be helpful for us to provide better solution. 

1)      Please share your exact requirement scenario with detailed description. 

2)      Please share your issue scenario in video format 

3)      If possible please reproduce the issue from our above attached sample. 

Regards, 
Rajapandi R 


Loader.
Up arrow icon