Grid + Partial View

[Thomaz Lima]

HI,

I have a Partial View and inside it a grid, but when I give a post in this partial view, the grid is not updated, how do I update the information?

[Venkatesh Ayothi Raman]

Hi Thomaz, 

Thanks for using Syncfusion products. 

We have analyzed the screenshot that you have shared with us. We could see that you have not enabled EditSettings in your code. We suggest you to enable the EditSettings of Grid to perform CRUD actions in the particular partial view Grid. Please refer the code example below, 

@(Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

                 { 

                     ... 

                 }).EditSettings(e => e.AllowAdding(true).AllowEditing(true).AllowDeleting(true)).Render()) 

Please refer the editing documentation link below, 

Documentation : https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit.html 

If we misunderstood your requirement, then we request you to share a brief explanation on how you are updating the partial view Grid. It would be helpful for us to analyze the issue and provide you the response as early as possible.  

Regards, 

Venkatesh Ayothiraman. 

[Thomaz Lima]

Hi Venkatesh,

Actually I'm developing a main page, where there were fields that when I click the add button, should generate a new row in a grid.

This grid is in a partial view, using a model that is updated via ajax.

The problem is that when I add some line the partial view does not reload the grid.

[Venkatesh Ayothi Raman]

Hi Thomaz, 

 

Thanks for using Syncfusion products. 

We have analyzed your query. We suggest you to refresh the Grid in partial view after adding a new record in it. Please refer the code example and the sample link below, 

[Index.cshtml] 

 

... 

<div id="main"> 

    @Html.EJS().Button("primarybtn").Content("Primary").IsPrimary(true).Render() 

</div> 

 

<script type="text/javascript"> 

    document.getElementById("primarybtn").addEventListener("click", function () { 

        //the values entered in the textboxes are assigned to details variable which will be stringified and passed to server. 

        var details = { OrderID: document.getElementById("ordcol").value, CustomerID: document.getElementById("custcol").value, ... } 

        var ajax = new ej.base.Ajax("/GridJ2/UrlInsert", 'POST', true);   //Post to update the values in partial view Grid 

        ajax.send(JSON.stringify(details)).then((value) => { 

           var grid = document.getElementById('GridJ2').ej2_instances[0];   //GridJ2 is the Grid id 

            grid.refresh();   //refresh the Grid in partial view 

        }); 

    }); 

</script> 

 

@{ 

    Html.RenderPartial("_GridFeaturesJ2"); 

} 

In the above code, when the button is clicked it will send an ajax post to the server with the values entered in the textboxes. Here, entered values added to the database in server side and added will be reflected grid by refresh the partial Grid by calling the refresh method in success function of AJAX post like above code example. 

 

Documentations :  

https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#refresh 

https://ej2.syncfusion.com/documentation/base/api-ajax.html?lang=es5 

 

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

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication7-622287943 

 

Please get back to us if you need further assistance. 

Regards, 

Venkatesh Ayothiraman.