DataBinding SfCellGrid

[Luca Spolidoro]

Hello Support, it's possible to bind SfCellGrid to a ViewModel data?

How can I customize it to bind a flat data to a grouped data?

My Model is:

public class Salary
{
    public DateTimeOffset Date { get; set; }
    public string Name { get; set; } //Can be Luca or Katya
    public decimal Money { get; set; }
}

My desired output result (ignore styles, I would like only grouping):

Date	Luca	Katya
15-Jan-2016	$2,868.76	$1,970.31
31-Jan-2016	$3,316.98	$1,970.31
15-Feb-2016	$3,225.53	$1,970.31
29-Feb-2016	$3,281.57	$1,970.31
15-Mar-2016	$3,316.98	$1,970.31
31-Mar-2016	$3,316.98	$1,970.31

[Kanimozhi Bharathi]

Hi Luca Spolidoro, 

Thank you for contacting Syncfusion Support. 

SfCellGrid does not have support for data binding. We recommend you to use SfDataGrid control for data binding and grouping the data. Please refer the below links for more information. 

FT: https://www.syncfusion.com/products/uwp/sfdatagrid 

UG: http://help.syncfusion.com/uwp/sfdatagrid/getting-started 

Regards 

Kanimozhi B 

[Luca Spolidoro]

Hello Kanimozhi,

I can workaround databinding, it's not the most critical feature to my scenario.

The thing I care most is to find a way to get a flat data (class salary) and transform it in a grid where:

Date is the Y axis (Row Header)

Name is the X axis (Column Header)

Money is the value (see example in previous post)

the closes thing I could come up with SfDataGrid is this:

and as you can see, I would like my Date to be on a single X axis, while "Name" on two columns: Luca and Katya.

[Jai Ganesh S]

Hi Luca, 

 

We cannot understand your requirement clearly and we couldn’t see your screen shot for your last update. We suspect that, you want to show the DateTime value in RowHeader. You can achieve this by write the style for GridRowHeaderCell like below, 

 

<Style TargetType="syncfusion:GridRowHeaderCell"> 

 

     <Setter Property="Template"> 

           <Setter.Value> 

                    <ControlTemplate TargetType="syncfusion:GridRowHeaderCell"> 

                        <Border x:Name="PART_RowHeaderCellBorder" 

                    Background="{TemplateBinding Background}" 

                    BorderBrush="{TemplateBinding BorderBrush}" 

                    BorderThickness="{TemplateBinding BorderThickness}"> 

                            <Grid> 

                                <TextBlock HorizontalAlignment="Center" 

                                VerticalAlignment="Center" 

                                Text="{Binding DateofBirth}" 

                                TextAlignment="Center" /> 

                            </Grid> 

                        </Border> 

                    </ControlTemplate> 

          </Setter.Value> 

    </Setter> 

 </Style> 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridDemo411525942.zip 

 

Also, you can set as the First column as a Freezable  by set the FroxenColumnCount as 1, 

 

<syncfusion:SfDataGrid x:Name="sfGrid" 

                                   Grid.Row="1" 

                                   FrozenColumnCount="1" 

                                   AllowEditing="True" 

                                   AutoGenerateColumns="False" 

                                   GridValidationMode="InView" 

                                   ItemsSource="{Binding UserDetails}" 

                                   ShowRowHeader="True"/> 

 

If we misunderstood your requirement, then could you please share more information about your query. This would be more helpful for us to analyze further. 

 

Regards, 

Jai Ganesh S 

 

[Luca Spolidoro]

Hello Jai,

thanks for your help, sorry if I wasn't very clear with the requirements, I'll try to explain better.

with the GridRowHeaderCell Style, I built this:

but as you can see, Luca and Katya are row items of the column "Name" and not Columns themselves (please see desired output table in my first post).

Is there any way I can transform my data in order to get the desired output table?

Please note that "Luca" and "Kayta" is only an example, there may be also 3/4 people in the table (added as other columns; 1 per person)

[Sabaridass Ramamoorthy]

Hi Luca, 

 

