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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfDataGrid binding using ContentControl

Thread ID:

Created:

Updated:

Platform:

Replies:

117617 Nov 17,2014 01:56 PM UTC Nov 19,2014 01:17 PM UTC WinRT 1
loading
Tags: SfDataGrid
Andrew Ridout
Asked On November 17, 2014 01:56 PM UTC

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 [Syncfusion]
Replied On November 19, 2014 01:17 PM UTC

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

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.

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

;