Refresh grid after ajax insert

[Mark Fuqua]

  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]

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.  

 

https://ej2.syncfusion.com/documentation/api/grid/#addrecord 

 

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]

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]

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]

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]

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]

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

[Seeni Sakthi Kumar Seeni Raj]

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