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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Refresh Grid Data

Thread ID:

Created:

Updated:

Platform:

Replies:

132131 Aug 15,2017 10:50 PM UTC Aug 17,2017 04:30 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Fillipe Barbosa
Asked On August 15, 2017 10:50 PM UTC

Hi,

I have a external form that update database, after the insert action, I wanna refresh the grid data, how can I do.

Obs.: Grid is on a partialview.

I'm trying this:

function Teste()
    {
        var grid1 = $("#grid").ejGrid("instance");
        grid1.sendRefreshRequest();
    }

Here is my grid code:

 @(Html.EJ().Grid<object>("grid")
            .Datasource(ds => ds.URL("LoadGrid").Adaptor(AdaptorType.UrlAdaptor))
            .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Search); }); })
            .AllowSorting()
            .AllowFiltering()
            .EnableHeaderHover()
            .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
            .AllowGrouping()
            .GroupSettings(group => { group.ShowToggleButton(true); })
            .AllowPaging()
            .PageSettings(pag => { pag.PageSize(20); })
            .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.ExcelExport);
                items.AddTool(ToolBarItems.PdfExport);
            }))
            .Columns(col =>
            {
                col.Field("codigo_perfil").Visible(true).HeaderText("Código Perfil").IsIdentity(true).IsPrimaryKey(true).TextAlign(TextAlign.Right).Priority(2).Add();
                col.Field("descricao").HeaderText("Descrição").Priority(1).Add();
                col.Field("ativo").HeaderText("Ativo").EditType(EditingType.Boolean).TextAlign(TextAlign.Center).Priority(2).Add();
                col.Field("tipo").HeaderText("Tipo").Priority(3).Add();
                col.Field("acesso").HeaderText("Acesso").Priority(3).Add();
            })
            .ClientSideEvents(e => e.RecordDoubleClick("recordDoubleClick")
                )
                )

Thank you.



Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On August 16, 2017 05:06 PM UTC

Hi Fillipe, 

Thanks for contacting Syncfusion Support. 

While you are using URL Adaptor with Editing enabled,  you can add new record into database by using external button with “addRecord” Method. This “addRecord” method will automatically refresh the grid with newly added record into dataSource.  
 
Please refer to the code example:- 

<input type="button" value="Addrecord" onclick="myFunction()" /> 
 
@(Html.EJ().Grid<object>("Grid") 
                           .Datasource(ds => ds.URL("/Grid/DataSource").Adaptor(AdaptorType.UrlAdaptor)) 
                           .AllowPaging() 
            .PageSettings(page => page.PageSize(5)) 
            .EditSettings(edit => 
            { 
                edit.AllowAdding();//enebled adding 
                edit.AllowDeleting();//enabled deleting 
                edit.AllowEditing();//enabled editing 
                 
            }) 
            
            .Columns(col => 
            { 
                col.Field("OrderID").IsPrimaryKey(true).Add(); 
                col.Field("CustomerID").HeaderText("CustomerID").TextAlign(TextAlign.Left).Add(); 
                col.Field("ShipCountry").HeaderText("Ship Country").TextAlign(TextAlign.Left).Add(); 
                col.Field("EmployeeID").HeaderText("Employee ID").Add(); 
                        })  
     ) 

<script type="text/javascript"> 
    var gridObj = $("#Grid").data("ejGrid"); 
        // Sends an add new record request to the grid 
    gridObj.addRecord({"OrderID":12333}); 

</script> 
 

Please refer the below API link for addRecord method:- 


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

Regards, 

Farveen sulthana T. 


Fillipe Barbosa
Replied On August 16, 2017 11:45 PM UTC

Hi,


I didn't understand. I wanna reload datasource, how can I do that, now I'm using the function on next, but the grid clear data em show no records.

$.ajax({
            type: "POST",
            url: '@Url.Action("LoadGrid", "Perfil")',
            data: { "requiresCounts": true, "skip": 0, "take": 20, "params": {} },
            dataType: "json",
            success: function (result) {
                var gridObj = $("#grid").data("ejGrid");
                gridObj.dataSource(result);
            },
            error: function (result) {
                alert("Erro");
            }
        });

Thanks.


Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On August 17, 2017 04:30 PM UTC

Hi Fillipe, 

The solution provided in the previous update by using “addRecord” method could resolve your problem. When you update the records externally , “addRecord” methods will insert the record into the database as well as it will automatically refresh the dataSource

Otherwise in the case of using UrlAdaptor,  you can update datasource manually by using Ajax post as per your code example.  In this, you can add the new record into database by sending Ajax Post to the server side. In server side, you can add records  and resend the data to ajax success event. Then  in Ajax success,  you have to refresh the Grid’s dataSource by using dataSource method as like given below code example. 

@(Html.EJ().Grid<object>("Grid") 
             .Datasource(ds => ds.URL("/Grid/DataSource").Adaptor(AdaptorType.UrlAdaptor)) 
            .AllowPaging() 
            .Columns(col => 
            { 
                .  .   
                        })  
     ) 

<script type="text/javascript"> 
 
function myFunction() { 
       var myKeyVals = { OrderID : 1, CustomerID : "FS",  ShipCountry : "Canada", EmployeeID : 1 } 
          $.ajax({ 
            url: "/Home/Insert", 
            type: "POST", 
            contentType: "application/json", 
            data: JSON.stringify({ value: myKeyVals }), 
            success: function (data) { 
                    var dataManager = ej.DataManager({ 
                       url : "/Home/DataSource", 
                       adaptor : "UrlAdaptor"                
                }) 
                $("#Grid").ejGrid("dataSource", dataManager); 
                alert("Save Complete" 
            }, 
            error: function (xhr) { 
                alert('error'); 
            } 
        }); 
} 
 
</script> 
 


After following the above solutions, still you are facing the same problem, could you please share us the following details to find the cause of the issue. 

1. Complete Grid code example(both in server and client side). 

2. If possible, provide an issue reproducing sample or hosted link. 

3. Screenshot/Video regarding the issue. 

The provided information will help us to analyze and provide you the solution as early as possible. 
 
Regards, 
 
Farveen sulthana T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;