DataSource not updating after custom AJAX call.

[Nithin Bodla]

I am following EJS2 ASP.NET core documentation and its really confusing to follow any of your documentation and time consuming

Trying to update grid data after making my custom ajax call.

<ejs-grid id="Grid" >

                <e-grid-columns>

                    <e-grid-column field="FirstName" headerText="Patient Name" template="#patientNameTemplate"></e-grid-column>

                    <e-grid-column field="PatientID" headerText="Card ID"></e-grid-column>

                    <e-grid-column field="DOB" headerText="Date Of Birth"></e-grid-column>

                    <e-grid-column field="Gender" headerText="Gender"></e-grid-column>

                    <e-grid-column field="LocationName" headerText="Location Name"></e-grid-column>

                    <e-grid-column field="HomePhone" headerText="Home Phone"></e-grid-column>

                    <e-grid-column field="CellPhone" headerText="Cell Phone"></e-grid-column>

                </e-grid-columns>

 </ejs-grid>

<script>

      $.ajax({

                type: "POST",

                url: "/patient/patientsearchresult",

                contentType: "application/json",

                data: JSON.stringify(patientSearchRequest),

                success: function (response) {

                    console.log("response", response);

                    var grid = document.getElementById("Grid").ej2_instances[0];

                    

                    

                    $("#StartSearch").hide();

                    $("#Griddiv").show();

                    grid.dataSource = response;                                        

                    grid.refresh();

      });

</script>

[Pavithra Subramaniyam]

Hi Nithin, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query and We have tried to reproduce the issue at our end but it is unsuccessful. We have prepared a simple sample based on your code example in which we have make an ajax request in the button click event and its success function we have assigned the dataSource property for the Grid component. Please refer to the below code example and sample link. 

 

[index.cshtml] 

 

<button id="StartSearch" onclick="myFunction()">Click me</button> 

<div id="Griddiv" style="display:none"> 

<ejs-grid id="Grid" > 

    <e-grid-columns> 

      .  .  . 

    </e-grid-columns> 

</ejs-grid> 

    </div> 

<script> 

    function myFunction() { 

        var patientSearchRequest = { requiresCount: false } 

        $.ajax({ 

            type: "POST", 

            url: "/Home/GetData", 

            contentType: "application/json", 

            data: JSON.stringify(patientSearchRequest), 

            success: function (response) { 

                console.log("response", response); 

                var grid = document.getElementById("Grid").ej2_instances[0]; 

                $("#StartSearch").hide(); 

                $("#Griddiv").show(); 

                grid.dataSource = response; 

                grid.refresh(); 

            } 

        }); 

    } 

 

    </script> 

 

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

 

If you are still facing the issue could you please provide the below details that will be helpful for us to provide a better solution as early as possible. 

 

1. Share your Essential JavaScript 2 version
2. Share the stack trace if you have faced any script errors
3. Please reproduce the issue in the above sample if possible

 

Regards, 

Pavithra S.