Add record having child - problem

[Minkyu]

Hello, I stuck in a problem while adding record having child.

I wanted to add record using addRecord method like below.

this.$refs.orders.ej2Instances.addRecord(items, 0)

However, nothing happened.

So I tried another method. Add item with unshift then record added successfully.

BUT.

As you can see, I added item coded '100100' to left treegrid from right, but children was not displayed.

and I clicked 'expand' button, error occured.

Uncaught TypeError: Cannot read property 'parentItem' of undefined

    at TreeGrid.push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.localExpand (chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3615)

    at TreeGrid.push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.expandCollapse (chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3495)

    at Observer. (chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3309)

    at Observer.push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-base_src_m.js:736)

    at TreeGrid.push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-base/src/base.js.Base.trigger (chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_i.js:1276)

    at VueComponent.push../node_modules/@syncfusion/ej2-vue-treegrid/src/treegrid/treegrid.component.js.TreeGridComponent.trigger ([email protected]:676)

    at TreeGrid.push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.collapseRow (chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3307)

    at TreeGrid.push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.expandCollapseRequest (chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3259)

    at TreeGrid.push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.mouseClickHandler (chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:2669)

push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.localExpand @ chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3615

push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.expandCollapse @ chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3495

(anonymous) @ chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3309

push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify @ chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-base_src_m.js:736

push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-base/src/base.js.Base.trigger @ chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_i.js:1276

push../node_modules/@syncfusion/ej2-vue-treegrid/src/treegrid/treegrid.component.js.TreeGridComponent.trigger @ [email protected]:676

push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.collapseRow @ chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3307

push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.expandCollapseRequest @ chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:3259

push../node_modules/@syncfusion/ej2-vue-treegrid/node_modules/@syncfusion/ej2-treegrid/src/treegrid/base/treegrid.js.TreeGrid.mouseClickHandler @ chunk-vendors~._node_modules_@syncfusion_ej2-vue-treegrid_node_modules_@syncfusion_ej2-treegrid_src_~e2257953.js:2669

My treegrid declared like this.

<ejs-treegrid height="300" ref="orders" :dataSource="commodities" :editSettings="editSettings"
          childMapping="children">
  <e-columns>
    <e-column width="240" field="cmdtyCd" headerText="품목" :template="eCommodityTemplate">e-column>
    <e-column width="100" field="ordQty" headerText="수량" defaultValue="1">e-column>
    <e-column width="100" field="" headerText="단위">e-column>
    <e-column width="100" field="" headerText="총액">e-column>
  e-columns>
ejs-treegrid>

and here's script.

// data section
editSettings: {
  allowAdding: true,
  allowEditing: true,
  allowDeleting: true
},
commodities: []

addCommodities (items) {
  if (items !== null && typeof items ===   'object') {
    console.log('Adding single item')
    // this.$refs.orders.ej2Instances.addRecord(items, 0) // Doesn't work.
    this.commodities.unshift(items)
    this.$refs.orders.ej2Instances.refresh()
  } else if (Array.isArray(items)) {
    console.log('Adding array items')
    items.forEach(o => {
      this.commodities.unshift(o)
    })
    this.$refs.orders.ej2Instances.refresh()
  } else {
    // TODO error handling
  }

And, recordDoubleClick event handler in child component.

recordDoubleClick (args) {
  if (args.rowData.parentCmdtyCd) { // If rowData having parentCmdtyCd - skip
    // Skip
    console.log('Record double click - skip')
  } else {
    console.log('Record double click - call props', args.rowData)
    // this.addCmdtyCd(args.rowData)

    this.$emit('recordSelected', args.rowData) // Invoke record event to parent component, it will trigger addCommodities method
  }
},

How can I add item having child properly?

Regards.

[Pon Selva Jeganathan]

Hi Minkyu,  

 

Thanks for contacting syncfusion forum. 

Query: Add record having child – problem

Based on your query, we've understood that you need to add a record from one treegrid to another treegrid. We suggest that you use Drag and Drop to drop a record to another treegrid. To use drag and drop between two treegrids, enable the enableRowDragAndDrop property and define the target TreeGrid ID in the targetID properties of rowDropSettings.

Please refer to the below code snippet, 

<template> 

 

… 

    <div> 

        <ejs-treegrid id='TreeGrid' :dataSource="data" :allowRowDragAndDrop='true' height='315' :treeColumnIndex='1' :rowDropSettings='rowDrop' :selectionSettings='selectionSettings' childMapping='subtasks' > 

            <e-columns> 

                <e-column field="taskID" headerText="Task ID" width="120" isPrimaryKey="true"></e-column> 

…. 

        </ejs-treegrid> 

         

        <ejs-treegrid id='DestTree' :allowRowDragAndDrop='true' height='315' :treeColumnIndex='1' :rowDropSettings='rowDrops' :selectionSettings='selectionSettings' childMapping='subtasks' > 

            <e-columns> 

                <e-column field="taskID" headerText="Task ID" width="120" isPrimaryKey="true"></e-column> 

                …. 

        </ejs-treegrid> 

        </div> 

</div> 

</template> 

<script> 

…. 

    export default { 

        data() { 

            return { 

                 data: dataSource, 

                selectionSettings: { type: 'Multiple' }, 

                rowDrop: { targetID: 'DestTree' }, 

                rowDrops: { targetID: 'TreeGrid' } 

            }; 

        }, 

        provide: { 

            treegrid: [RowDD, Selection] 

        } 

    } 

</script> 

         

Please refer to the below sample: 

https://www.syncfusion.com/downloads/support/forum/160234/ze/vue-1747594708 

Please refer to the below API documentation: 

https://ej2.syncfusion.com/vue/documentation/api/treegrid#allowrowdraganddrop 

https://ej2.syncfusion.com/vue/documentation/api/treegrid#rowdropsettings 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/rowDropSettings/#targetid 

 

Kindly get back to us for further assistance. 

Regards, 

Pon selva  

 

[Minkyu]

Thanks for your answer, Pon Selva Jeganathan.

But I have no plans supporting drag-and-drop feature to end-users, not yet.

I solved this with sending `args.rowData.taskData` instead of `args.rowData`, but addRecord not working properly yet.

See this.

I added a record having child with `addRecord` Method like below.

this.$refs.orders.ej2Instances.addRecord(data, 0)

You can see,  'expand' icon doesn't appears though it has child items.

So I added item(s) directly to datasource via Array methods. It works properly luckily.

Is this kind of bug or did I use the method wrong?

[Minkyu]

Can I ask one more question?

I want to sync some column value between parent and child.

For example, I want to implement when edit value of '수량' column of '100100' item, then '100900' item's value also changed. 

How can I implement this? is there any feature in treegrid? 

[Pon Selva Jeganathan]

Hi Minkyu,  

 

Currently we are validating your query and will update you with further details on or before December 4 2020.   

 

Until then we value your patience.  

Regards, 

Pon selva  

[Padmavathy Kamalanathan]

Hi Minkyu, 

 

We appreciate your patience. 

 

Query 1: Is this kind of bug or did I use the method wrong? 

 

Currently we can add either parent or child record to the Tree Grid by using the “addRecord” method. We are considering your request for adding both parent and child data to Tree Grid using “AddRecord” method as “feature improvement” and we will provide support for the same in our Volume 4 SP1 release which is expected to be rolled out at the end of January 2020. 

 

You can track the current status of your request, review the proposed resolution timeline and contact us for any further queries through this link, 

 

Feedback Link: https://www.syncfusion.com/feedback/20336/need-to-provide-support-for-adding-parent-and-child-record-together-with-addrecord  

 

Note: To view the above feedback, kindly login into your account. 

 

Query 2: I want to sync some column value between parent and child. 

 

We do not have feature for this requirement. But we have achieved your requirement by following the below steps, 

1. In actionBegin event, with requestType as “save” for “edit” action, we have checked whether the edited record has child record and also checked whether the previous and current value of column are not same.
2. Then we have set the changed column value to the child records and updating them by using the “updateRow” method by passing the index and changed record as parameters
3. Thus on editing and saving parent column, the child records’s specific column value will also be updated as per your requirement.

 

Please check the below code snippet, 

 

actionBegin(args) { 

    let instance = this.$refs.treegrid.ej2Instances; 

    if (args.requestType === "save" && args.action === "edit") { 

      let hasChildren =  instance.grid.dataSource[args.data.index].hasChildRecords; 

         // checking if the edited record has children 

      if ( hasChildren && 

        args.previousData["taskName"] !== args.data["taskName"] ) { // here we have used  

       “taskName” column, similarly you can use your own column  

         for which you need to update child value based on parent edited value 

        var parentData = instance.grid.dataSource[args.data.index]; 

        var childData = parentData.childRecords; //child records   

        - childRecords property have the collection of the children of parent record 

        for (let i = 0; i < childData.length; i++) { 

          let changedData = childData[i]; 

          // changing specific column value of child 

          changedData["taskName"] = args.data["taskName"]; 

          let childIndex = childData[i].index; // collecting child index 

          instance.updateRow(childIndex, changedData); 

          // updating the value of parent column to child by using updateRow method  

            by passing the index and data of child 

        } 

      } 

    } 

  }, 

 

Please check the below sample, 

https://codesandbox.io/s/sf-vue-treegrid-edit-child-forked-92lnf?file=/src/App.vue  

 

Please check the below API help documentations, 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#updaterow  

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#actionbegin  

 

NOTE: Currently we have provided solution for the parent and immediate children relation. You can loop through deep children (children of children and modify the solution ) based on your requirement. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan  

[Minkyu]

Hi, Padmavathy Kamalanathan.

I'm appreciate about answer and considering to improve it.

Now I have more question. 

1. Datasource original array is empty after Delete button action.

 

I declared toolbar item like this.

toolbar: [
  {
    id: 'refresh',
    text: 'Refresh'
  },
  'Delete'
],

I clicked tookbar, delete button, then original array data become an empty.

What happened? I don't understand. 

2. How to add child item using 'AddRecord'

Now I understand how to add an item using `AddRecord` but I don't know how to add a child item(or items).

Would you explain about this queries?

Regards, 

Minkyu.

[Manivannan Padmanaban]

Hi Minkyu, 

Thanks for the update. 

Query 1: Datasource original array is empty after Delete button action. 

We are unable to reproduce the reported issue at our end, for your convenience we have created the sample refer to the below link. In the below sample, we have logged the data source on the console in actionComplete event requestType delete. 

https://codesandbox.io/s/sf-vue-treegrid-add-child-forked-x7ioz  

After referred the above sample, still facing an issue. Please get back to us, with the below details. 

1. Share the complete Tree Grid code example. 

2. Share the video demonstration of the issue. 

3. If possible, reproduce the reported issue in the shared sample Or share the issue reproducible sample.  

Query 2: How to add child item using 'AddRecord' 

 

To add a child item pass the newRowPosition as ‘Child’ in the addRecord method as like below. Here we have added the child item for Task ID 2 on button click. 

 <div> 

      <button @click="btnClick()">Add Record</button> 

    </div> 

  methods: { 

    btnClick: function (event) { 

      let instance = this.$refs.treegrid.ej2Instances; 

      instance.addRecord( 

        { 

          taskID: 501, 

          taskName: "test Child", 

          startDate: new Date(), 

          duration: 45, 

        }, 

        1, 

        "Child" 

      ); // pass data, index , newRowPosition 

    }, 

……… 

Output 

 

As like same, we can add the new record above or below to an existing item by passing the newRowPosition as ‘Above’ or ‘Below’. 

 

Also, refer to the API link below. 

https://ej2.syncfusion.com/vue/documentation/api/treegrid#addrecord  

Regards, 

Manivannan Padmanaban