Customising DataGrid

[Benjamin]

would like to know if this is possible for data grid.

When user click on the arrow at the red box area, it will "switch view"

[Shivagurunathan Kamalakannan]

Hi Benjamin,   

   

Thank you for contacting Syncfusion support.   

   

Your requirement to switch the columns can be achieved in SfDataGrid. By using the IsHidden property in the columns you can hide or show the columns while tapping the button which is loaded in the header template of the column.   

   

Xaml code:   

   

<sfGrid:GridTextColumn MappingName="ShipCity" IsHidden="{Binding HideCityColumn}">   

    <sfGrid:GridTextColumn.HeaderTemplate>   

        <DataTemplate>   

            <Grid BackgroundColor="DarkBlue">   

                <Grid.ColumnDefinitions>   

                    <ColumnDefinition Width="30"/>   

                    <ColumnDefinition Width="*"/>   

                </Grid.ColumnDefinitions>   

   

                <Grid.RowDefinitions>   

                    <RowDefinition/>   

                </Grid.RowDefinitions>   

   

                <Button x:Name="city_Button"  Grid.Column="0" Grid.Row="0" Text="&lt;" Clicked="City_Button_Clicked" TextColor="White"BackgroundColor="#2862f7"/>   

                <Label VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Text="City" Grid.Row="0" Grid.Column="1"TextColor="White" BackgroundColor="Transparent"/>                   

            </Grid>   

        </DataTemplate>   

    </sfGrid:GridTextColumn.HeaderTemplate>   

</sfGrid:GridTextColumn>   

   

<sfGrid:GridTextColumn MappingName="ShipCountry" IsHidden="{Binding HideCountryColumn}">   

    <sfGrid:GridTextColumn.HeaderTemplate>   

        <DataTemplate>   

            <Grid BackgroundColor="DarkBlue">   

                <Grid.ColumnDefinitions>   

                    <ColumnDefinition Width="*"/>   

                    <ColumnDefinition Width="30"/>   

                </Grid.ColumnDefinitions>   

   

                <Grid.RowDefinitions>   

                    <RowDefinition/>   

                </Grid.RowDefinitions>   

   

                <Label VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Text="Country" Grid.Row="0" Grid.Column="0"TextColor="White" BackgroundColor="Transparent"/>   

                <Button x:Name="country_Button"  Grid.Column="1" Grid.Row="0" Text="&gt;" Clicked="Country_Button_Clicked" TextColor="White"BackgroundColor="#2862f7"/>   

            </Grid>   

        </DataTemplate>   

    </sfGrid:GridTextColumn.HeaderTemplate>   

</sfGrid:GridTextColumn>   

   

  

   

Code behind:   

   

public partial class MainPage : ContentPage   

{   

               public MainPage()   

               {   

                              InitializeComponent();   

                              dataGrid.GridStyle = new CustomStyle();   

               }   

   

               private void City_Button_Clicked(object sender, EventArgs e)   

               {   

                              this.viewModel.HideCityColumn = !this.viewModel.HideCityColumn;   

                              this.viewModel.HideCountryColumn = !this.viewModel.HideCountryColumn;   

               }   

   

               private void Country_Button_Clicked(object sender, EventArgs e)   

               {   

                              this.viewModel.HideCityColumn = !this.viewModel.HideCityColumn;   

                              this.viewModel.HideCountryColumn = !this.viewModel.HideCountryColumn;   

               }   

}   

  

   

We have prepared a sample based on your requirement and it can be downloaded from the below link.   

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridSample1550093299   

   

Regards,   

Shivagurunathan   

[Benjamin]

Hi.

Thanks for your reply. I am still in the midst of adopting your suggestions.

in the meantime, I would like to check if it is possible for the header top border and lower border to be of different color?

[Benjamin]

Thanks for the suggestions. I am able to implement it on my project. 

With regards to my query on the possibility for the header top border and lower border to be of a different color?

is this doable?

[Shivagurunathan Kamalakannan]

Hi Benjamin, 

 

Thank you for the update, 

 

By default, you can only set color for both the top and bottom border of the header in SfDataGrid and to set different color for the top and bottom header of the SfDataGrid, we do not have inbuilt support for it.  

 

But you can use a box view at the bottom border of the SfDataGrid. Apply header border color by extending a class from DataGridStyle. And now place the box view at the bottom header. So that the UIview looks like SfDataGrid has different color on top border and the bottom border. 

 

Xaml code: 

 

<RelativeLayout x:Name="relativeLayout"> 

    <sfGrid:SfDataGrid x:Name="dataGrid"  

                   AutoGenerateColumns="False"                             

                   ColumnSizer="Star" 

                   HeaderRowHeight="80" 

                   VerticalOverScrollMode="None" 

                   ItemsSource="{Binding OrderInfoCollection}" 

                   RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, 

                                                                          Property=Height, 

                                                                          Factor=1, 

                                                                          Constant=0}" 

                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, 

                                                                         Property=Width, 

                                                                         Factor=1, 

                                                                         Constant=0}"> 

        <sfGrid:SfDataGrid.Columns> 

            <sfGrid:GridTextColumn MappingName="Customer"/> 

 

            .. .  

 

        </sfGrid:SfDataGrid.Columns> 

    </sfGrid:SfDataGrid> 

