Refresh Grid Data

[Fillipe Barbosa]

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]

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:- 

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

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

Regards, 

Farveen sulthana T. 

[Fillipe Barbosa]

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]

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