how to show grid properly in tab

[Aleqsandre]

hello, I have this code

<SfTab>

    <TabItems>

        <TabItem>

            <ChildContent>

                <TabHeader Text="TabHeader"></TabHeader>

            </ChildContent>

            <ContentTemplate>

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

                    <GridColumns>

                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="520"></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="330"></GridColumn>

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

                        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>

                    </GridColumns>

                </SfGrid>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

@code{

    public List<Order> Orders { 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),

            ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)]

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

        public string ShipCountry { get; set; }

    }

}

and if possible I would like to do like in the video, which I uploaded. In video grid is without tab and it works properly but in tab it does like this

Attachment: AMWeb_v4.0__Google_Chrome_20200522_233404_935d982d.rar

[Alagumeena Kalaiselvan]

Hi Aleqsandre, 

Greetings from Syncfusion support! 

We have checked your reported query “How to show grid properly in Tab” and Grid height is loaded based on its parent element height. So, you can set height as 100% to Tab and override the below Css classes of Tab to achieve your case. Refer the below code for that. 

  

<SfTab Height="100%"> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="TabHeader"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

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

                     ... 

                    </SfGrid> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

 

<style> 

    .e-tab > .e-content { 

        height: calc(100% - 36px) !important; 

    } 

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

        height: 100% !important; 

     } 

     .content { 

        height: 650px !important; 

     } 

</style> 

Also, you can get this sample using the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent893103664  

Kindly let us know, If you need further assistance. 

Regards 

Alagumeena.K