Cascading fields and hidden fields

Question

Hello, I'm trying cascading fields with grid editing.

It was really helpful example which 'Cascading dropdown list with grid editing.'

By the way, I want to edit hidden field refer to the example. however, manipulating lots of fields via that example is too lazy and complicated.

(Even also using `editTemplate`, too.)


              field="cmdtyCd" headerText="품목" width="200"
                        :allowEditing="false" :edit="cmdtyDropdown">
              field="ordStndrd" headerText="규격" width="100"
                        :allowEditing="false" :edit="stndrdInput">
              field="cmdtyOrdQty" headerText="주문수량" width="140"
                        :edit="cmdtyOrdQtyInput">
              field="ordUnitNm" headerText="구매단위" width="100"
                        :allowEditing="false" :edit="ordUnitInput">
              field="ordUnitCd" headerText="구매단위" width="100"
                        :allowEditing="false" :hidden="true" :edit="ordUnitCdInput">
              field="ordqtyPerUnit" headerText="입수수량" width="100"
                        :allowEditing="false" :edit="ordqtyPerUnitInput">
              field="ordTotQty" headerText="총수량" width="100"
                        :allowEditing="false" :edit="ordTotQtyInput">
              field="invUnitNm" headerText="단위" width="100"
                        :allowEditing="false" :edit="invUnitInput">
              field="buyPrice" headerText="단가" width="100"
                        :allowEditing="false" :edit="buyPriceInput">
              
              field="cmdtySplAmt" headerText="공급가액" width="100"
                        :allowEditing="false" :edit="cmdtySplAmtInput">
              
              field="cmdtyVatAmt" headerText="부가세" width="100"
                        :allowEditing="false" :edit="cmdtyTxInput">
              
              field="cmdtyOrdAmt" headerText="주문금액" width="100"
                        :allowEditing="false" :edit="cmdtyOrdAmtInput">
              field="taxSeNm" headerText="과세구분" width="100"
                        :allowEditing="false">

              field="boMemo" headerText="비고" width="100">


let cmdtyDdElem, cmdtyDdObj
export const cmdtyDropdown = {
  create: () => {
    cmdtyDdElem = document.createElement('input')
    return cmdtyDdElem
  },
  read: () => {
    console.log('read', cmdtyDdObj)
    return cmdtyDdObj.value
  },
  destroy: () => {
    cmdtyDdObj.destroy()
  },
  write: (args) => {
    console.log('write', args)
    cmdtyDdObj = new DropDownList({
      dataSource: store.getters.ordPsbCommodities,
      fields: {
        text: 'cmdtyNm',
        value: 'cmdtyCd'
      },
      popupWidth: 400,
      value: args.rowData.cmdtyCode || null,
      itemTemplate: '[${cmdtyCd}] ${cmdtyNm}',
      // valueTemplate: '${cmdtyNm}',
      enabled: args.rowData.cmdtyCd ? false : true,
      change: () => {
        console.log('itemData', cmdtyDdObj.itemData)

          // I tried to set value by this way. 
        stndrdInput.setValue(cmdtyDdObj.itemData)
        ordUnitInput.setValue(cmdtyDdObj.itemData)
        ordqtyPerUnitInput.setValue(cmdtyDdObj.itemData)
        invUnitInput.setValue(cmdtyDdObj.itemData)
        buyPriceInput.setValue(cmdtyDdObj.itemData)

        cmdtyOrdQtyInput.activate(cmdtyDdObj.itemData)
        // cmdtyCdInput.setCmdtyCd(cmdtyDdObj.itemData)
      }
    }, cmdtyDdElem)
  }
}

Here's my columns and dropdown edit object.

If the `cmdtyCd` field changed via dropdown list, I want to update other fields, so I used the exmaple.

When the field is changed, is there an easier way to edit for fields and hidden fields?

Regards.

Sujith Kumar Rajkumar · Answer

Hi Minkyu, 
 
Greetings from Syncfusion support. 
 
We are glad to hear that you found the documentation related to cascading dropdown list helpful. 
 
We checked your query and from that could understand that your requirement is to update the value for visible and hidden fields based on a particular cell value(In your case cascading drop down list). For the visible fields(In the edit form) case, the approach you mentioned would be the proper way to update the new values in the edit fields as the changes need to displayed there on drop down change. 
 
For updating the hidden fields based on a particular cell value, you can achieve this by updating these values in the Grid’s actionBegin event. This event can be accessed on saving the edit values with request type as ‘save’, where the entire edited row’s data(Both visible and hidden) will be returned in the arguments. So here you can modify the needed column data(based on your condition) as per your requirement. This is demonstrated in the below code snippet, 
 




// Grid’s actionBegin event handler 
function actionBegin(args) { 
        if (args.requestType === "save") { 
            // Here you can get the entire row data in ‘args.data’ 
            // So you can modify the values as per your requirement 
            args.data.CustomerID = "New_Value" 
        } 
} 
 
API links: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 
                  https://ej2.syncfusion.com/vue/documentation/api/grid/addEventArgs/ 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Minkyu · Answer

Hi, Sujith Kumar Rajkumar.Sorry for check this late.Actually, I want to announce related data to user, for example, if user selected commodity in 'cmdtyCd' fields, then we need to show 'ordUnitNm' which is commodity's unit.Properly, my requirement was, real-time rendering.So I used 'Cascading' example. Would you answer again about this? Is there easier way than that examples?Regards.

Sujith Kumar Rajkumar · Answer

Hi Minkyu, 
 
We checked your query and based on that suspect your requirement is to update the edit form element values(Both editable and non-editable fields) without directly accessing the defined element from template. If so you can achieve this by retrieving these elements in the form object instance from the Grid edit module on which you can use a forEach loop to access each element and set value from a predefined array data(As per your requirement). This operation is demonstrated in the below code snippet and it can be performed in the cascading dropdown’s change event handler, 
 




// Grid instance 
var gridObj = this.$refs.gridObj.ej2_instances[0]; 
// Pre-defined data to be set 
var defaultVal = { "OrderID": 123, "CustomerID": "Avs", "Freight": 20 }; 
// Edit form elements are accessed and their values are updated by accessing the pre-defined data based on element name 
[...gridObj.editModule.formObj.element.elements].forEach(function (ele, index) { ele.value = defaultVal[ele.name] }) 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R