Posted 4 October 2021, 2:04 am EST
Hi Team,
Getting blank space right side of the grid and few column are not displaying, when left search bar get collapsed. need help to fix this.
Regards,
Satish
How to create responsive grid when left column has expand & collapse search bar
Posted by: gvsatishvarma on 4 October 2021, 2:04 am EST
-
gvsatishvarma
-
gvsatishvarma
Posted 4 October 2021, 7:39 pm EST
Hi Team, Any update on the above issue. Need help ASAP. Thanks Satish
-
sonu.pandey
Posted 4 October 2021, 10:12 pm EST
Hello,
As per our understanding, you want the grid column widths to be responsive, if so then you may set the width property of the columns to “*”, please make sure to provide a minWidth so that the columns can be visible. Please refer to the following links below for more reference:
API link:https://www.grapecity.com/wijmo/api/classes/wijmo_grid.column.html#width
Demo link:https://www.grapecity.com/wijmo/demos/Grid/Columns/ColumnWidth/purejs
Sample link:https://stackblitz.com/edit/js-wkq3tz?file=index.js
If you have any other issues then do let us know.
Regards
-
gvsatishvarma
Posted 5 October 2021, 10:11 pm EST
Hi Sonu Panday,
Thank you so much for the reply.
I have updated the code as per the link but still, the issue exists in IE. Please let me know is there any solution for IE.Regards,
Satish -
sonu.pandey
Posted 6 October 2021, 5:20 pm EST
Hello,
The issue has occurred because the IE11 doesn’t have a resize observer, therefore when the with of the FlexGrid gets changed the changes were not get detected and the blank space gets appeared on the right side of the FlexGrid.
To resolve the issue may simply refresh the FlexGrid after the side menu appears and disappears which will cause the FlexGrid to resize the columns again to fit the available screen.
You may refer to the sample zip demonstrating the same:FlexGrid_columnWidth.zip
Let us know if that works for you.
Regards
-
gvsatishvarma
Posted 7 October 2021, 5:59 pm EST
Hi Sonu panday, Thank you somuch for your quick response. I have added the code as you mentioned. still its not expanding as expected. May be I need to keep this on set time out function. I will try, still if you have any more solutions please. I will attached the screen.
Now column size become very small and clumzy, can you please suggest how to achieve it.
Thanks,
Satish -
gvsatishvarma
Posted 10 October 2021, 6:44 pm EST
Hi Sonu Panday, Here two issues. One is with the width=“*”, its displaying all small boxes with the available width. and 2nd its not refreshing the grid in IE, event is not firing. please find the code below. and do the needful.
wjRefesh(event) {
if(event.path[0][“className”]=== ‘bento-splitter-handle bento-splitter-handle-left’){
setTimeout(function(){
console.log(event);
alert( ‘clicked on expand button’);
this.flexGrid.refresh();
}, 1000);}};
Thanks & Regards,
Satish -
sonu.pandey
Posted 10 October 2021, 8:27 pm EST
Hello,
-
You can also import the resize-observer-polyfill to the project to detect the resizing changes in the IE7+ browser because as mentioned earlier the IE7 onwards the resize observer doesn’t support therefore in this case you would require to use the polyfill.
-
Yes, you are right the refresh event doesn’t get triggered when the width of the FlexGrid gets changed, it is because of the same reason mentioned in the 1st point. Therefore the refresh event doesn’t get fired.
You may refer to the updated sample attached below using the resize-observer-polyfill to detect the changes in the width of the FlexGrid.
sample:FlexGrid_columnWidth_updated.zip
Let us know if that’s works for you. If you still face issues then I would request you to please share a sample demonstrating the issue so that we can investigate and find the root cause of the issue.
Regards
-
-
gvsatishvarma
Posted 8 November 2021, 2:00 am EST
Hi Sonu Pandey, Thank you so much for your help.
With resize-observer-polyfill import, Flexgrid is working as expected.Regards.
Satish -
gvsatishvarma
Posted 16 November 2021, 2:21 am EST
HI Sonu Pandey, Good evening,
Resize-observer-polyfill import grid is working fine, but due to this script, I am getting error saying localhost is not responding. Can you please help.Regards,
Satish -
sonu.pandey
Posted 17 November 2021, 1:44 am EST
Hello,
Sorry, but I’m unable to replicate the issue at my end. Would you please clarify if you are facing the issue with the below-shared sample too? If yes, please share some video/gif of the procedure to replicate the issue. If you are facing this issue only in your application but not in the shared sample then it is possible that the issue is arising due to some code specific to your application. Since I’m unable to replicate the issue, I would request you to share a sample that demonstrates the issue so that I can further investigate the root cause of the issue and assist you accordingly, without a sample to replicate the issue, I cannot comment on the actual nature of the issue.
Could you also let me know, how you were able to detect that the issue is caused by the Resize-observer-polyfill?
sample:FlexGrid_responsive_columns.zip
Regards
