Unable to expand child records in Chrome but able to expand them in firefox

[Vigneswaran]

Hello, 

I am unable to expand the child grids when the number of fields/columns in any level is greater than 50. This issue is happening in chrome but it works fine in firefox. Kindly help me out on this.

Warm regards

Vigneswaran

[Rajapandi Ravi]

Hi Vigneswaran, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you are facing the problem with Hierarchy Grid when expanding. Based on your query we have prepared a sample which was same as your application scenario and tried to reproduce the issue but it was unsuccessful. We are not facing any problem in Chrome browser. Please refer the below sample and screenshot for more information. 

Sample: https://stackblitz.com/edit/angular-68fjxy?file=app.component.html 

Screenshot: 

 

If you still face the issue, please share the below details that will be helpful for us to provide better solution 

1)     Please share your complete Grid rendering code. 

2)     Please share the Chrome browser version. 

3)     Please confirm which type of OS you are using in your machine.  

4)     Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

5)     Please share the issue scenario in video demonstration format. 

Regards,
Rajapandi R 

[Vigneswaran]

Hello, 

I am providing the information you've asked from the previous reply

                                                                                                                        Grid Rendering Code

App.component.ts

this.secondChildGrid =

{

dataSource: this.secondChildDataSource,

queryString: "qid",

columns: this.formattedSecondChildColumnSource,

selectionSettings: { type: 'Multiple' },

editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: "Top" },

allowReordering: true,

//allowFiltering: true,

//childGrid: this.gridChlidrenObjectArray[0][1],

dataBound: function() {

this.hideColumns(["arrayName", "qid"]);

},

}

this.firstChildGrid =

{

dataSource: this.firstGridDataSource,

queryString: "_id",

columns: [{field: "name", headerText: "name", width: 150}],

childGrid: this.secondChildGrid

};

App.component.html

<ejs-grid

[dataSource] = "dataSource"

[childGrid] = "firstChildGrid"

[toolbar]="toolbar"

[editSettings]='editSettings'

[pageSettings]='pageSettings'

[allowPdfExport]='true'

[allowExcelExport]='true'

(toolbarClick)='toolbarClick($event)'

(created) = 'onGridCreate($event)'

allowPaging = 'true'

allowFiltering='true'

allowResizing= "true"

allowReordering = "true"

showColumnChooser='true'

allowSorting='true'

allowTextWrap='true'

height = "450"

#grid>

Chrome Version : Version 88.0.4324.96 (Official Build) (64-bit)

OS: Ubuntu 20.04.1 LTS

I have also shared the chrome error version of the code below. This same sample works fine in firefox but doesn't work in chrome. 

Warm Regards 

Vigneswaran

Attachment: gridchromeerror_84IRmHod_VT36_61f02aa9.zip

[Rajapandi Ravi]

Hi Vigneswaran, 

Thanks for the update 

Based on your provided code example, we have prepared a sample which was same as your application scenario and tried to reproduce the issue, but it was unsuccessful. We are not facing any problem in Chrome browser. Please refer the below sample and screenshot for more information. 

Sample: https://stackblitz.com/edit/angular-68fjxy-6awwsi?file=app.component.ts 

From validating your shared video demo, we found that the childGrid data and expand icon was not aligned properly. Please refer the below screenshot for more information. 

Screenshot: 

 

So, before we start providing solution on your query, we need some information for our clarification. So please share the below details that would be helpful for us to provide better solution. 

1)     Please confirm If you are used any custom CSS. If yes means, please share the custom CSS code. 

2)     Have you faced any script error in the console? If yes, share the screenshot and stack trace of an issue. 

Regards,
Rajapandi R

[Vigneswaran]

Hello,

I am not using any custom CSS code and I am not facing any errors in the console. As I said earlier it's working perfectly for firefox but not in chrome.

Warm Regards

Vigneswaran

[Rajapandi Ravi]

Hi Vigneswaran,  

  

We have created a new incident under your Direct trac account to follow up with this query. We suggest you follow up with the incident for further updates. Please log in using the below link.   

  

https://www.syncfusion.com/account/login 

  

Regards,  

Rajapandi R