Refresh Grid data from server

[Leon]

I have the following Grid:

<ej-Button ID="refresh" Type="Button" Text="Refresh4" click="refresh" />

<ej-grid id="FlatGrid" allow-sorting="true" allow-paging="true" allow-reordering="true">

<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" show-delete-confirm-dialog="true" edit-mode="@(EditMode.Normal)"></e-edit-settings>

<e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel","excelExport","wordExport","pdfExport" })"></e-toolbar-settings>

<e-datamanager json="(IEnumerable<object>)Model" update-url="/Employees/Edit" insert-url="/Employees/Create" remove-url="/Employees/Delete" adaptor="remoteSaveAdaptor" />

<e-columns>

<e-column field="EmployeeID" header-text="EmployeeID" text-align="Left" width="70" is-primary-key="true" type="number"></e-column>

<e-column field="Name" header-text="Name" text-align="Left" width="70"></e-column>

<e-column field="LastName" header-text="Last Name" text-align="Left" width="80" tooltip="#colTip" clip-mode="EllipsisWithTooltip"></e-column>

<e-column field="DOB" header-text="Birth Date" text-align="Left" width="80" edit-type="Datepicker" format="{0:MM/dd/yyyy}"></e-column>

<e-column field="DepartmentID" datasource="(IEnumerable<object>)ViewBag.DataSource2"

header-text="Department" foreign-key-field="ID" foreign-key-value="Name" text-align="Left"

width="80" edit-type="@(EditingType.Dropdown)"></e-column>

<e-column header-Text="Manage Records" width="100">

<e-column-commands>

<e-column-command type="edit">

<e-button-options content-type="TextOnly" text="Edit"></e-button-options>

</e-column-command>

<e-column-command type="delete">

<e-button-options content-type="TextOnly" text="Delete"></e-button-options>

</e-column-command>

<e-column-command type="save">

<e-button-options content-type="TextOnly" text="Save"></e-button-options>

</e-column-command>

<e-column-command type="cancel">

<e-button-options content-type="TextOnly" text="Cancel"></e-button-options>

</e-column-command>

</e-column-commands>

</e-column>

</e-columns>

</ej-grid>

　

<script type="text/javascript">

function refresh() {

var gridObj = $("#FlatGrid").data("ejGrid");

gridObj.refreshContent(true);

}

</script>

What is the correct way to refresh the grid data from the server without refreshing the full page? Ajax?

[Venkatesh Ayothi Raman]

Hi Juan, 

Thanks for contacting Syncfusion support. 

We have unclear about your requirement, so could you please provide following details? 

1)      We went through your code example and found that you are using remote save adaptor(for local data source). Do you want to bounded the remote data source? 

2)      Do you want to bound the Grid data source dynamically? If so, provide details. 

3)      Updated the Grid data not refreshed in Grid while updating the record? If so, provide details and scenario. 

4)      Share the replication procedure. 

5)      Graphical representation of the issue. 

It would be helpful for us to find the problem and provide the better solution as earliest. 

Regards, 

Venkatesh Ayothiraman. 

[Venkatesh Ayothi Raman]

Hi Juan, 

Thanks for contacting Syncfusion support. 

We have unclear about your requirement, so could you please provide following details? 

1)      We went through your code example and found that you are using remote save adaptor(for local data source). Do you want to bounded the remote data source? 

2)      Do you want to bound the Grid data source dynamically? If so, provide details. 

3)      Updated the Grid data not refreshed in Grid while updating the record? If so, provide details and scenario. 

4)      Share the replication procedure. 

5)      Graphical representation of the issue. 

It would be helpful for us to find the problem and provide the better solution as earliest. 

Regards, 

Venkatesh Ayothiraman. 

[Leon]

The CRUD operations in the grid work just fine. All I need is a way to refresh my grid every 30 seconds, to retrieve data from the server. According to your documentation this should do it.

<script type="text/javascript">

function refresh() {

var gridObj = $("#FlatGrid").data("ejGrid");

gridObj.refreshContent(true);

}

</script>

But it is not refreshing the data from the server.

[Venkatesh Ayothi Raman]

Hi Juan, 

Thanks for the update. 

If you want to dynamically refresh the Grid content from server side, then We suggest you to use URL adaptor to get the data from server side. In this, we can fetch the set of records from Grid using URL adaptor feature. In this feature works like load on demand concept. For example, if we set PageSize as 50 then it will get the 50 records from server side and displaying it. And then if we click next page another set of 50 records gets from server side. Please refer to the code example and Help document, 

Code example: 

@Grid 

 

<ej-Button ID="refresh" Type="Button" Text="Refresh4" click="refresh" /> 

 

<ej-grid id="FlatGrid" allow-sorting="true" allow-paging="true" allow-reordering="true"> 

 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" show-delete-confirm-dialog="true" edit-mode="@(EditMode.Normal)"></e-edit-settings> 

 

    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel","excelExport","wordExport","pdfExport" })"></e-toolbar-settings> 

 

    <e-datamanager  url="/Home/DataSource" update-url="/Home/Edit" insert-url="/Home/Create" remove-url="/Home/Delete" adaptor="UrlAdaptor" /> 

 

    <e-columns> 

        <e-column field="OrderID" header-text="Order ID" text-align="Left" width="70" is-primary-key="true" type="number"></e-column> 

        <e-column field="EmployeeID" header-text="EmployeeID" text-align="Left" width="70" type="number"></e-column> 

 

        <e-column field="CustomerID" header-text="Name" text-align="Left" width="70"></e-column> 

 

        

        

    </e-columns> 

 

</ej-grid> 

 

 

 

<script type="text/javascript"> 

 

function refresh() { 

 

var gridObj = $("#FlatGrid").data("ejGrid"); 

 

gridObj.refreshContent(true); 

 

} 

 

</script> 

Help documentation: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor 

Also, you can perform the Grid actions such as Paging, Filtering and Sorting in server side as well as we have already created a knowledge base documentation for this, 

KB: https://www.syncfusion.com/kb/4300 

We have also created a sample for your convenience which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8_(3)798492947 

 

 

You can refresh the data from server side dynamically when we call the refreshContent API. The post request will send to the server side while calling refreshContent method in URL adaptor. 

 

Regards, 

Venkatesh Ayothiraman. 

[Leon]

This is working great now. I am very thankful for your assistance and quick responses. Since I am refreshing the grid every 60 seconds.... is there a way to remove the spinner on the grid while the refresh is happening? In my case it is very annoying  to have it visible all the time.Do you have a sample like this:http://mvc.syncfusion.com/demos/web/grid/signalr   for asp.net core?

[Venkatesh Ayothi Raman]

Hi Juan, 

Thanks for the update. 

Query #1:”Hide the default waiting popup(spinner) in Grid” 

We have achieved your requirement using load event in Grid. In this event, we can disable the waiting popup while fetching the data from server side. Please refer to the following code example, 

Code example: 

@Grid 

 

<ej-Button ID="refresh" Type="Button" Text="Refresh4" click="refresh" /> 

 

<ej-grid id="FlatGrid" allow-sorting="true" load="onLoad" allow-paging="true" allow-reordering="true"> 

 

              . . . 

    <e-columns> 

           . . . 

        

        

    </e-columns> 

 

</ej-grid> 

 

<script> 

    function onLoad(args) { 

        $("#"+this._id).ejWaitingPopup({ template: " " }); //Disable the default waiting popup shown while fetching the data 

    } 

</script> 

 

Help documentation: https://help.syncfusion.com/api/js/ejgrid#events:load 

 

Please refer to the following help documentation for additional information about hide/show the waiting popup, 

http://help.syncfusion.com/js/api/ejwaitingpopup#methods:hide  

 

 

Query #2:”Signalr sample in ASP.net core sample” 

 

We have prepared a sample based on your requirement which can be download from following link,  

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Chat1411907825  

In that sample, we have configured the signalR into the ASP.NET core app and render the Grid control. Please refer to the following steps to configure the signalR and Syncfusion control in ASP.Net core in Visual Studio 2017.  

1)      First create an empty web application in VS2017.  

2)      Open the Package manage console   

3)      Type the following command- install-package Gray.Microsoft.AspNetCore.Signalr.Server -pre  

4)      Open the Startup.cs page and type the following lines  

Code example:  

using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Threading.Tasks;  

using Microsoft.AspNetCore.Builder;  

using Microsoft.AspNetCore.Hosting;  

using Microsoft.Extensions.Configuration;  

using Microsoft.Extensions.DependencyInjection;  

using Microsoft.Extensions.Logging;  

  

namespace Chat  

{  

    public class Startup  

    {  

        . . .  

  

        public IConfigurationRoot Configuration { get; }  

  

        // This method gets called by the runtime. Use this method to add services to the container.  

        public void ConfigureServices(IServiceCollection services)  

        {  

            // Add framework services.  

            services.AddMvc();  

            services.AddSignalR();  

        }  

  

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.  

        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)  

        {  

            . . .  

            app.UseStaticFiles();  

  

            app.UseSignalR();  

  

. . .  

    }  

}  

  

5)      Create Hubs folder and hub class like in above sample.  

6)      Now open the bower.json  file and type the following line  

Code example:  

{  

  "name": "asp.net",  

  "private": true,  

  "dependencies": {  

    "bootstrap": "3.3.7",  

    "jquery": "2.2.0",  

    "jquery-validation": "1.14.0",  

    "jquery-validation-unobtrusive": "3.2.6",  

    "signalr": "2.2.1",  

      }  

}  

  

7)      Now open the index.html page and refer the following signalr script reference files,  

Code example:  

<ej-grid id="Editing" datasource="@ViewBag.data"  action-complete="actionComplete"allow-paging="true" data-bound="dataBound">  

    <e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true"></e-edit-settings>  

    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","cancel","update" })"></e-toolbar-settings>  

  

    <e-columns>  

        <e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70"></e-column>  

        <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>  

        <e-column field="EmployeeID" header-text="Employee ID" text-align="Left"width="75"></e-column>  

        <e-column field="Freight" header-text="Freight" text-align="Right" format="{0:C2}" width="75"></e-column>  

  

    </e-columns>  

</ej-grid>  

  

<script src="~/lib/signalr/jquery.signalR.min.js"></script>  

<script src="signalr/hubs"></script>  

  

    

8)      Now refer the following Help documentation for configure the Syncfusion control in VS2017  

Help documentation: https://help.syncfusion.com/aspnet-core/gettingstarted/getting-started-vs2017  

9)      Please kindly ensure the jquery reference is referred only once in project or multiple times. If we reffered multiple times then it causes the error.  

10)    After configuration of SignalR, you have to create Hub for communication between different actions of grid.  

Code example:  

. . .  

using Microsoft.AspNetCore.SignalR;  

using Microsoft.AspNetCore.SignalR.Hubs;  

  

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860  

  

namespace Chat.Controllers  

{  

    public class SignalRTestHub : Hub  

    {  

  

          

  

        public void Modify(string name, string action, Object data)  

        {  

            Clients.Others.modify(name, action, data);  

        }  

    }  

}  

  

 

11)   Please refer to the following Help documentation for more information about SignalR,  

Help documentation: https://help.syncfusion.com/aspnetmvc/grid/how-to#binding-signalr-endpoint  

Refer to the following code example for client side signalR configuration,  

Code example:  

<ej-grid id="Editing" datasource="@ViewBag.data"  action-complete="actionComplete"allow-paging="true" data-bound="dataBound">  

    . . .  

    <e-columns>  

. . .  

  

    </e-columns>  

</ej-grid>  

  

<script src="~/lib/signalr/jquery.signalR.min.js"></script>  

<script src="signalr/hubs"></script>  

  

window.signal = $.connection.signalRTestHub;  

        window.signal.client.modify = function (userIp, action, details) {  

            if (action == "delete") {  

                var gridObj = $("#Editing").ejGrid("instance");  

                var dm = ej.DataManager(gridObj.model.dataSource);  

                var data = dm.executeLocal(ej.Query().where("OrderID", ej.FilterOperators.equal, details.OrderID))  

                if (data.length)  

                    $("#log").append("<li>" + ej.format(new Date(), "hh:mm:ss") + " : " + userIp + " has " + action + " a record with OrderID =" + details.OrderID + "</li>");  

            }  

            else  

                $("#log").append("<li>" + ej.format(new Date(), "hh:mm:ss") + " : "+ userIp + " has " + action + " a record with OrderID =" + details.OrderID + "</li>");  

            if (action == "add")  

                $("#Editing").ejGrid("addRecord", details);  

            else if (action == "beginedit") {  

                

                $("#Editing").ejGrid("updateRecord", "OrderID", details);  

            }  

            else  

                $("#Editing").ejGrid("deleteRecord", "OrderID", details);  

        };  

        $.connection.hub.start().done(function () {  

              

            window.actionComplete = function (args) {  

                if (args.requestType == "save" || args.requestType == "delete")  

                    window.signal.server.modify($("#userName").text(), args.requestType == "delete" ? args.requestType : window.previousAction, args.data);  

                if (args.requestType != "delete")  

                    window.previousAction = args.requestType;  

            }  

        });  

 

