How to set grid Height to 100%

[Aleqsandre]

Hello,
I would like to set grid height to 100%

but with this code headers disappear  

if I set height with hard code 

then it's ok 

but I need to set height by percentage, because  different computers have different screen size
please help if possible?

[Vignesh Natarajan]

Hi Aleqsandre,  

Thanks for contacting Syncfusion support.  

Query: “ I need to set height by percentage, because  different computers have different screen size please help if possible?” 

We suggest you to define a static width and height to immediate parent element to Grid control to achieve your requirement. . Because when Grid height is defined in percentage, it will adjusted to its immediate parent width and height. We have already documented this topic in our UG documentation. Kindly refer the below documentation for your reference 

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

Kindly get back to us if you have further queries. 

Regards,, 

Vignesh Natarajan 

[Aleqsandre]

Hello, thank you for reply, your provided solution works fine when I'm not setting  AllowTextWrap="true". 
if I set   AllowTextWrap="true" then  datagrid element doesn't fill its parent container.
please help if possible .

I'm using grid like below

            <div style="height:calc(100vh - 10.5rem);">

                <SfGrid @ref="_SfGrid" Height="100%" Width="100%" AllowTextWrap="true" DataSource="@_TrainingList" AllowSelection="true" AllowSorting="true">

                    <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single"></GridSelectionSettings>

                    <GridEvents RowSelected="RowSelectHandler" RowDeselected="RowDeSelectHandler" TValue="Training"></GridEvents>

                    <GridColumns>

                        <GridColumn Field=@nameof(Training.StartDate) Format="dd.MM.yyyy" HeaderText="დაწყების თარიღი" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.EndDate) Format="dd.MM.yyyy" HeaderText="დასრულების თარიღი" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.TrainingTypeName) HeaderText="ტრენინგის სახე" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.TrainingOwnerName) HeaderText="ტრენინგის ჩამტარებელი" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.TrainingName) HeaderText="ტრენინგის სახელი" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.Trainer) HeaderText="ტრენერი" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.TrainingOwnerAddress) DisableHtmlEncode="false" HeaderText="ტრენინგის ჩამტარებლის <br> მისამართი" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.TrainingOwnerPhone) DisableHtmlEncode="false" HeaderText="ტრენინგის ჩამტარებლის <br> ტელეფონი" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.TrainingOwnerRepresentative) DisableHtmlEncode="false" HeaderText="ტრენინგის ჩამტარებლის <br> წარმომადგენელი" AutoFit="true"></GridColumn>

                        <GridColumn Field=@nameof(Training.Description) HeaderText="შენიშვნა" AutoFit="true"></GridColumn>

                    </GridColumns>

                </SfGrid>

[Vignesh Natarajan]

Hi Aleqsandre,  

Thanks for the update.  

Query: “if I set   AllowTextWrap="true" then  datagrid element doesn't fill its parent container. please help if possible” 

We have analyzed the reported issue at our end by preparing a sample as per your suggestion. And we are not able to reproduce the reported issue at our end. Kindly refer the below sample for your reference 

Sample: https://www.syncfusion.com/downloads/support/forum/168610/ze/DataGrid_Server1145344303.zip 

After referring the sample, if you are still facing the reported issue. kindly ensure the reported issue by defining static row height using RowHeight property of Grid. Because when textwrap is enabled. Some record height will be more, some will be less. So defining the static Rowheight will resolve the reported issue.  

If you are still facing the reported issue after defining the RowHeight, kindly get back to us following details.  

1. Share your updated Grid code example.
2. Share the video demonstration of the issue along with replication procedure.
3. Share details about your Syncfusion.Blazor NuGet package details
4. If possible try to reproduce the reported issue in provided sample and revert back to us.

Above requested query will be very helpful in validating the reported query at our end and provide solution as early as possible. 

Regards, 

Vignesh Natarajan