Can't collapse the row

[c]

Hi teams,

I use the tree grid component for display my data but today, i would encompass my data (like your demo) but unfortunely, i have this (see picture). As you can see, no icon didn't show (near cursor). And i have no way to access or collapse the line.

I have this data:

const myData = [

{

     parent: true,

     productName: 'BlackBerry',

     childrens: [

          {

               code: '123456',

               category: ' product',

               productName: 'BlackBerry',

               manufacturerName: 'BlackBerry',

               isNew: true,

               eenable: true

            }

     ]

}

]

and my component:

<TreeGridComponent datasource={myData} childmapping='childrens' treeColumnIndex={1} />

Thansk for help !

Attachment: IMG_20200914_173711.jpg_46e9c734.zip

[Padmavathy Kamalanathan]

Hi Customer, 

 

Thanks for contacting Syncfusion Forums. 

 

Query: Can’t collapse the row 

 

We have validated the reported issue with the shared code example. On further validating, we could see that you have used the “childMapping” property as “childmapping”. So we suspect that the parent data alone is shown in the Tree Grid without child records and thus the expand/collapse icon has not been rendered. Due to this,  you could not perform expand/collapse function.  

 

We recommend that you to define the properties with proper casing (i.e. childMapping – letter M in uppercase) so that the property will work as expected. 

 

Please check the below code snippet, 

 

 

<TreeGridComponent dataSource={this.myData} treeColumnIndex={0} childMapping='childrens'> 

<ColumnsDirective> 

  <ColumnDirective field='code' headerText='Code' template={this.template} width='120'  

   textAlign='Right'></ColumnDirective> 

  <ColumnDirective field='category' headerText='Category' width='100'></ColumnDirective> 

  <ColumnDirective field='productName' headerText='Product Name' width='100' textAlign='Right'/> 

</ColumnsDirective> 

</TreeGridComponent> 

 

 

Please check the below screenshot, 

 

 

 

 

We have prepared sample for your reference. Please check the below link, 

https://stackblitz.com/edit/treegrid-expand-collapse-cwvkxl?file=index.js 

 

Please check the below help documentations, 

https://ej2.syncfusion.com/react/documentation/treegrid/data-binding/#hierarchy-data-source-binding 

https://ej2.syncfusion.com/react/demos/#/material/treegrid/localdata 

https://ej2.syncfusion.com/react/documentation/api/treegrid/#childmapping 

 

Still facing the issue, kindly get back to us with the below details, 

1. Complete Tree Grid rendering code
2. Video demonstrating the issue
3. If possible, kindly share issue reproducible sample or reproduce the issue in the above sample and share us.
4. Also share your Product version details

 

Regards, 

Padmavathy Kamalanathan

[c]

Hi Teams,

Thanks for the time. I miss this M masjuscule. But it doesn't work. I use a mock of my data inside my component treeGrid like this: 

and this , how I declare the column: 

no Arrow for collapse or extends my data

Thanks for the big help :) 

[c]

Hi Team,

Ok I resolved this. This is because I miss import the files css in my own custom component. Thanks so glad for the time

[Padmavathy Kamalanathan]

Hi Customer,  

 

We are happy to hear that your issue has been resolved. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan