Content in Modal don't take up all free spacing

[Ton That Hung]

Hi Syncfusion Team,

I'm using Dialog component to show some content such as TreeGrid or Chart on it. But I faced the problems.

1. TreeGrid:
   If I use virtual scroll, even though there is a lot of free spacing on TreeGrid, but it only show 12 records. I've research document, and I can increase the records by setting pageSettings.pageSize. ​But I want TreeGrid detect the page size automatically. Because my website serve many people with many different screen high, I don't want fixed number of records.
   
   
   
   Link sample: https://stackblitz.com/edit/react-oidxs5-sevun2?file=index.js,package.json,index.css
2. Chart:
   The same problem with TreeGrid. There is a lot of free spacing on modal, and I set the height of chart is "100%", but the chart don't take up all the free spacing.
   
   
   
   Expect:
   
   
   Link sample: https://stackblitz.com/edit/react-oidxs5-xx2ic7?file=index.js
   
   
   

How to I config to reach my requirement?

Thanks.

[Pon Selva Jeganathan]

Hi Ton That Hung,

Query: TreeGrid: If I use virtual scroll, even though there is a lot of free spacing on TreeGrid, but it only show 12 records. I've research document, and I can increase the records by setting pageSettings.pageSize. ​But I want TreeGrid detect the page size automatically. Because my website serve many people with many different screen high, I don't want fixed number of records.

We checked your shared sample, but we were unable to replicate the issue(white space issue) at our end. By default, when using virtual scrolling, the TreeGrid should automatically load the next set of records as you scroll based on the default pageSize value.

Please refer to the below video demo,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/demo_(5)360178668

Still if you are facing issue, please provide the following information.

1. Package version details.
2. Video demo of the issue and share the replication steps.
3. If possible, share a reproducible sample with us.

The provided information will be helpful to proceed further.

Query: Reg chart issue

We have branched this query into a separate thread. Please follow up the below thread,

https://forumassist.syncfusion.com/182854

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ton That Hung]

Hi Pon Selva Jeganathan,

Thanks for your support.

I have seen your video and realized your screen is shorter than mine.

1. Link sample:
   Use TreeGrid onModal: https://stackblitz.com/edit/react-oidxs5-sevun2?file=index.js,package.json,index.html
   Use TreeGrid without modal: https://stackblitz.com/edit/react-oidxs5-veukty?file=index.js,package.json,index.css
2. Video: https://www.loom.com/share/eb0f48d664984bc28d52b1b309a4c2d0

As you can see in the video, when I use TreeGrid inside a modal, there is a significant amount of empty space that TreeGrid does not occupy. However, when I use TreeGrid outside the modal, even without setting the page size, it still fills up the available space.

Is there any way that I don't have to set the page size for TreeGrid and it automatically fills up the empty space within the modal?

Thanks.

[Pon Selva Jeganathan]

Hi Ton That Hung,

Query: Is there any way that I don't have to set the page size for TreeGrid and it automatically fills up the empty space within the modal?

We were able to replicate the issue(white space issue) at our end After validating the issue, we found that the TreeGrid's content height was overflowing the dialog content, causing improper rendering within the modal(which shares same height for both TreeGrid and Dialog). So this issue is occurred. To avoid this we recommend setting the separate height of an external parent container for the TreeGrid.

Please refer to the below code example,

 

Your code:

 

 <div className="control-pane">

      <div className="control-section" style={{ height: '100vh' }}>

        <button onClick={() => setIsOpen(true)}>Open</button>

        <DialogComponent

          visible={isOpen}

          isModal={true}

          height="90vh"

          width="90vw"

        >

            <TreeGridComponent

              dataSource={virtualData}

              childMapping="Crew"

              enableVirtualization={true}

              treeColumnIndex={1}

              gridLines={'Both'}

              height="100%"

            >

 

 

 

Modified code:

 

 <div className="control-pane">

      <div className="control-section" style={{ height: '100vh' }}>

        <button onClick={() => setIsOpen(true)}>Open</button>

        <DialogComponent

          visible={isOpen}

          isModal={true}

          height="90vh"

          width="90vw"

        >

          <div className="section1" style={{ height: '70vh' }}>

            <TreeGridComponent

              dataSource={virtualData}

              childMapping="Crew"

              enableVirtualization={true}

              treeColumnIndex={1}

              gridLines={'Both'}

              height="100%"

            >

 

