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. Image for the cookie policy date

DataBinding SfCellGrid

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 { getset; }
    public string Name { getset; } //Can be Luca or Katya
    public decimal Money { getset; }

My desired output result (ignore styles, I would like only grouping):
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

7 Replies

KB Kanimozhi Bharathi Syncfusion Team August 1, 2016 09:58 AM UTC

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. 

Kanimozhi B 

LS Luca Spolidoro August 1, 2016 05:43 PM UTC

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.

JG Jai Ganesh S Syncfusion Team August 2, 2016 01:40 PM UTC

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"> 
                    <ControlTemplate TargetType="syncfusion:GridRowHeaderCell"> 
                        <Border x:Name="PART_RowHeaderCellBorder" 
                    Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}"> 
                                <TextBlock HorizontalAlignment="Center" 
                                Text="{Binding DateofBirth}" 
                                TextAlignment="Center" /> 
Also, you can set as the First column as a Freezable  by set the FroxenColumnCount as 1, 
<syncfusion:SfDataGrid x:Name="sfGrid" 
                                   ItemsSource="{Binding UserDetails}" 
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. 
Jai Ganesh S 

LS Luca Spolidoro August 2, 2016 07:51 PM UTC

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)

SR Sabaridass Ramamoorthy Syncfusion Team August 3, 2016 07:17 AM UTC

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. 
Please refer to the following code example: 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
        <pivotGrid:SfPivotGrid Name="pivotGrid1" AllowSelection="True" ItemSource="{Binding ProductSalesData}" Margin="11"> 
                <pivots:PivotItem FieldCaption="Date" FieldMappingName="Date" Format="dd/MM/yy" TotalHeader="Total"/> 
                <pivots:PivotItem FieldCaption="Name" FieldMappingName="Name" TotalHeader="Total"/> 
                <pivots:PivotComputationInfo FieldCaption="Money" FieldName="Money" Format="C" SummaryType="DecimalTotalSum" /> 
For your reference: 
ItemSource property that helps you to bind the relational data source to SfPivotGrid. 
Collection of PivotItem that holds the information of row fields of SfPivotGrid 
Collection of PivotItem that holds the information of column fields of SfPivotGrid 
Collection of PivotComputationInfo that holds the information of value  fields of SfPivotGrid 
If this information doesn’t meet your actual requirement, please share more information so that we could provide an appropriate solution. 
Sabaridass R. 

LS Luca Spolidoro August 6, 2016 06:11 AM UTC

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

SR Sabaridass Ramamoorthy Syncfusion Team August 8, 2016 09:36 AM UTC

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:

Sabaridass R.   

Live Chat Icon For mobile
Up arrow icon