We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Refresh grid after ajax insert

  I have a requirement to use a custom button for inserting new data for the datagrid. 

There are several grids per page, named dynamically...for example:  grid39, grid40, grid41

For various reasons, I have to use an outside control for adding records via ajax.  In the result handler, I have to add the returned data to the dataSource and then refresh the data or better yet, just refresh the data.  Either one will work.  The ajax call is from a select's onChange event...here is the code:

function estimate_item_Onchange(id){
console.log("OK, estimate item selected.");
var estimate_item_id = $('#estimate_item' + id).val();
//hide select
$($('#estimate_item' + id)).hide();
//reset select options
let areaId = id;
let data = {estimateItemId: estimate_item_id, areaId: areaId};
//get the CSRF token
let csrfToken =$('[name = "_token"]').val();

url: '/assigned_estimate_items/post',
type: 'POST',
data: {_token: csrfToken, data: data},
dataType: 'JSON',
success: function (data) {
var area_id = data.data.areaId;
var record = data.data;
var gridname = 'grid' + area_id;
error: function (e) {
console.log('error message'.e);
I have tried several different avenues, but the error is always some version of:
2:1033 Uncaught TypeError: gridname.insert is not a function
    at Object.success (2:1033)
    at c (jquery-3.4.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
    at l (jquery-3.4.1.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)
Part of the problem might be that the grid name has to be 'built'...but I get the same error even with using 
the grid's name directly (which of course I can only do during development).

7 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 26, 2019 01:21 PM UTC

Hi Mark, 
We could see you would like to add the records to Grid dataSource. This can be done using the addRecord method of the Grid.  
Please make a note the editSettings.allowEditing and editSettings.allowAdding must be enabled to use the addRecord method. 
Seeni Sakthi Kumar S

MF Mark Fuqua November 26, 2019 01:45 PM UTC

Thanks.  addRecord works perfectly...but that leads to second problem listed above...I can't know the id of the grid...it is dynamic.  I can 'build' the name, as it is just grid plus the id.  To reiterate, this works fine:


This does not:

var gridname = 'grid' + area_id;


Is there a way to accomplish what I am trying to do?



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 26, 2019 02:18 PM UTC

Hi Mark. 
You can use the document.getElementById to get the Grid object and add the records.  
Instead of the ‘Grid’, you have to use your own Grid IDs. 
Seeni Sakthi Kumar S 

MF Mark Fuqua November 26, 2019 02:29 PM UTC

Forgive me for what may have morphed into a javascript question, but this is what I am trying:

document.getElementById('grid' + area_id).ej2_instances[0].addRecord(record);
This is the error message:
2:1034 Uncaught TypeError: Cannot read property 'ej2_instances' of null
Thanks for your help,

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 27, 2019 09:23 AM UTC

Hi Mark,  
We suspect that your are getting the ID for the Grid has incorrect. Please ensure to provide the correct id to the getElementByID method.  
Seeni Sakthi Kumar S 

MF Mark Fuqua November 27, 2019 01:05 PM UTC

No problem...solved by looping over javascript  in view template...

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 28, 2019 05:53 AM UTC

Hi Mark,  
We are happy to hear that your requirement has been acheived and you are good to go. Please get back to us, if you need further assistance on this.

Seeni Sakthi Kumar S 

Live Chat Icon For mobile
Up arrow icon