Please refer to the below sample,

https://stackblitz.com/edit/react-oidxs5-4qju9y?file=index.js,index.html,index.css

Kindly get back to us for further assistance.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ton That Hung]

Hi Pon Selva Jeganathan,

Thanks for your quickly support.

Your solution is working very well in some cases, but in other cases, it still hasn't resolved the issue. For example, in the modal, I have added a header and footer, and the height of these two sections is flexible(may be 200px, or 300px, bla bla). I want the TreeGrid to occupy the remaining space in the modal. In this case, I cannot set a fixed height for the chart. Do you have any solution for this scenario?

Link sample: https://stackblitz.com/edit/react-oidxs5-wb9hnn?file=index.js

I am truly curious why, when I use the content without a modal, TreeGrid can automatically occupy empty spaces (you can remove the modal to check), but when I put it into a modal, TreeGrid cannot occupy the empty space. What is the actual reason behind this?

Thanks.

[Pon Selva Jeganathan]

Hi Ton That Hung,

Query: when I use the content without a modal, TreeGrid can automatically occupy empty spaces (you can remove the modal to check), but when I put it into a modal, TreeGrid cannot occupy the empty space. 

Before we can proceed with addressing this issue, we kindly request some additional details to help us understand the problem better:

1. Detailed explanation of your issue
2. Confirm whether you want the TreeGrid to automatically occupy empty spaces when there are changes to the header or footer elements?
3. how you dynamically change the height of the header or footer elements.
4. Video demo of the issue

[Ton That Hung]

Hi Pon Selva Jeganathan

1. In addition to the tree grid, a modal also consists of a header and a footer. The height of the header and footer can be adjustable, as it depends on whether the content inside them is short or long. 
2. I want the tree grid to occupy all the remaining space (the height of the modal minus the header and footer).
3. The height of the header and footer can be adjustable, as it depends on whether the content inside them is short or long. 
   

Link sample: https://stackblitz.com/edit/react-oidxs5-wb9hnn?file=index.js

I am truly curious why, when I use the content without a modal, TreeGrid can automatically occupy empty spaces (you can remove the modal to check), but when I put it into a modal, TreeGrid cannot occupy the empty space. What is the actual reason behind this?

Thanks.​

[Pon Selva Jeganathan]

Hi Ton That Hung,

Query: when I use the content without a modal, TreeGrid can automatically occupy empty spaces (you can remove the modal to check), but when I put it into a modal, TreeGrid cannot occupy the empty space. I am truly curious why, when I use the content without a modal, TreeGrid can automatically occupy empty spaces (you can remove the modal to check), but when I put it into a modal, TreeGrid cannot occupy the empty space. What is the actual reason behind this?

On further validation of the issue, we found that the TreeGrid is rendered initially, which causes the issue. To resolve this, we recommend rendering the TreeGrid after the dialog modal is opened. We suggest that you render the TreeGrid in the open event of the dialog.

Please refer to the below code example,

 <DialogComponent

          visible={isOpen}

          isModal={true}

          height="90vh"

          width="90vw"

          open={() => setShowTreeGrid(true)}

          close={() => setIsOpen(false)}

        >

          <div className="container">

            <div className="header">Header</div>

            <div className="tree-grid-wrapper" style={{ height: '70vh' }}>

              {showTreeGrid && (

                <TreeGridComponent

                  dataSource={virtualData}

                  childMapping="Crew"

                  enableVirtualization={true}

                  treeColumnIndex={1}

                  gridLines={'Both'}

                  height="100%"

                >

 

If you have set the height of the TreeGrid as a percentage value, make sure to set a separate height for the external parent container of the TreeGrid. Alternatively, you can set the height based on the dialog and header/footer elements in the load event of the TreeGrid.

Please refer to the below sample,

https://stackblitz.com/edit/react-oidxs5-22urqu?file=index.js

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/dialog#open

https://ej2.syncfusion.com/documentation/api/treegrid#load

Kindly get back to us for further assistance.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.