We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customising DataGrid

Thread ID:

Created:

Updated:

Platform:

Replies:

147206 Sep 4,2019 08:50 AM UTC Oct 10,2019 09:22 AM UTC Xamarin.Forms 8
loading
Tags: SfDataGrid
Benjamin
Asked On September 4, 2019 08:50 AM UTC

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

Client 1



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

Shivagurunathan Kamalakannan [Syncfusion]
Replied On September 5, 2019 01:04 PM UTC

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.   
   
Regards,   
Shivagurunathan   


Benjamin
Replied On September 10, 2019 05:04 AM UTC

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
Replied On September 11, 2019 07:29 AM UTC

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 [Syncfusion]
Replied On September 11, 2019 01:31 PM UTC

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. 
 
Regards, 
Shivagurunathan

Benjamin
Replied On September 17, 2019 09:12 AM UTC

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 [Syncfusion]
Replied On September 18, 2019 08:53 AM UTC

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
Replied On October 8, 2019 08:05 AM UTC

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 [Syncfusion]
Replied On October 10, 2019 09:22 AM UTC

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,

 
 


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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon