Size of Grid

[VyaZin]

Hello!

I tried to insert Grid into the Tab. Tab is in the Splitter.

But height of Grid periodically breaks. Sometimes the height really equal 50vh (for example), but if i press F5 then height equal 20-30px.

I want to get a table, which will occupy all the available space in the Tab

@{Html.EJ().Splitter("outer").Height("75%").Width("100%").Orientation(Orientation.Horizontal).EnableAutoResize(true)

.PaneProperties(

p =>

{

p.Add().ContentTemplate(

@<div class="splitdiv" style="height: 100%">

<div id="tree"></div>

</div>).MinSize("350");

p.Add().ContentTemplate(

@<div class="splitdiv" >

@InnerSplitter()

</div>).MinSize("350");

}).Render();

}

@helper InnerSplitter()

{

@(Html.EJ().Tab("DefaultTabs").Items(data =>

{

data.Add().ID("Properties").Text("Properties").

ContentTemplate(@<div>

@(Html.EJ().Grid<Properties>("PropertiesGrid")

.AllowFiltering()

.AllowResizing()

.AllowScrolling()

.ScrollSettings(scroll =>

{

scroll.Width("100%").Height("50vh).VirtualScrollMode(VirtualScrollMode.Normal);

})

.MinWidth(300)

.FilterSettings(filter =>

{

filter.FilterType(FilterType.Menu);

})

.Columns(column =>

{

column.Field("ID").HeaderText("ID").TextAlign(TextAlign.Center).Width(100).Add();

column.Field("IDProp").HeaderText("IDProp").TextAlign(TextAlign.Center).Width(100).Add();

column.Field("Name").HeaderText("Name").TextAlign(TextAlign.Center).Width(200).Add();

column.Field("Access").HeaderText("Access").TextAlign(TextAlign.Center).Width(200).Add();

column.Field("Description").HeaderText("Description").TextAlign(TextAlign.Center).Width(200).Add();

column.Field("IDObject").HeaderText("IDObject").TextAlign(TextAlign.Center).Width(200).Add();

}))

</div>

);

data.Add().ID("Objects").Text("Objects").ContentTemplate(@<div id="container" style="width:70%; height:100%">

@(Html.EJ().Grid<NodesObjects>("ObjectsGrid")

.AllowFiltering()

.AllowResizing()

.AllowResizeToFit()

.AllowScrolling()

.ScrollSettings(scroll =>

{

scroll.Width("100%").VirtualScrollMode(VirtualScrollMode.Normal);

scroll.Height("50vh");

})

.MinWidth(300)

.FilterSettings(filter =>

{

filter.FilterType(FilterType.Menu);

})

.Columns(column =>

{

column.Field("ID").HeaderText("ID").TextAlign(TextAlign.Center).Width(100).Add();

column.Field("IDObj").HeaderText("IDProp").TextAlign(TextAlign.Center).Width(200).Add();

column.Field("Info").HeaderText("Info").TextAlign(TextAlign.Center).Width(200).Add();

column.Field("Name").HeaderText("Name").TextAlign(TextAlign.Center).Width(200).Add();

}))

</div>

);

　

}).Width("100%"))

}

[Ragavee U S]

Hi VyaZin, 

Thanks for contacting Syncfusion support.  

We don’t have support to mention the height/width properties of the Grid based on viewport dimensions (vh/vw). So, could you please share the following details for assisting you better. 

1.       Video demo of the issue that you are facing 

2.       Are you expecting responsive feature for the grid control? 

3.       More details on your requirement. 

Regards, 

Ragavee U S.