</RelativeLayout> 

 

 

Code behind: 

 

private void DataGrid_GridLoaded(object sender, GridLoadedEventArgs e) 

{                                                                                          

               var point = this.dataGrid.RowColumnIndexToPoint(new RowColumnIndex(1, 0)); 

               BoxView boxView = new BoxView(); 

               boxView.HeightRequest = 1.5; 

               boxView.Color = Color.Red; 

               boxView.BackgroundColor = Color.Red; 

               boxView.Opacity = 100; 

               this.relativeLayout.Children.Add(boxView, Constraint.Constant(point.X), Constraint.Constant(point.Y), widthConstraint: Constraint.RelativeToParent((parent) => { return parent.Width; })); 

} 

 

 

 

We have prepared a sample based on your requirement and it can be downloaded from the below link. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridSample-1460100699 

 

Regards, 

Shivagurunathan

[Benjamin]

Hi. Thanks for your suggestion and assistance. I persuade the designer to change the design such that the top and bottom border for header to be the same color.

[Farjana Parveen Ayubb]

Hi Benjamin,  

 

Thanks for the update. 

 

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you. 

 

Regards, 

Farjana Parveen A 

[Benjamin]

I would like to know how do I remove the padding for the first row?

As can be seen in the image below, for Client 1, there is space at the side which make is seems to be smaller than client 2 row

Code

<sfGrid:SfDataGrid x:Name="dtClient" AutoGenerateColumns="False" Margin="10"                            

                                 ColumnSizer="Star" GridStyle="{StaticResource clientGridStyle}" 

                                 HeaderRowHeight="50" RowHeight="40" BackgroundColor="Transparent" VerticalOverScrollMode="None">

              <sfGrid:SfDataGrid.Columns>

                            <sfGrid:GridTemplateColumn MappingName="ClientName">

                                          <sfGrid:GridTemplateColumn.HeaderTemplate>

                                                        <DataTemplate>

                                                                <Label Text="Clients" FontFamily="Roboto" TextColor="{DynamicResource dataGridHeaderText}" FontSize="14" Margin="10" 

                                                                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center"></Label>

                                                        </DataTemplate>

                                           </sfGrid:GridTemplateColumn.HeaderTemplate>

                                           <sfGrid:GridTemplateColumn.CellTemplate>

                                                      <DataTemplate>

                                                             <border:SfBorder Margin="0" Padding="0" BackgroundColor="{DynamicResource dataGridHighlightedCol}" BorderWidth="0">

                                                                        <Label Text="{Binding ClientName}" Margin="0" 

                                                                               TextColor="{DynamicResource textColor}" FontFamily="Roboto" FontSize="13" 

                                                                            HorizontalTextAlignment="Center" 

                                                                           VerticalTextAlignment="Center" />

                                                               </border:SfBorder>

                                                         </DataTemplate>

                                            </sfGrid:GridTemplateColumn.CellTemplate>

                                 </sfGrid:GridTemplateColumn>

[Karthikraja Kalaimani]

Hi Benjamin,

Thanks for the update.

This is a known issue and we have already fixed this issue and the fix has been included in our Volume 3 main release 17.3.0.14. You can download it from nuget manages. So upgrade Syncfusion.Xamarin.SfDatagrid to latest version and check once whether the issue is resolved or not. We have attached the working sample for the same.

Please follow the below code snippet,

 

[XAML] 

<sfGrid:SfDataGrid x:Name="dataGrid"  

                           AutoGenerateColumns="False"                             

                           HeaderRowHeight="80" 

                           VerticalOverScrollMode="None" 

                           ColumnSizer="Star" 

                           ItemsSource="{Binding OrderInfoCollection}"> 

            <sfGrid:SfDataGrid.Columns> 

                <sfGrid:GridTemplateColumn MappingName="Customer"> 

                    <sfGrid:GridTemplateColumn.CellTemplate> 

                        <DataTemplate> 

                            <border:SfBorder Margin="0" Padding="0" BorderWidth="0"> 

                                ……. 

                        </border:SfBorder> 

                        </DataTemplate> 

                    </sfGrid:GridTemplateColumn.CellTemplate> 

                </sfGrid:GridTemplateColumn> 

                                ……. 

            </sfGrid:SfDataGrid.Columns> 

        </sfGrid:SfDataGrid> 

 
Screenshots for your reference,

 

 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridDemo1676004372.zip 

Xamarin Forms version : 3.6.0.34447

Syncfusion.Xamarin.SfDataGrid version : 17.3.0.14

Kindly check the sample let us know if you’re still facing the same issue? If not, please modify the sample based on your scenario and revert us back with the replication procedure. It will be helpful for us to check on it and provide you the solution.

Regards,
Karthik Raja