How to set TreeGrid height to 100% with flex-box?

[Liraz]

Hi,

I want to set the TreeGrid height to be 100% when its container’s display is flex. Please help me to do so, because currently the TreeGrid is extending its container.

App.vue:

<template>
  <div
id="app" style="height: 100%; display: flex; flex-direction:
column;">
      <div
style="font-size:18px; margin: 10px 0;">Tasks</div>
      <div
style="flex: 1;">
         
<ejs-treegrid :dataSource="data" childMapping='subtasks'
:treeColumnIndex='0' height='100%'>
           
<e-columns>
               
<e-column field='taskName' headerText='projectName'
:template='colTemplate' width=180></e-column>
               
<e-column field='startDate' headerText='date' format="yMd"
textAlign='Right'></e-column>
               
<e-column field='duration' headerText='duration' textAlign='Right'></e-column>
               
<e-column field='progress' headerText='progress'
textAlign='Right'></e-column>
           
</e-columns>
       
</ejs-treegrid>
      </div>

    </div>
</template>

<script>
import { TreeGridComponent, ColumnsDirective,
ColumnDirective, Page } from '@syncfusion/ej2-vue-treegrid';
import { createApp } from "vue";

const app = createApp();

// Template declaration
var colVue = app.component("colTemplate", {
  data: () => ({}),
  template:
`<b>Name:{{data.taskID}}</b>`,
});

export default {
  name: 'App',
  components: {
    'ejs-treegrid' :
TreeGridComponent,
'e-columns' : ColumnsDirective,
'e-column' : ColumnDirective
  },
  data() {
return {
  data: [
        {
            taskID: 1,
            taskName:
'Planning',
            startDate:
new Date('02/03/2017'),
            endDate:
new Date('02/07/2017'),
            progress:
100,
            duration:
5,
            priority:
'Normal',
            approved:
false,
            subtasks:
[
                {
taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                   
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority:
'Normal', approved: false },
                {
taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                   
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority:
'Low', approved: true },
                {
taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                   
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority:
'Critical', approved: false },
                {
taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                   
endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority:
'Low', approved: true }
            ]
        },],
    colTemplate:
function () {
        return {
template: colVue };
      },
    columns: [
        { field:
"OrderID", headerText: "OrderID", width: "120" },
        { field:
"CustomerID", headerText: "Customer ID", width:
"120" },
      ]
};
  },
  // module injection
  provide: {
treegrid: [Page],
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import
"../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import
"../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
@import
"../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";

body {
    height: 100vh;
    margin: 0;
}

#app {
    height: 100%;
}

</style>

Attaching also a project example (please resize your screen in order to reproduce this).

Attachment: vue_treegrid_height_with_flex_1f378fb8.zip

[Farveen Sulthana Thameeztheen Basha]

  

Hi Liraz, 

We have checked your reported problem but we are unable to replicate(TreeGrid is extending its container) the problem in your provided sample link. Also we have discussed about “How to make the TreeGrid fill its parent container” in our documentation. 

Refer to the UG link:-https://ej2.syncfusion.com/vue/documentation/treegrid/scrolling/#responsive-with-parent-container 

After following the above documentation still faced issue, please share us Video Demo/ Screenshot to proceed further. 

Regards,
Farveen sulthana T 

[Liraz]

Hi,

I followed the documentation and still have the same issue. In my case, the parent container doesn't have fixed height, since I am using flex-box.

In the attached example, you will see the problem if you will decrease the screen size (alternatively, you can use a big data). 

This is the TreeGrid when data is collapsed (the TreeGrid height is spreaded across the window which this is what I want):

This is the TreeGrid when data is expanded (a scroll is added to the window instead of to the TreeGrid. I want the TreeGrid's scroll to appear, but instead, the TreeGrid extends its container height):

 

[Farveen Sulthana Thameeztheen Basha]

Hi Liraz, 

We have tried to replicate your reported problem at our end. But we are unable to replicate this issue. Refer to the Video Demo link:- 

https://www.syncfusion.com/downloads/support/forum/172219/ze/demo_(2)1768966464 

As we have mentioned in the documentation while setting height as 100% for TreeGrid it is necessary to set parent container with specified height. After following the documentation still faced issue, share us the following details. 

1. Modified sample link.
2. Video demo to replicate the problem.

Regards, 

Farveen sulthana T 

[Liraz]

Ohh, I didn't notice that while setting height as 100% for TreeGrid it is necessary to set parent container with specified height.

To achieve what I want, I am now using the native CSS calc() to set the container's height and it works.

Thank you for the help.

[Farveen Sulthana Thameeztheen Basha]

Hi Liraz,

Thanks for your update. Please get back to us if you need any further assistance.

Regards,
Farveen sulthana T