SfDataGrid binding using ContentControl

[Andrew Ridout]

Hi,

I have a FlipView control which has a ContentControl DataTemplate in its ItemTemplate.  The ContentControl has a ContentTemplate which contains a SfDataGrid.  I cannot workout how to bing the FlipView's ItemsSource to the SfDataGrid.

Please see the attached example solution.  In this example, I have a Document class which has several string properties.  I have created an ObservableCollection<Document> Documents which is bound to the FlipView control's ItemsSource.  This is then set as the ContentControl's content binding property:

<FlipView x:Name="FlipView" ItemsSource="{Binding Documents, Mode=TwoWay}" >
    <FlipView.ItemTemplate>
        <DataTemplate>

            <ContentControl ContentTemplate="{StaticResource GridDataTemplate}"  Content="{Binding}"/>

        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

GridDataTemplate is defined as follows:
<DataTemplate x:Key="GridDataTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Margin="5,10,5,10" FontSize="16" Foreground="Black" Text="{Binding Name}" />
        <sfGrid:SfDataGrid Grid.Row="1"
                           x:Name="SfDataGrid"
                           ItemsSource="{Binding}"
                           Height="400"
                           Foreground="Black"
                           HeaderStyle="{StaticResource GridHeaderStyle}"
                           ColumnSizer="Auto"
                           AutoGenerateColumns="True">
        </sfGrid:SfDataGrid>
    </Grid>
</DataTemplate>

At runtime I would expect the SfDataGrid to auto-generate a column for each property on the current Document being displayed in the FlipView, i.e. the following columns "Name", "Field 1", "Field 2", "Field 3", "Field 4", "Field 5".  However, I am not getting anything generated and no data is being displayed in the SfDataGrid.  I have also tried hardcoding the colums (as opposed to using AutoGenerateColumns="True") and this also did not work.  The are no runtime binding errors.

Please could you analyse the attached example and let me know where I am going wrong.

Looking forward to your reply.

Thanks,
Andrew

Attachment: DynamicSfDataGridTest_92e4f027.zip

[Mahendran Annamalai]

Hi Andrew,

 

We have analyzed your query. It’s is not possible to access FlipView’s DataContext to its ItemsTemplate. So we have added Property in Document class to hold ItemsSource information of FlipView as in the below code snippet,

 

public class Document

    {

        public List<Document> Document1 { get; set; }

        public string Name { get; set; }

        public string Field1 { get; set; }

        public string Field2 { get; set; }

        public string Field3 { get; set; }

        public string Field4 { get; set; }

        public string Field5 { get; set; }

    }

 

public class MainPageViewModel : ViewModel

    {

        public ObservableCollection<Document> Documents

        {

            get { return _documents; }

            set { SetProperty(ref _documents, value); }

        }

 

        public MainPageViewModel(INavigationService navigationService)

        {

            LoadData(5);

        }

 

        private void LoadData(int noOfItems)

        {

            var documents = new List<Document>();

 

            for (int i = 1; i <= noOfItems; i++)

            {

                documents.Add(new Document

                {

                    Name = "Document " + i,

                    Field1 = "Field 1",

                    Field2 = "Field 2",

                    Field3 = "Field 3",

                    Field4 = "Field 4",

                    Field5 = "Field 5",

                    Document1 = documents

                });

                

            }

            Documents = new ObservableCollection<Document>(documents);

        }

 

        private ObservableCollection<Document> _documents;

    }

 

And in the XAML, we bind the newly added property in Document class to SfDataGrid.ItemsSource to achieve your requirement.

 

Code snippet:

<sfGrid:SfDataGrid Grid.Row="1"

                   x:Name="SfDataGrid"

                   ItemsSource="{Binding Document1}"

                   Height="400"

                   Foreground="Black"

                   HeaderStyle="{StaticResource GridHeaderStyle}"

                   ColumnSizer="Auto"

                  AutoGenerateColumns="True">

</sfGrid:SfDataGrid>

 

Please find sample from below location.

 

Sample:

 

Thanks,

Mahendran.

Attachment: FlipViewSfdataGrid_6ab57c29.zip