1. Home
  2. Forum
  3. Vue
  4. Questions regarding Grid BatchUpdate

Questions regarding Grid BatchUpdate

I am using the Grid control in my Vue.js application and I had a couple of questions. 
a. My grid is bound to a array, in this case, how can I show each array element in the grid column?
b. What event is fired when the update button is clicked? In the event can I get a list of all the items that were added, updated and deleted?

Please help.

https://ej2.syncfusion.com/vue/documentation/grid/edit/#batch

<template>
<ejs-grid :dataSource="vocabularies" :editSettings='editSettings' :toolbar='toolbar' height='273px'>
                <!--<e-columns>
                    <e-column field='CustomerID' headerText='Vocabulary' width=120></e-column>
                </e-columns>-->
            </ejs-grid>
</template>

<script>
export default
{
    data() {
        return {
            vocabularies: ['Ajit', 'Meetha],
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
        }
    },
    methods: 
    {
        async Update() 
        {
            try 
            {
                //update backend based on created, updated, deleted records.
            } 
            catch (error) 
            {
                
            };
        },
    },
}
</script>



3 Replies
RS Rajapandiyan Settu Syncfusion Team May 4, 2020 01:11 PM UTC

Hi ajit, 

Greetings from syncfusion support. 
 
Query : What event is fired when the update button is clicked? In the event can I get a list of all the items that were added, updated and deleted? 
 
While having batch edit mode in grid, calling endEdit method or clicking update button in the toolbar triggers two events in the grid beforeBatchSave and actionComplete with request type as batchsave. 
 
beforeBatchSave event gets triggered before the save action occurred in the grid. In that event you can get all the currently added, deleted and edited records in the grid as arguments.

Then the actionComplete event gets triggered after the edited records updated in the grid. 
 
Please refer the below code example and sample for more information. 
 

methods: { 
    beforeBatchSave: function(args) { 
      console.log(args); 
// get currently batch added, deleted and edited records in the grid 
      console.log(args.batchChanges);    }, 
    actionComplete: function(args) { 
      if (args.requestType === "batchsave") { 
        console.log(args); 
      } 
    } 
  } 


 
                 
Query : My grid is bound to a array, in this case, how can I show each array element in the grid column? 
 
we are unable to understand your requirement. So please share the below details to validate further on this. 
 
  1. Explain your requirement in detail
  2. Did you have complex array of data in the grid dataSource and you want to bind it as column model in grid or not?

Regards, 
Rajapandiyan S 


AG ajit goel May 4, 2020 01:23 PM UTC

Hello Rajapandiyan, 
I had added the code sample in my question previously. The array bound to the grid consists of just array elements. In this case how would I declare the "e-column"? Please see code below. 

vocabularies: ['Ajit', 'Meetha],
<ejs-grid :dataSource="vocabularies" 

Full Code:

<template>
<ejs-grid :dataSource="vocabularies" :editSettings='editSettings' :toolbar='toolbar' height='273px'>
                <!--<e-columns>
                    <e-column field='CustomerID' headerText='Vocabulary' width=120></e-column>
                </e-columns>-->
            </ejs-grid>
</template>

<script>
export default
{
    data() {
        return {
            vocabularies: ['Ajit', 'Meetha],
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
        }
    },
    methods: 
    {
        async Update() 
        {
            try 
            {
                //update backend based on created, updated, deleted records.
            } 
            catch (error) 
            {
                
            };
        },
    },
}
</script>





RS Rajapandiyan Settu Syncfusion Team May 5, 2020 04:08 AM UTC

Hi ajit, 

Thanks for your update. 
 
Query : I had added the code sample in my question previously. The array bound to the grid consists of just array elements. In this case how would I declare the "e-column"? 

At Syncfusion, the EJ2 Grid supports JSON Object only. Since this is the default behavior of grid. Please refer the below documentation for data binding in the grid. 


Please get back to us if you need further assistance on this. 

Regards, 
Rajapandiyan S 


Loader.
Up arrow icon