Data Grid, Splitter : Height to fit screenheight automatically

[hieu phan]

Dear Syncfusion,

1. Is it possible to set the height of the data grid and splitter to 100% , so it fits the screen vertically ? I tried with height 100% of parent div

2. I try to load a Data grid in one Splitter pane and a Tree View in the other, ultimately I want to have a data grid that loads the tree view based on the selection made

please fine the code example in attachment.

Thank you.

Attachment: splitter_cfc7ae0f.zip

[Thiyagu Subramani]

Hi hieu, 

Thanks for contacting Syncfusion forum. 

We have validated and addressed below queries. 

Query 1 : Is it possible to set the height of the data grid and splitter to 100% , so it fits the screen vertically ? I tried with height 100% of parent div 

Based on your reported information we suspect your requirement is to fits the splitter screen vertically. For this case we suggest to use height as 100vh for parent div like below. 

[App.vue] 

<div style="width:100%; height: 100vh;"> 

    <ejs-splitter id="splitter" ref="splitterObj" :separator-size="3" width="100%" height="100%"> 

. . . . . .  

    </ejs-splitter> 

  </div> 

For reference: https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window 

Query 2: I try to load a Data grid in one Splitter pane and a Tree View in the other, ultimately I want to have a data grid that loads the tree view based on the selection made 

 

We suspect your requirement is load grid based on tree view selection. For this case, Using nodeselected method you can load grid with based on selection. 

[outlook-pane1-content.vue] 

<div class="tree-template-control-wrapper"> 

      <ejs-treeview id="template" :nodeSelected="selected" :fields="fields" cssClass="custom" :nodeTemplate="treeTemplate"></ejs-treeview> 

    </div> 

export default Vue.extend({ 

  . . . . . . . 

  methods: { 

    selected: function (args) { 

     var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

      //Add your code here….. 

    } 

  }, 

}) 

Reference link : https://ej2.syncfusion.com/angular/documentation/api/treeview/#nodeselected 

https://ej2.syncfusion.com/angular/documentation/api/treeview/#nodeselecting 

If we misunderstood your problem, please explain your exact requirement briefly. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[hieu phan]

Hi hieu, 

Thanks for contacting Syncfusion forum. 

We have validated and addressed below queries. 

Query 1 : Is it possible to set the height of the data grid and splitter to 100% , so it fits the screen vertically ? I tried with height 100% of parent div 

Based on your reported information we suspect your requirement is to fits the splitter screen vertically. For this case we suggest to use height as 100vh for parent div like below. 

[App.vue] 

<div style="width:100%; height: 100vh;"> 

    <ejs-splitter id="splitter" ref="splitterObj" :separator-size="3" width="100%" height="100%"> 

. . . . . .  

    </ejs-splitter> 

  </div> 

For reference: https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window 

Query 2: I try to load a Data grid in one Splitter pane and a Tree View in the other, ultimately I want to have a data grid that loads the tree view based on the selection made 

 

We suspect your requirement is load grid based on tree view selection. For this case, Using nodeselected method you can load grid with based on selection. 

[outlook-pane1-content.vue] 

<div class="tree-template-control-wrapper"> 

      <ejs-treeview id="template" :nodeSelected="selected" :fields="fields" cssClass="custom" :nodeTemplate="treeTemplate"></ejs-treeview> 

    </div> 

export default Vue.extend({ 

  . . . . . . . 

  methods: { 

    selected: function (args) { 

     var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

      //Add your code here….. 

    } 

  }, 

}) 

Reference link : https://ej2.syncfusion.com/angular/documentation/api/treeview/#nodeselected 

https://ej2.syncfusion.com/angular/documentation/api/treeview/#nodeselecting 

If we misunderstood your problem, please explain your exact requirement briefly. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

Dear Syncfusion,

about query 1, your suggestion is work perfect.

regarding query 2, I need load tree view based on grid selection, each row on grid has a different data source for tree view, please review and advise.

Thanks,

[Thiyagu Subramani]

Hi hieu, 

Thanks for your update. 

We are happy to hear that your issue has been resolved. 

Query : I need load tree view based on grid selection, each row on grid has a different data source for tree view, please review and advise. 

 

Sorry for the inconvenienced. 

For this case you can load tree view based on grid row selection using rowSelected event. In this event we can get row index for each row, using this index we can set different dataSource for treeview. Please refer to the below code. 

onRowSelected: function (args) { 

    if(args.rowIndex === 1){  // Based on row index we can change treeview dataSource. 

      var treeObj = document.getElementsByClassName('e-treeview')[0].ej2_instances[0]; 

     // Add  your code here… 

. . . . . . 

      treeObj.fields =  { dataSource: treeviewdata,  . . . . . . . . }  

    } 

. . . . . 

    }, 

 

Reference link : https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[hieu phan]

Yes. It works. Thank you very much!

[Thiyagu Subramani]

  

Hi hieu, 

Thanks for the update. 

We are glad to hear that the provided solution satisfied your requirement. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S.