Generating SFDataGrid with GroupedSource

[Deanna Delapasse]

I'm trying to dynamically generate a single-row datagrid from some configuration data where the configuration data contains the name/id/value for the binding. The sourcedata is the result of a LINQ group-by query so the type is IEnumerable>.

I can not make this bind correctly to my SFDataGrid. I generate the columns like this:

foreach (MyItem item in viewModel.InspectionItems)

{

GridTemplateColumn gtc = new GridTemplateColumn() {HeaderText = item.Name, MappingName = item.Id,};

dataGridTest.Columns.Add(gtc);

}

I use a DataTemplateSelector (set in the xaml) to render the correct control type, but I cannot make the bindings work correctly. There is a very similar listView that uses this binding:

and sets the ItemSource like: ItemsSource="{x:Bind MyItemViewSource.View}

For the datagrid I'm setting the ItemsSource myself, but I can't figure out programmatically how to tell the sfdatagrid that the feed is grouped. I believe I need a way to set the IsSourceGrouped flag on sfdatagrid similar to the xaml above.

For example, if my data is

[{"id":"control1","datatype":"string","name":"Control 1","value":"abc"},{"id":"control2","datatype":"string","name":"Control 2","value":"def"}]

I create 2 columns each bound to one of the id fields above, but instead of seeing one value in each column I see both values in both columns. It's as if it's binding the column instead of the row.

[Jayapradha S]

Hi Deanna,

Thank you for contacting Sycnfusion Support.

We have analyzed your queries and find the details below,

You have stated that your source data  is the result of a LINQ group-by query so the type is IEnumerable<IGrouping>. We couldn’t get your type of source that you have used. Please share your viewmodel collection with us.

Regarding query: For the datagrid I'm setting the ItemsSource myself, but I can't figure out programmatically how to tell the sfdatagrid that the feed is grouped. I believe I need a way to set the IsSourceGrouped flag on sfdatagrid similar to the xaml above.

We couldn’t get the scenario clearly. In SfDataGrid, we have a flag to check the datagrid is grouped or not. But you have mentioned that the sfdatagrid gets flag that feed is grouped or not. Please share it in more detail.

Please share your requirement clearly with us. Also please share the datacollection from view model. It would be helpful for us to provide a solution.

Regards,
Jayapradha

[Deanna Delapasse]

Sorry Jayapradha, I was trying to simplify the question and didn't provide enough details.  Let me try again and I will attach my (very messy) test project.   My desired result will be a single grid for EACH SubCategory  but for this test, any arrangement is fine.

My data describes my grouped grid and provides a value for the cell.  Note that for SubCategory there are 2 controls specified (both are type string, so 2 textboxes)

            _items = new ObservableCollection<InspectionItem>();

            _items.Add(new InspectionItem() { SubCategory1 = "cat1", Id="OrderId", Name="Order Id", DataType="string",  NewValue="1001"});

            _items.Add(new InspectionItem() { SubCategory1 = "cat1", Id = "CustomerName", Name = "CustomerName", DataType = "string", NewValue = "Maria" });

            _items.Add(new InspectionItem() { SubCategory1 = "cat2", Id = "OrderId", Name = "Order Id", DataType = "string",  NewValue = "1002" });

            _items.Add(new InspectionItem() { SubCategory1 = "cat2", Id = "CustomerName", Name = "CustomerName", DataType = "string", NewValue = "Peter" });

            _items.Add(new InspectionItem() { SubCategory1 = "cat3", Id = "OrderId", Name = "Order Id", DataType = "string", NewValue = "1002" });

            _items.Add(new InspectionItem() { SubCategory1 = "cat3", Id = "CustomerName", Name = "CustomerName", DataType = "string", NewValue = Adam});

My ViewModel has access to the data both ways; as one big collection and as groups of InspectionItems.  I can create the columns in the code behind, but I can't make the cell template work for the binding.

        public IEnumerable<IGrouping<string, InspectionItem>> Groups

        {

            get { return _items.GroupBy(item => item.SubCategory1);}

        }

My question is how can I bind the grid to create  2 columns with 3 rows each (one for each SubCategory1).  This is very easy in a gridview, but to make it work I use a CollectionViewSource which I don't have here.

And then in the xaml:

        <DataTemplate x:Key="InspectionItemStringTemplate" x:DataType="local:InspectionItem">

            <local:InspectionItemPresenter2  InspectionItemId="{x:Bind Id, Mode=OneWay}"                                                                    

                                        InspectionItemName="{x:Bind Name, Mode=OneWay}" x:Phase="0" >

                <local:InspectionItemPresenter2.InspectionItemContent>

                    <TextBox Text="{x:Bind NewValue,Mode=TwoWay}"   x:Name="NewValueTextBox" />

                </local:InspectionItemPresenter2.InspectionItemContent>

            </local:InspectionItemPresenter2>

        </DataTemplate>

        <syncfusion:SfDataGrid x:Name="dataGridTest1"  AutoGenerateColumns="False" 

            ItemsSource="{x:Bind Groups}"  CellTemplateSelector="{StaticResource InspectionItemTemplateSelector}" />

Attachment: App1_6c11753.zip

[Jayapradha S]

Hi Deanna,

Thank you for your update.

You can add a new column in code behind and you can set the CellTemplate  like below,

private void Sfdatagrid_Loaded(object sender, RoutedEventArgs e)

        {

            viewModel = this.sfdatagrid.DataContext as ViewModel;

            this.sfdatagrid.ItemsSource = viewModel.EmployeeDetails;

            this.sfdatagrid.Columns.Add(new GridTextColumn() { MappingName = "EmployeeID", CellTemplate = App.Current.Resources["cellTemplate"] as DataTemplate });
        }

Find the sample below,

Sample Link: http://www.syncfusion.com/downloads/support/forum/123630/ze/UWP-2059594062

Regarding query: My question is how can I bind the grid to create  2 columns with 3 rows each (one for each SubCategory1).  

We couldn’t get your requirement clearly. Could you please share it clearly. It would be helpful for us to provide a better solution.

Regards,
Jayapradha

[Deanna Delapasse]

It's ok, you already answered the other part of the question.  Reading your EmployeeDetails example I have another question.  What if there were these classes:

class Attribute {

   string attName;

   string attValue;

}

EmployeeDetails {

   Attribute A1 {attName="EmployeeID"; attValue="12345"}

}

Is it possible to modify these lines from your example to bind at the A1.attValue level into the EmployeeID column?

this.sfdatagrid.ItemsSource = viewModel.EmployeeDetails;

this.sfdatagrid.Columns.Add(new GridTextColumn() { MappingName = "EmployeeID", CellTemplate=App.Current.Resources["cellTemplate"] as DataTemplate });

thanks again!

[Jayapradha S]

Hi Deanna,

Thank you for your update.

Yes. It is possible to bind the attValue Name to the CustomerName Column by using ComplexProperty with DisplayBinding. We have prepared a sample for your reference.

Code Example:

private void Sfgrid_Loaded(object sender, RoutedEventArgs e)

        {          

            sfgrid.ItemsSource = viewModel.MyProperty;

            Binding disBinding = new Binding();

            disBinding.Path = new PropertyPath("NameAttr.Name");

            sfgrid.Columns.Add(new GridTextColumn() { MappingName = "CustomerName", DisplayBinding = disBinding, CellTemplate = App.Current.Resources["cellTemplate"] as DataTemplate });
        }

Sample Link: http://www.syncfusion.com/downloads/support/forum/123630/ze/SfDataGrid_ComplexProperty-152222226

Regards,
Jayapradha