Row content not visible entirely on resizing the data grid

I want the rows to resize themselves so that the entire content is visible. The code is as follows:

<syncfusion:SfDataGrid x:Name="dataGrid1"
                               AutoGenerateColumns="True"
                               AllowResizingColumns="True"
                               AllowDraggingColumns="True"
                               ItemsSource="{Binding Requirements}"
                               ColumnSizer="Star"
                               BorderBrush="Transparent"
                               Margin="30,0,0,0">

                    <syncfusion:SfDataGrid.Columns>

                        <!-- Column 1 -->
                        <syncfusion:GridTextColumn HorizontalHeaderContentAlignment="Left" TextWrapping="Wrap" AllowFocus="False" HeaderText="Requirement Types" MappingName="RequirementTypes">
                            <syncfusion:GridTextColumn.CellTemplate>
                                <DataTemplate>
                                    <Grid Margin="5,0,0,0">
                                        <TextBlock Text="{Binding Path=RequirementTypes}"
                                         VerticalAlignment="Center"
                                         HorizontalAlignment="Left"/>
                                    </Grid>
                                </DataTemplate>
                            </syncfusion:GridTextColumn.CellTemplate>
                        </syncfusion:GridTextColumn>

                        <!-- Column 2 -->
                        <syncfusion:GridTextColumn AllowFocus="False" HeaderText="Recommended" MappingName="Recommended">
                            <syncfusion:GridTextColumn.CellTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <TextBlock Text="{Binding Path=Recommended}"
                                         VerticalAlignment="Center"
                                         HorizontalAlignment="Center"
                                         FontWeight="SemiBold"/>
                                    </Grid>
                                </DataTemplate>
                            </syncfusion:GridTextColumn.CellTemplate>
                        </syncfusion:GridTextColumn>

                        <!-- Column 3 -->
                        <syncfusion:GridTextColumn AllowFocus="False" HeaderText="Override Value" MappingName="OverrideValue">
                            <syncfusion:GridTextColumn.CellTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <editors:SfNumericUpDown x:Name="numericUpDown"
                                                                 HorizontalAlignment="Center"
                                                                 VerticalAlignment="Center"
                                                                 Width="200"
                                                                 Value="{Binding Path=OverrideValue}"
                                                                 SpinButtonsAlignment="Both"
                                                                 AccentBrush="Gray"/>
                                    </Grid>
                                </DataTemplate>
                            </syncfusion:GridTextColumn.CellTemplate>
                        </syncfusion:GridTextColumn>

                        <!-- Column 4 -->
                        <syncfusion:GridTextColumn TextWrapping="Wrap" AllowFocus="False" HeaderText="Comments" MappingName="Comments">
                            <syncfusion:GridTextColumn.CellTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <TextBlock Text="{Binding Path=Comments}"
                                         VerticalAlignment="Center"
                                         HorizontalAlignment="Left"
                                           TextWrapping="Wrap"/>
                                    </Grid>
                                </DataTemplate>
                            </syncfusion:GridTextColumn.CellTemplate>
                        </syncfusion:GridTextColumn>

                    </syncfusion:SfDataGrid.Columns>

                </syncfusion:SfDataGrid>

I am adding the screenshot for reference.
Thanks in advance.

Attachment: screenshot_2faa7bf8.zip

1 Reply

JG Jai Ganesh S Syncfusion Team June 24, 2016 11:55 AM UTC

Hi Anupama, 
 
You can automatically resize a row when you type multi-line text in SfDataGrid by using the QueryRowHeight event. 
 
this.sfGrid.QueryRowHeight += SfGrid_QueryRowHeight; 
 
 
        private void SfGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) 
        { 
            if (this.sfGrid.GridColumnSizer.GetAutoRowHeight(e.RowIndex, gridRowResizingOptions, out autoHeight)) 
            { 
                if (autoHeight > this.sfGrid.RowHeight) 
                { 
                    e.Height = autoHeight; 
                    e.Handled = true; 
                } 
            } 
        } 
 
And the column can be defined as follows, 
 
  <syncfusion:GridTextColumn MappingName="Name" TextWrapping="Wrap" > 
 
  </syncfusion:GridTextColumn> 
 
 
In the above sample, the row height is automatically increased based on the “Name” column value. 
 
Regards, 
Jai Ganesh S 
 


Loader.
Up arrow icon