CRUD operations not working when populating grid from button click

[Craig B]

Hello,

My grid has no datasource by default. I am populating my Grid control via a button click see below:

This works to populate the grid, but I when I try and add/update/delete rows, the grid is not firing any http requests therefore my CRUD Urls are never hit. Below is the markup for my grid control:

Can you help me allow my grid to perform CRUD operations while being assigned a datasource on button click?

Thank you,

Cr

[Rajapandi Ravi]

Hi Craig,

Greetings from Syncfusion support

From your query we could see that you are binding the data to the Grid after the button click using Ajax post, so you no need to define the DataSource and Adaptor initially in the Grid component definition. To achieve your requirement, we suggest you use the below way to achieve your requirement.

 

ajax.onSuccess = result => {

 

            // Grid instance

 

            var gridObj = document.getElementById('Grid').ej2_instances[0];

 

            console.log(ej.data.DataUtil.parse.parseJson(result));

 

  gridObj.dataSource = new ej.data.DataManager({

    json: result,

    adaptor: new ej.data.RemoteSaveAdaptor,

    insertUrl: '/Home/Insert', //set your CRUD actions URL here

    updateUrl: '/Home/Update',

    removeUrl: '/Home/Delete'

});

 

        }

 

If you still face the issue, please ensure that on ajax Success the result has proper data in JSON format or not. Share your issue scenario in video demonstration and share the screenshot of your result from the ajax success.

Regards,

Rajapandi R

[Craig B]

Hi Rajapandi,

Please accept my apologies as I forgot to reply to your response.

Reinstating the adaptor in the "onSuccess" callback fixed my issue. Thank you.

Kind regards,

Craig B

[Suganya Gopinath]

Hi Craig, 

Thanks for sharing the status of the issue and we are glad to know that the issues have been resolved. 

We are marking this ticket as solved. 

Regards,

Suganya Gopinath.