Update columns in grid based on another column's edited value when using customTemplate

Question

Hi Team,In grid component, I am using custom template for a column where I have ejs-autocomplete component in it. On change of value in autocomplete input, we need to change values of columns depending on it and also I need to update whole row's data.so I want to update few/all columns of the row in grid based on value change in custom-template.GRID

data propertiesdataGrid: [],pageSettings: { pageSize: 5 }, toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ColumnChooser'], selectionOptions: { type: 'Single', mode: 'Row' }, editSettings: { allowEditing: true, allowAdding: true },Custom_Template- In methodsitemCodeTemplate: function() { // To access component data return { template: Vue.component('itemcodeTemplate', { template: ``, data() { return { data: {}, itemCodeOptions: [], productMaster: [], itemAddObj: {} } }, methods: { getProducts(searchText) { console.log(searchText, 'autocomplete') if (!searchText.isInteracted) { return } this.itemCodeOptions = [] const client = api() client .get('/products') .then(response => { if (response.data.ProductMaster && response.data.ProductMaster.length > 0) { this.itemCodeOptions = response.data.ProductMaster } }) .catch(error => { console.error(error, 'Unable to search products!') }) }, changeSelectedProduct(event) { if (!event.isInteracted) { return } if (event.itemData && event.itemData.id) { let selectedItem = this.productMaster.find(item => item.ItemNumber === event.itemData.id) const client = api() client .get('/products', { params: { ItemNumber: selectedItem.ItemNumber } }) .then(response => { if (response.data) { this.itemAddObj.ItemNumber = event.itemData.id // set selected value this.itemAddObj.ItemCode = event.itemData.text // set selected value // NEED TO UPDATE ALL COLUMNS IN ROW HERE } }) .catch(error => { console.error(error, 'Unable to get product MRP details') }) } else { this.itemAddObj = {} } } } }) } }I have screen recording gif, where on selection of "Item Code", all columns in the row are updated.Thanks & Regards,Sandeep G Attachment: customtemplate_with_autocomplete_in_column_grid_a789f70b.zip

Sujith Kumar Rajkumar · Answer

Hi Sandeep, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to update other column values when auto complete edit column value changes in Grid edit. You can achieve this in the auto complete change event by retrieving the required edit input element from the Grid edit module’s form object and updating its value as demonstrated in the below code snippet, 
 





// Edit auto complete’s change event handler 
onChange(args) { 
    if (args.value === "Argentina") { 
        // Since the edit template creates a separate component instance, the Grid instance needs to be accessed from the root as shown below 
        var gridInst = this.$root.$children[0].$refs.grid.ej2Instances; 
        // The edit control id will be set as ‘Grid ID’ + ‘Column field name’ using which it can be accessed 
        // Here the ‘CustomerID’ column’s edit input is retrieved 
        var customerIDEle = gridInst.editModule.formObj.element.querySelector('#' + gridInst.element.id + 'CustomerID'); 
        // The ‘CustomerID’ edit input value is modified 
        customerIDEle.value = 'VICTE'; 
    } 
}  
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/168981/ze/GridEditTemplate334975380 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Sandeep G · Answer

Hi Sujith,when trying to get grid's instance using var gridInst = this.$root.$children[0].$refs.grid.ej2Instances; its throwing below errorError in console package.json "dependencies": { "@syncfusion/ej2-vue-calendars": "^19.2.62", "@syncfusion/ej2-vue-dropdowns": "*", "@syncfusion/ej2-vue-grids": "*", "@syncfusion/ej2-vue-treegrid": "^19.1.67", "axios": "^0.21.1", "bootstrap": "4.5.3", "bootstrap-vue": "^2.21.2", "core-js": "^3.6.5", "font-awesome": "^4.7.0", "moment": "^2.29.1", "vue": "^2.6.12", "vue-autosuggest": "^2.2.0", "vue-good-table": "^2.21.10", "vue-i18n": "^8.24.4", "vue-loading-overlay": "^4.0.2", "vue-router": "^3.5.1", "vuex": "^3.6.2" },component.vueRegards,Sandeep G

Sujith Kumar Rajkumar · Answer

Hi Sandeep, 
 
We would like to let you know that the support for accessing root instance in the Grid template component was provided in our latest packages and since you have used different package versions for the Syncfusion components(from the shared package.json code) we suspect that older dependent or duplicate packages could have been installed in your application causing the problem. So please follow the steps provided below to remove duplicated packages(if any) and update to the latest packages, 
 

Delete package.lock.json file from your application.   
Remove the @syncfusion package folder from the node_modules.
Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.   
Then install the NPM packages.
 
Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 
 
If problem still persists then please share us the following information to validate further on this, 
 

Share us console screenshot image of the properties returned when accessing ‘this.$root’ and ‘this.$root.children’ from the auto complete’s change event.
If possible share us a simple sample to replicate the problem or try reproducing it in the previously shared sample. It would be helpful to identify your exact problem case and provide the solution based on that
 
Regards, 
Sujith R

Sandeep G · Answer

Hi Sujith,I have tried with solution but issue still exits. I'm adding screenshots of consoles for referencepackage.json - existing project{  "name": "fuji",  "version": "0.1.0",  "private": true,  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "lint": "vue-cli-service lint"  },  "dependencies": {    "@syncfusion/ej2-vue-calendars": "*",    "@syncfusion/ej2-vue-dropdowns": "*",    "@syncfusion/ej2-vue-grids": "*",    "@syncfusion/ej2-vue-treegrid": "*",    "axios": "^0.21.1",    "bootstrap": "4.5.3",    "bootstrap-vue": "^2.21.2",    "core-js": "^3.6.5",    "font-awesome": "^4.7.0",    "moment": "^2.29.1",    "vue": "^2.6.12",    "vue-autosuggest": "^2.2.0",    "vue-good-table": "^2.21.10",    "vue-i18n": "^8.24.4",    "vue-loading-overlay": "^4.0.2",    "vue-router": "^3.5.1",    "vuex": "^3.6.2"  },  "devDependencies": {    "@vue/cli-plugin-babel": "~4.5.0",    "@vue/cli-plugin-eslint": "~4.5.0",    "@vue/cli-service": "~4.5.0",    "babel-eslint": "^10.1.0",    "eslint": "^6.7.2",    "eslint-plugin-vue": "^6.2.2",    "vue-template-compiler": "^2.6.11"  },  "eslintConfig": {    "root": true,    "env": {      "node": true    },    "extends": [      "plugin:vue/essential",      "eslint:recommended"    ],    "parserOptions": {      "parser": "babel-eslint"    },    "rules": {}  },  "browserslist": [    "> 1%",    "last 2 versions",    "not dead"  ]}this.$rootthis.$root.$childrenI have also tried replicating the same issue in sample project(I have commented few lines in datasource.js to avoid few errors). Its throwing different error. I am also adding project here.Please let me know how to get grid's instance to update columns dataThanks,Sandeep GAttachment: ejsgridcolumnupdate_32aed359.zip

Sujith Kumar Rajkumar · Answer

Hi Sandeep, 
 
The modified sample you shared had template compilation issues and on resolving them we checked the problem but could not reproduce it from our end. This is because in this sample the parent root instance’s child was the vue component which had the Grid and so we were able to access instance there as shown in the below image, 
 
  
 
We suspect that your problem might be occurring because the vue component in your application where the Grid is rendered does not have the root component as its immediate parent. And in this case you would have to identify the vue component with Grid from the root and access the component instance from there. So can you please share us your vue application structure(Main root component to vue component which has Grid) to validate this case further based on your exact project structure. Also if possible please implement your application structure in the below updated sample and share it to us, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/168981/ze/GridUpdated2085214435 
 
Regards, 
Sujith R

Sandeep G · Answer

Hi Sujith,Thanks for your reply. It helped me to get grid's instance by identifying vue component from the "$root " and able to update fields. I also need to update hidden columns based on another edited column.when trying to get form object using below method, I am unable to get hidden column elementsgridInst.editModule.formObj.element.querySelector( Unable to get and update hidden columns Thanks,Sandeep G

Sujith Kumar Rajkumar · Answer

Hi Sandeep, 
 
You’re welcome. We are glad to hear that your previous query has been resolved. 
 
As for this query – “I also need to update hidden columns based on another edited column”, we would like to let you know that the hidden column will not be rendered in the edit form. So you can update this column value(based on other column values) in the Grid’s actionBegin event as demonstrated in the below code snippet, 
 




// Grid’s actionBegin event handler 
actionBegin: function(args) { 
    // Check if event is triggered for save action 
    if (args.requestType === 'save') { 
        var newVal = args.data["Freight"] * 10; 
        // Here the new value can be updated to the hidden column field 
        args.data["Total"] = newVal; 
    } 
} 
  
API: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Sandeep G · Answer

Hi Sujith,Thanks for your reply, let me explain our requirement.We need to have a autocomplete dropdown, where user will search and select item, and response of the autocomplete item contain data for the rest of the visible columns and hidden columns. So we can not update hidden columns on actionBegin (eventHandler) as it works only when user saves the grid.I am supposed to update hidden columns when user changes value in one of the visible column. How can we achieve this?

Can we call actionBegin event inside a custom template and update hidden columns?

Regards,Sandeep G

Sujith Kumar Rajkumar · Answer

Hi Sandeep, 
 
As mentioned in our previous update, since the hidden columns are not rendered in Grid edit form the hidden column values have to be updated in the Grid’s actionBegin event when the ‘save’ action is getting performed. However for your case, you can achieve the requirement by storing the hidden columns values returned in the auto complete selected data response in a global variable and then access this variable to update the column values in the actionBegin event as demonstrated in the below code snippet, 
 




// Auto complete change event  
onChange: function(args) {  
                     ... 
        // Here the response data is stored in a global variable 
        this.updatedData = resData; 
    }  
}, 
// Grid’s actionBegin event handler  
actionBegin: function(args) {  
    // Check if event is triggered for save action  
    if (args.requestType === 'save') {  
        // Here the updated response data stored is the global variable is retrieved  
        var newData = this.updatedData; 
        // The hidden column fields can now be updated with this data 
        args.data["PriceRet"] = newData["PriceRet"];  
        args.data["Discount"] = newData["Discount"];  
    }  
}  
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Sandeep G · Answer

Hi Sujith,Thanks for your reply. When I try to update value of a column which has custom template, value is getting updated but after saving it we are not able to see updated value in grid. I am adding a sample where freight column has custom template.How to update/save column's value which is having custom template in grid?Attachment: gridUpdated_c4192b42.zip

Sujith Kumar Rajkumar · Answer

Hi Sandeep, 
 
We checked the shared sample and would like to inform you that the problem was occurring because the ‘Freight’ columns’s edit component name was not properly provided. The updated cell values will be retrieved from the Grid edit form based on its component name which matches with the Grid’s data field name. The default rendered edit control elements will have the column field as its name. Now since you are rendering input element as a custom edit control using edit template, you need to set the corresponding column field name as the edit control’s “name” in order for it to be fetched and updated in Grid on save. 
 
We have modified the shared sample based on this for your reference. You can find it below, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/168981/ze/GridModified1661458111 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R