How to load a grid with ajax

[Claudio Sebastian Anticoi Ojeda]

Basically what I want, is when you press a button to load the grid 

with ajax attached project if someone can help me.

Attachment: AjaxSyncFusion_d7e53bbb.rar

[Sathyanarayanamoorthy Eswararao]

Hi Claudio, 

Thanks for contacting Syncfusion support. 

According to your query you need to update the dataSource of the grid via ajax post in button click. We have achieved your requirement in the below example using dataSource method of Grid. 

Please refer the below documentation for details of dataSource method. 

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

Please refer the below code example. 

[index.cshtml] 

 

<button id="btn" onclick="update()">Update Datasource</button> 

 

<div> 

    @(Html.EJ().Grid<object>("FlatGrid") 

              .Datasource((IEnumerable<object>)ViewBag.datasource) 

              .AllowPaging() 

              .AllowSorting() 

.Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

    col.Field("CustomerID").HeaderText("CustomerID").Width(90).Add(); 

    col.Field("EmployeeID").HeaderText("EmployeeID").TextAlign(TextAlign.Right).Width(75).Add(); 

    col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add(); 

    

}) 

    ) 

</div> 

 

 

<script type="text/javascript"> 

    function update() { 

        $.ajax({ 

            type: "POST", 

            url: "/Home/Data", 

            datatype: "json", 

            contentType: "application/json; charset=utf-8", 

            success: function (result) { 

                $("#FlatGrid").ejGrid("dataSource", result); 

            }, 

            error: function (args) { 

                alert('error occurred'); 

            } 

        }); 

 

    } 

</script> 

[Controller.cs] 

namespace EJGrid.Controllers 

{ 

    public class HomeController : Controller 

    { 

 

 

        public ActionResult Index() 

        { 

            ViewBag.datasource = OrderRepository.GetAllRecords().Take(30).ToList(); 

            

            return View(); 

        } 

 

        public ActionResult Data() 

        { 

            var datasource = OrderRepository.GetAllRecords().ToList(); 

 

            return Json(datasource,JsonRequestBehavior.AllowGet); 

        } 

      

 

    } 

} 

We were not able to run the sample provided by you so we have prepared a sample with the same requirement which can be downloaded from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/137851/ze/Ajax_Datasource-1240958563.zip  

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy