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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Refresh grid after ajax insert

Thread ID:

Created:

Updated:

Platform:

Replies:

149440 Nov 26,2019 12:53 PM UTC Nov 28,2019 05:53 AM UTC JavaScript - EJ 2 7
loading
Tags: Grid
Mark Fuqua
Asked On November 26, 2019 12:53 PM UTC

  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();
console.log(estimate_item_id);
//hide select
$($('#estimate_item' + id)).hide();
//reset select options
$('#estimate_item').val("");
let areaId = id;
console.log(areaId)
let data = {estimateItemId: estimate_item_id, areaId: areaId};
//get the CSRF token
let csrfToken =$('[name = "_token"]').val();

$.ajax({
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;
console.log(grid39);
console.log(grid39.dataSource);
console.log(gridname);
console.log(gridname.dataSource);
gridname.insert(record);
},
error: function (e) {
console.log('error message'.e);
}
});
}
So
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).

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 
 
Regards,  
Seeni Sakthi Kumar S

Mark Fuqua
Replied On 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:

grid39.addRecord(data);

This does not:

var gridname = 'grid' + area_id;

gridname.addRecord();

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

Thanks,

Mark

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 
 
Regards,  
Seeni Sakthi Kumar S 


Mark Fuqua
Replied On 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,
Mark



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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.  
 
Regards,  
Seeni Sakthi Kumar S 


Mark Fuqua
Replied On November 27, 2019 01:05 PM UTC

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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.

Regards, 
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon