Creating a column centric grid

[Zeljko Lazic]

Hi.

There are occasions where I would prefer the SfDataGrid created it's contents in the reverse of the manner it currently works. Specifically, I would like to bind an observable collection of objects and have the objects appear as the columns and the properties of the objects, the rows.

Is this possible?

[Susmitha Sundar]

Hi Zeljko Lazic, 

 

Thank you for using Syncfusion controls. 

 

You can achieve your requirement by rotating the SfDataGrid. Please refer the below link, 

 

KB link:  https://www.syncfusion.com/kb/2606/how-to-change-the-orientation-rotating-of-sfdatagrid 

 

If the above link does not achieve your requirement, please share more information about your requirement or provide any image reference. 

 

Regards, 

Susmitha S 

 

[Zeljko Lazic]

The example works well, provided the ColumnSizer to set to "Star". However, if the ColumnSizer is set to Auto, or removed and the column widths specified manually, the vertical scrollbar appears, but there's no scroll thumb. e.g.

<Grid>
        <syncfusion:SfDataGrid  x:Name="datagrid"
                            AllowSorting="True"
                            AutoGenerateColumns="False"
                            ItemsSource="{Binding EmployeeDetails}"
                            NavigationMode="Row"
                            Style="{DynamicResource SfDataGridStyle1}"
                            CellStyle="{DynamicResource GridCellStyle1}"
                            HeaderStyle="{DynamicResource GridHeaderCellControlStyle1}"
                            >
            
            <syncfusion:SfDataGrid.Columns>
                <syncfusion:GridTextColumn MappingName="EmployeeGender" HeaderText="Gender" TextAlignment="Left" Width="100"/>
            <syncfusion:GridDateTimeColumn MappingName="HireDate" HeaderText="Hired Date" TextAlignment="Left" Width="100"/>
            <syncfusion:GridTextColumn MappingName="LoginID" HeaderText="LoginID" TextAlignment="Left" Width="100"/>
            <syncfusion:GridTextColumn MappingName="EmployeeDesignation" HeaderText="Designation" TextAlignment="Left" Width="100"/>
            <syncfusion:GridTextColumn MappingName="EmployeeArea" HeaderText="Country" TextAlignment="Left" Width="100"/>
            <syncfusion:GridCurrencyColumn MappingName="EmployeeSalary" HeaderText="Salary" TextAlignment="Left" Width="100"/>
            <syncfusion:GridNumericColumn MappingName="SickLeaveHours" HeaderText="Sick Leave Hours" TextAlignment="Left" Width="100"/>
            <syncfusion:GridNumericColumn MappingName="ContactID" HeaderText="ContactID" TextAlignment="Left" Width="100"/>
            <syncfusion:GridNumericColumn MappingName="ManagerID" HeaderText="ManagerID" TextAlignment="Left" Width="100"/>
            <syncfusion:GridNumericColumn MappingName="EmployeeAge" HeaderText="Age" NumberDecimalDigits="0" TextAlignment="Left" Width="100"/>
            <syncfusion:GridDateTimeColumn MappingName="BirthDate" HeaderText="DOB" TextAlignment="Left" Width="100"/>
            <syncfusion:GridTextColumn MappingName="EmployeeName" HeaderText="Name" TextAlignment="Left" Width="100"/>
            <syncfusion:GridNumericColumn MappingName="EmployeeId" HeaderText="EmployeeID" NumberDecimalDigits="0" TextAlignment="Left" Width="100"/>
            </syncfusion:SfDataGrid.Columns>
            
        </syncfusion:SfDataGrid>
    </Grid>

[Mohanram Anbukkarasu]

Hi Zeljko Lazic, 

Thanks for the update.  

You can resolve this by changing the Grid.Column value for the scrollbar in ScrollViewerControlTemplate1 in the sample as shown in the following code example.  

Code example :  

<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}"> 

    <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition Width="Auto"/> 

            <ColumnDefinition Width="*"/> 

        </Grid.ColumnDefinitions> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="*"/> 

            <RowDefinition Height="Auto"/> 

        </Grid.RowDefinitions> 

        <Rectangle x:Name="Corner" Grid.Column="0" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/> 

        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}"  

                                CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}"  

                                Content="{TemplateBinding Content}" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="0"/> 

        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar"  

        Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableHeight}"  

        Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"  

        Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"  

        ViewportSize="{TemplateBinding ViewportHeight}"/> 

        <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar"  

                   Cursor="Arrow"  

                   Grid.Column="1"  

                   Maximum="{TemplateBinding ScrollableWidth}"  

        Minimum="0" Orientation="Horizontal" Grid.Row="1"  

        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"  

        Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"  

        ViewportSize="{TemplateBinding ViewportWidth}"/> 

    </Grid> 

</ControlTemplate> 

 

Please find the modified sample from the following link.  

Sample link : https://www.syncfusion.com/downloads/support/forum/153756/ze/SfDataGrid_HorizontalOrientation1120948481  

Please let us know if you require further assistance from us.  

Regards, 

Mohanram A. 

[Zeljko Lazic]

In your example solution an object of type VisualContainer is being referenced in the Loaded event handler (in the code behind) which breaks the rules of MVVM.

public void OnLoaded(object sender, System.Windows.RoutedEventArgs e)

{

var visualcontainer = sender as Syncfusion.UI.Xaml.Grid.VisualContainer;

visualcontainer.RowHeights.DefaultLineSize = 100;

visualcontainer.RowHeights[0] = 125;

visualcontainer.ColumnWidths.DefaultLineSize = 100;

}

How do I access RowHeights and ColumnWidths without referencing VisualContainer?

[Mohanram Anbukkarasu]

Hi Zeljko Lazic, 

Thanks for the update.  

It is not possible to achieve this without hooking the Loaded event for VisualContainer. However you can use System.Windows.Interactivity.Behavior to avoid handling the events in MainWindow.xaml.cs. Please find the modified sample from the following link. 

Sample link : https://www.syncfusion.com/downloads/support/forum/153756/ze/SfDataGrid_HorizontalOrientation_Modified1617884347 

Please have a look at this sample and let us know if you require any other assistance from us. 

Regards, 

Mohanram A.