Row height

[Gerardo Lopez Ruiz]

With this code, the height of the grid rows is expanded to the size of the grid. Why doesn't it respect the normal height of the rows?

I am using the version 20.1.0.50

Thank you

<SfTab width="1100px" height="680px" HeaderPlacement="HeaderPosition.Left">
    <TabItems>
        <TabItem>
            <SfDashboardLayout @ref="dashboardObject" Columns="5">
                <DashboardLayoutPanels>
                    <DashboardLayoutPanel Id="one" Column="0" Row="0">
                        <HeaderTemplate>Panel 1</HeaderTemplate>
                    </DashboardLayoutPanel>
                    <DashboardLayoutPanel Id="two" Row="1" Column="0" SizeX=1 SizeY=2>
                        <HeaderTemplate>Panel 2</HeaderTemplate>
                    </DashboardLayoutPanel>
                    <DashboardLayoutPanel Id="three" Row="0" Column="1" SizeX=2 SizeY=2>
                        <HeaderTemplate>Panel 3</HeaderTemplate>
                        <ContentTemplate>
                            <SfGrid DataSource="@Orders" Width="100%" Height="100%" AllowFiltering="true" ShowColumnChooser="true" AllowSorting="true"
                                    Toolbar="@ToolbarItems" EnableHover="true">
                                <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>
                                <GridColumns>
                                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" HeaderTextAlign="TextAlign.Center" AutoFit="true"
                                                TextAlign="TextAlign.Center" Width="120" MinWidth="50"></GridColumn>
                                    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" HeaderTextAlign="TextAlign.Center" AutoFit="true"
                                                Width="150" MinWidth="50"></GridColumn>
                                    <GridColumn Field=@nameof(Order.CustomerLocation) HeaderText="Customer Location" HeaderTextAlign="TextAlign.Center" AutoFit="true"
                                                Width="200" MinWidth="50" FilterSettings="@(new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu})"></GridColumn>
                                    <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" HeaderTextAlign="TextAlign.Center" Format="d" Type="ColumnType.Date"
                                                TextAlign="TextAlign.Center" Width="130" MinWidth="50"></GridColumn>
                                    <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" HeaderTextAlign="TextAlign.Center" Format="C2"
                                                TextAlign="TextAlign.Center" Width="120" MinWidth="50"></GridColumn>
                                </GridColumns>
                            </SfGrid>s
                        </ContentTemplate>
                    </DashboardLayoutPanel>
                </DashboardLayoutPanels>
            </SfDashboardLayout>
        </TabItem>
        </TabItems>
</SfTab>

normal height of the rows (removing sftab control):

[Naveen Palanivel]

Hi Gerardo,

Greetings from Syncfusion Support.

Based on your query, it seems like you're facing an issue where the rows of the grid are expanding to the size of the entire grid instead of respecting the normal height of the rows. We achieved you requirement by using CSS style. We attached the code snippet below . please refer the code snippet for your reference.

Sample : https://blazorplayground.syncfusion.com/embed/LZLKCBBwptELjRrP?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

<DashboardLayoutPanel Id="three" CssClass="Grid_Class" Row="0" Column="1" SizeX=2 SizeY=2>

                       <HeaderTemplate>Panel 3</HeaderTemplate>

                            <ContentTemplate>

                            <SfGrid DataSource="@Orders" Width="100%" Height="100%" AllowFiltering="true" ShowColumnChooser="true"  AllowSorting="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" EnableHover="true">

 

                        </ContentTemplate></DashboardLayoutPanel></DashboardLayoutPanels></SfDashboardLayout></TabItem></TabItems></SfTab>

<style>

    .e-dashboardlayout.e-control .e-panel.Grid_Class .e-panel-container {

        height: unset;

        width: unset;

    }

</style>

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[Gerardo Lopez Ruiz]

Solved, thank you very much for the information.

[Naveen Palanivel]

Hi Gerardo,

Welcome

We are glad to hear that your query has been resolved.

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.