Get value from editor

[ThreeGo]

I saw this demo.

https://ej2.syncfusion.com/vue/documentation/grid/editing/template-editing#get-value-from-editor

    const actionBegin = (args) => {

        if (args.requestType === 'save') {

            // cast string to integer value.

            args.data.Freight = parseFloat(args.form.querySelector('#Freight').ej2_instances[0] .value);

        }

    }

How can I implement the same functionality in batch mode? (Before BatchSave, of course)

[Aishwarya Rameshbabu]

Hi ThreeGo,

Greetings from Syncfusion support.

From the provided code snippets and the documentation link, we understand that you wanted to format the edited value before saving it in the Grid during the batch mode editing. To accomplish this, you can utilize cellSave event of the Grid. We have developed a sample that demonstrates this process by formatting the value of the 'Freight' column in the cellSave event. Please refer to the sample and code example below.

App.vue

        <ejs-grid ref="grid" :dataSource="data" :allowPaging='true' :pageSettings="pageSettings" :allowFiltering='true' :filterSettings="filterSettings"

    :editSettings='editOptions' :toolbar='toolbarItems' :allowSorting='true' :cellSave='cellSave'> 

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' :validationRules='orderidrules' :isPrimaryKey='true'></e-column>

                <e-column field='CustomerID' headerText='Customer Name' width='150' :validationRules='customeridrules'

                foreignKeyValue='ContactName' foreignKeyField='CustomerID' :dataSource='customerData'></e-column>

                <e-column field='Freight' headerText='Freight' width='150' textAlign='Right'></e-column>

                <e-column field='ShipName' headerText='Ship Name' width='170'></e-column>

                <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>

            </e-columns>

        </ejs-grid>

 

 

  methods: {

    cellSave: function (args: any) {

      if (args.column.field === 'Freight') {

          args.value = parseFloat(args.value);

      }

    },

  },

 

Sample: https://stackblitz.com/edit/kwqxnl-qqrjfu?file=src%2FApp.vue,public%2Findex.html

API Reference: cellSave

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R                                                                                                                                                                            

[ThreeGo]

My question is how can I get the form control value in batch mode if I use edit template.

In batch mode, I can't get the changed value in the control by using args.value of cellSave event, right?

[Aishwarya Rameshbabu]

Hi ThreeGo,

Based on the provided information, it seems that you wanted to utilize editSettings.template with batch mode editing within the Syncfusion Grid. By default, the Syncfusion Grid supports template editing for both Normal and Dialog modes of editSettings. In batch mode, the Grid keeps cells in an editable state until the changes are saved, allowing for the simultaneous editing of multiple rows. However, implementing custom templates for each editable cell may lead to performance issues, particularly when handling large datasets. For more detailed information, please refer to the documentation link.

Documentation Link: Template-editing

Regards

Aishwarya R