How to create responsive grid when left column has expand & collapse search bar

Posted by: gvsatishvarma on 4 October 2021, 2:04 am EST

  • 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
  • Replied 4 October 2021, 7:39 pm EST

    Hi Team, Any update on the above issue. Need help ASAP. Thanks Satish
  • Replied 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
  • Replied 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
  • Replied 5 October 2021, 10:49 pm EST


    Pics are attached below, which is happening only in IE, Chrome its working fine.
  • Replied 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
  • Replied 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
  • Replied 7 October 2021, 6:02 pm EST


    After Width with "*"

    Specific width
  • Replied 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

  • Marked as Answer

    Replied 10 October 2021, 8:27 pm EST

    Hello,

    1. 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.

    2. 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
  • Replied 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
  • Replied 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
  • Replied 16 November 2021, 2:43 am EST

  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels