Is it possible to bind a column of a GridTreeControl to more than one property?

[Hagit]

Is it possible to bind a column of a GridTreeControl to more than one property?

For example:

My tree displays a list of hierarchical objects of type 'My Item'. The first column which is the 'Name' column should be databinded to 3 properties of the 'MyItem'  class and display it as follows:

1. A checkbox that is binded to a Boolean property.
2. An image that its Source is binded to an Enum property and uses a converter to convert from the enum balue to a bitmap resource.
3. A textblock that is binded to a String property.

An example of how it should look can be seen in the png file I've attached.

Attachment: SelfReferencingTreeGrid_e8233f3a.zip

[Jayapradha S]

Hi Hagit,

Thank you for using Syncfusion products.

We have analyzed your query and you can add more than one property to a column by using DataTemplate and bind the property using QueryCellInfo Event. In QueryCellInfo Event, you can store the items to e.Style.CellValue2 as shown in the below code snippet,

Code Snippet:

<syncfusion:GridTreeColumn Width="200"   HeaderText="First Name" MappingName="FirstName"  >

                <syncfusion:GridTreeColumn.StyleInfo>

                    <syncfusion:GridStyleInfo CellType="DataBoundTemplate">

                        <syncfusion:GridStyleInfo.CellItemTemplate>

                            <DataTemplate>

                                <StackPanel Orientation="Horizontal">

                                    <CheckBox IsChecked="{Binding Style.CellValue2.CheckSelected}"/>

                                    <Border>

                                     <Image VerticalAlignment="Top" Height="30" Width="30" Source="{Binding Style.CellValue2.Image,

                                                                                                            Converter={StaticResource stringToImageConverter}}"/>

                                    </Border>

                                    <TextBlock Text="{Binding Style.CellValue2.FirstName}"/>

                                </StackPanel>

                            </DataTemplate>

                        </syncfusion:GridStyleInfo.CellItemTemplate>

                    </syncfusion:GridStyleInfo>

                </syncfusion:GridTreeColumn.StyleInfo>

            </syncfusion:GridTreeColumn>

  treeGrid.ModelLoaded += treeGrid_ModelLoaded;

  void treeGrid_ModelLoaded(object sender, EventArgs e)

        {

            treeGrid.Model.QueryCellInfo += Model_QueryCellInfo;

       }

  void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)

        {

            if (e.Style.CellType == "DataBoundTemplate")

            {

                var node = treeGrid.InternalGrid.GetNodeAtRowIndex(e.Style.RowIndex);

                if (node != null)

                {

                    var item = node.Item as PersonInfo;

                    e.Style.CellValue2 = item;

                    this.treeGrid.InternalGrid.RowHeights.DefaultLineSize = 50;

                  

                }

            }

        }

We have created a sample to achieve your requirement to adding more than one property to the column and please find the sample from the below location,

Sample Link: GridTreeSample.zip

Note: we don’t have the support to adding this column as left most column.

Kindly let us know if you need any further assistance on this.

Regards,

Jayapradha