Grid in Tab

[Unknown]

Hi,

i have the problem, that the grid within a tab is not using the whole viewport to show the grid.

I found this article: https://blazor.syncfusion.com/documentation/datagrid/how-to/render-grid-inside-tab-with-specific-height/

But the Heightadjustment mode is no property on a tab. The api docs also give a 404. Can you give me a hint?

Nils

[Vengatesh Maniraj]

Hi Nils,   

  

Sorry for the inconvenience caused.   

  

Query: “But the Heightadjustment mode is no property on a tab. The api docs also give a 404. Can you give me a hint?”  

  

HeightAdjustMode property of Tab control has been deprecated in our 17.4.0.39 release. Please find the release notes regarding the same below release notes.   

  

https://blazor.syncfusion.com/documentation/release-notes/17.4.39/#tab  

  

We have logged an improvement task to modify the how to documentation. It will be implemented as soon as possible.   

  

Refer our UG documentation on adjusting the Grid control based on the parent container for your reference  

  

https://blazor.syncfusion.com/documentation/datagrid/scrolling/#responsive-with-parent-container 

 

Kindy get back to us if you have further queries.   

 

Regards,
Vengatesh  

[Jonah Coleman]

I have the same problem and am not finding an answer- when I put a Grid within a tab, and set its height to 100% it sizes to whatever size is needed to hold all its items, adding a vertical scroll bar to the page.  I want the grid sized to the view, with its own vertical scroll bar so that the header stays fixed.

[Nevitha Ravi]

Hi Jonah/Nils, 

Greetings from Syncfusion Support. 

We could hide the page scroller and add scroller to grid to stay tab header fixed and for the same we have prepared a sample which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/153814/ze/GridInTab-2114283768  

<div style="height:500px"> 

    <SfTab Height="100%"> 

        <TabItems> 

            <TabItem> 

                <HeaderTemplate> 

                    Grid1 

                </HeaderTemplate> 

                <ContentTemplate> 

                    <SfGrid DataSource="@Orders" Height="100%"> 

                        <GridColumns> 

                            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

                            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

                            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                        </GridColumns> 

                    </SfGrid> 

                </ContentTemplate> 

            </TabItem> 

            <TabItem> 

                <HeaderTemplate> 

                    Grid2 

                </HeaderTemplate> 

                <ContentTemplate> 

                    <div> 

                        <SfGrid DataSource="@Options"> 

                            <GridColumns> 

                                <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                                <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

                                <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

                                <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                            </GridColumns> 

                        </SfGrid> 

                    </div> 

                </ContentTemplate> 

            </TabItem> 

        </TabItems> 

    </SfTab> 

</div> 

 

@code { 

    public List<Order> Orders { get; set; } 

    public List<Order> Options { get; set; } 

 

    protected override void OnInitialized() 

    { 

        Orders = Enumerable.Range(1, 75).Select(x => new Order() 

        { 

            OrderID = 1000 + x, 

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], 

            Freight = 2.1 * x, 

            OrderDate = DateTime.Now.AddDays(-x), 

        }).ToList(); 

 

    } 

 

    public class Order 

    { 

        public int? OrderID { get; set; } 

        public string CustomerID { get; set; } 

        public DateTime? OrderDate { get; set; } 

        public double? Freight { get; set; } 

    } 

} 

<style> 

    .e-tab > .e-content { 

        height: calc(100% - 36px) !important; /*tab height - tab header height*/ 

    } 

 

    .e-tab > .e-content .e-item { 

        height: 100% !important; 

    } 

</style> 

Please try the solution and let us know if you need any further assistance. 

Regards, 

Nevitha 

[Jonah Coleman]

That worked perfectly, thanks!

[Vengatesh Maniraj]

Hi Jonah, 

You are most welcome. 

We are happy that our solution has fulfilled your requirement. 

Regards, 

Vengatesh