In order to achieve your requirement – “Binding a flat data into a grouped data through ViewModel”, you can use the SfPivotGrid control instead of SfDataGrid, since the SfPivotGrid has the support to bind relational data through ViewModel and also displays the grouped data in grid view with row headers and column headers. We have created a simple SfPivotGrid sample with your data collection which was shared in your previous update.   

 

Please refer the attached sample from the following location. 

http://www.syncfusion.com/downloads/support/forum/125219/ze/CustomRelationalSample-890160160 

 

Please refer to the following code example: 

 

#XAML 

 

<Page 

    x:Class="CustomRelationalSample.MainPage" 

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    xmlns:local="using:CustomRelationalSample" 

    xmlns:pivotGrid="using:Syncfusion.UI.Xaml.PivotGrid" 

    xmlns:pivots="using:Syncfusion.PivotAnalysis.UWP" 

    xmlns:viewModel="using:CustomRelationalSample.ViewModel" 

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

    mc:Ignorable="d"> 

 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

        <Grid.DataContext> 

            <viewModel:ViewModel/> 

        </Grid.DataContext> 

        <pivotGrid:SfPivotGrid Name="pivotGrid1" AllowSelection="True" ItemSource="{Binding ProductSalesData}" Margin="11"> 

            <pivotGrid:SfPivotGrid.PivotRows> 

                <pivots:PivotItem FieldCaption="Date" FieldMappingName="Date" Format="dd/MM/yy" TotalHeader="Total"/> 

            </pivotGrid:SfPivotGrid.PivotRows> 

            <pivotGrid:SfPivotGrid.PivotColumns> 

                <pivots:PivotItem FieldCaption="Name" FieldMappingName="Name" TotalHeader="Total"/> 

            </pivotGrid:SfPivotGrid.PivotColumns> 

            <pivotGrid:SfPivotGrid.PivotCalculations> 

                <pivots:PivotComputationInfo FieldCaption="Money" FieldName="Money" Format="C" SummaryType="DecimalTotalSum" /> 

            </pivotGrid:SfPivotGrid.PivotCalculations> 

        </pivotGrid:SfPivotGrid> 

    </Grid> 

</Page> 

 

For your reference: 

 

API	Description	Type
ItemSource	ItemSource property that helps you to bind the relational data source to SfPivotGrid.	object
PivotRows	Collection of PivotItem that holds the information of row fields of SfPivotGrid	PivotItem
PivotColumns	Collection of PivotItem that holds the information of column fields of SfPivotGrid	PivotItem
PivotCalculations	Collection of PivotComputationInfo that holds the information of value  fields of SfPivotGrid	PivotComputationInfo

 

If this information doesn’t meet your actual requirement, please share more information so that we could provide an appropriate solution. 

 

Regards, 

Sabaridass R. 

[Luca Spolidoro]

Hello Sabaridass.

that's most likely what I need! thanks for pointing me in the right direction!

I still have some concerns thou:

1. My ItemsSource is an ObservableCollection, that will NotifyPropertyChange when first loaded or when items are added or removed. My data is loaded from a service (with an async method) and I don't see sfPivotGrid to load/refresh when I raise NotifyPropertyChange on that property. What should I do to allow sfPivotGrid to load data when it's available or the collection changes? It seems I need the LoadInBackground property from the WPF control that is not available in the UWP Control...
2. I don't know how to remove the row total (highlighted in yellow). I'm ok with the column total.
3. I don't know how to add the column name for the Date that is now blank (circled in red)
4. I don't know why I cannot select only the first row (January 15): clicking it will select all the rows. Only from the second row, the selection works normally (is this a bug?)

The sample code is attached.

to "simulate" the async load, just comment out the code in the ViewModel constructor, and use the one in the "Load" button code.

Attachment: CustomRelationalSample_bf7a41be.zip

[Sabaridass Ramamoorthy]

Hi Luca,

We have created an incident to log a feature report on your behalf. Our support engineer will assist you through this incident. We request you to follow the incident for further details:
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,   

Sabaridass R.