Customising DataGrid

Benjamin

Asked On September 4, 2019 08:50 AM UTC

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"

Reply | Reply with quote

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>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

</DataTemplate>

</sfGrid:GridTextColumn.HeaderTemplate>

</sfGrid:GridTextColumn>

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

<sfGrid:GridTextColumn.HeaderTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button x:Name="country_Button" Grid.Column="1" Grid.Row="0" Text=">" 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

Reply | Reply with quote

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?

Reply | Reply with quote

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?

Reply | Reply with quote

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:

<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

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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>

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

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

</DataTemplate>

</sfGrid:GridTemplateColumn.HeaderTemplate>

<sfGrid:GridTemplateColumn.CellTemplate>

<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>

Reply | Reply with quote

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>

<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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147206	Sep 4,2019 08:50 AM UTC	Oct 10,2019 09:22 AM UTC	Xamarin.Forms	8

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US