Video demo: http://www.syncfusion.com/downloads/support/directtrac/general/ze/signalrdemo321538162  

 

Regards, 

Venkatesh Ayothiraman. 

[Leon]

This is great. Thank You!

[Venkatesh Ayothi Raman]

Hi Juan, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman. 

[Leon]

I updated this code to ASP.net core 2.0. Since I need to write to a database a changed the grid code to:

<ej-grid id="objGrid" action-complete="actionComplete" allow-paging="true" data-bound="dataBound">

    <e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true"></e-edit-settings>

    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","cancel","update" })"></e-toolbar-settings>

    <e-datamanager id="objDataMgr" json="(IEnumerable<object>)ViewBag.DataSource1" update-url="/Employees/Edit2" insert-url="/Employees/Create" remove-url="/Employees/Delete" adaptor="remoteSaveAdaptor" />

    <e-columns>

        <e-column field="EmployeeID" is-primary-key="true" header-text="EmployeeID" text-align="Right" width="70"></e-column>

        <e-column field="Name" header-text="Name" width="80"></e-column>

        <e-column field="LastName" header-text="LastName" text-align="Left" width="75"></e-column>

    </e-columns>

</ej-grid>

Changed the java scrit for:

<script type="text/javascript">

    window.signal = $.connection.signalRHub;

    window.signal.client.modify = function (userIp, action, details) {

        if (action == "delete") {

            var gridObj = $("#objGrid").ejGrid("instance");

            //var dm = ej.DataManager(gridObj.model.dataSource);

            var dm = ej.DataManager($("#objDataMgr"));

            var data = dm.executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, details.EmployeeID))

        }

        if (action == "add")

            $("#objGrid").ejGrid("addRecord", details);

        else if (action == "beginedit") {

            $("#objGrid").ejGrid("updateRecord", "EmployeeID", details);

        }

        else

            $("#objGrid").ejGrid("deleteRecord", "EmployeeID", details);

    };

    $.connection.hub.start().done(function () {

        window.actionComplete = function (args) {

            if (args.requestType == "save" || args.requestType == "delete")

                window.signal.server.modify($("#userName").text(), args.requestType == "delete" ? args.requestType : window.previousAction, args.data);

            if (args.requestType != "delete")

                window.previousAction = args.requestType;

        }

    });  

</script>

It is working and if I open three browsers the three get refreshed. The only problem is that the update method in the server side is called as many times as clients I have open. How can I prevent that?

Thanks,

[Venkatesh Ayothi Raman]

Hi Juan, 

Thanks for the update. 

We went through your code example that you have shared for us and found that you are using RemoteSaveAdaptor for CRUD operation and also perform the CRUD operations using API like addRecord, updateRecord and deleteRecord like as follows 

    if (action == "add") 

            $("#objGrid").ejGrid("addRecord", details); 

        else if (action == "beginedit") { 

            $("#objGrid").ejGrid("updateRecord", "EmployeeID", details); 

        } 

        else 

            $("#objGrid").ejGrid("deleteRecord", "EmployeeID", details); 

    }; 

 

</script> 

 

The Edited/Added/Inserted record details will send to send to server side while editing the Grid when using RemoteSaveAdaptor. But you are performing CRUD operations using both API and remoteSaveAdaptor URL. This is cause of this issue and we suggest you to perform the CRUD operations using RemoteSaveAdaptor url. 

If you still face the same issue, then could you please provide more details about your requirement? 

Regards, 

Venkatesh Ayothiraman. 

[Leon]

I see what you are saying the problem is that if I comment out the code inside:

window.signal.client.modify = function (userIp, action, details) {

}

The changes are saved to the server but the other clients are not refreshed. Can you please provide a sample using your suggestion remoteSaveAdaptor. What  is the code I have to use in window.signal.client.modify to refresh the grid data ?

Thanks.

[Dave Lewis]

Is it possible to refresh a datasource when using remoteSaveAdaptor?  I was told in another forum thread that based on my editing needs, I have to use this type of adaptor.  However, I am not able to get "refreshContent" to work for me.  I have two grids on my page that relate to each other.  Changing the content of one grid will effect what exists in the other grid, so I need to be able to refresh the datasources to see those changes.  The only way that I am currently able to do that is by refreshing the entire page, which will completely rebuild the datasources in the controller.  This is not ideal, because of the time it takes to refresh.

[Seeni Sakthi Kumar Seeni Raj]

Hi Dave,  

 

We could see you would like to update the datasource of the Grid in another Grid’s update. This can be achieved by using the dataSouce method of the Grid. Refer to the API References.  

 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

 

In the action-complete event of the first Grid, collect the data of them and update the same to the second Grid using the dataSource method.  

 

<ej-grid id="Grid1" allow-paging="true" action-complete="onActionComplete"> 

<e-datamanager json="ViewBag.datasource" update-url="/Home/UpdateUrl" adaptor="remoteSaveAdaptor"/> 

</ej-grid> 

 

<ej-grid id="Grid2" allow-paging="true" action-complete="onActionComplete"> 

 

 

</ej-grid> 

 

<script> 

    function onActionComplete(args) { 

        //while request type is save 

        if (args.requestType == "save") { 

            //collect dataSource 

            var src = this.model.dataSource.dataSource.json; 

 

            var id = this._id == "Grid1" ? "#Grid2" : "#Grid1"; 

 

            //update the another Grid 

            $(id).ejGrid("dataSource", src); 

        } 

    } 

</script> 

 

Regards,  

Seeni Sakthi Kumar S. 

[Dave Lewis]

This is not really what I need to do.  The datasources between my grids are not exactly the same, so setting one datasource to the other one won't work.  As an explanation, I have a Category grid that can be edited and an Item grid that can also be edited.  The Items are children of the Category grid, so there is a many to one relationship.  In other words, deleting a Category will result in removing the associated Items in the other grid.  The Categories are also used as a foreign key on the Items grid.  Therefore, I need a way to refresh the datasource of the Items when the Categories are saved.  However, I don't want to refresh the page to have the ActionResult on the controller to rebuild the datasources.  Is there a way to refresh the datasources from the server without redrawing the page?

[Venkatesh Ayothi Raman]

Hi Dave, 

Thanks for the update. 

We suspect that do you want to use Relational binding (master-detail) Grid. We have rendered the Details Grid based on Master Grid. Please refer to the following Online Demo for more information, 

Demo:http://mvc.syncfusion.com/demos/web/grid/masterdetails 

Code example: 

ej-grid id="MasterGrid" allow-paging="true"  action-begin="actionBegin" action-complete="complete" row-selected="rowSelected" row-deselected="rowDeselected"> 

    <e-datamanager   json="@ViewBag.master" update-url="Home/NormalUpdate" insert-url="Home/NormalInsert" remove-url="Home/NormalDelete" adaptor="remoteSaveAdaptor" /> 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" show-delete-confirm-dialog="true" edit-mode="@(EditMode.Normal)"></e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings> 

    <e-columns> 

        

        <e-column field="Name" header-text="Name" width="80"></e-column> 

         

    </e-columns> 

</ej-grid> 

 

<ej-grid id="DetailGrid" allow-paging="true" databound="dataBound" action-begin="actionBegin" action-complete="complete" row-selected="rowSelected"  

    <e-datamanager json="@ViewBag.details" update-url="Home/NormalUpdate" insert-url="Home/NormalInsert" remove-url="Home/NormalDelete" adaptor="remoteSaveAdaptor" /> 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" show-delete-confirm-dialog="true" edit-mode="@(EditMode.Normal)"></e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings> 

     

</ej-grid> 

 

 

 

 

 

<script src="~/Scripts/jsondata.min.js"></script> 

    <script type="text/javascript"> 

        $(function () {            

            window.rowSelected = function (args) { 

                var employeeID = args.data.EmployeeID; 

                var detaildata = ej.DataManager(window.gridData).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeID, false).take(10)); 

                var gridObj = $("#DetailGrid").ejGrid("instance"); 

                gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5))); 

            } 

        }); 

 If we misunderstood your requirement, then could you please provide more details about your requirement? It would be helpful for us to find the problem and provide the better solution as earliest. 

Regards, 

Venkatesh Ayothiraman.