Some question about Grid Tree Control

[J.T]

1. How to display some BitmapImage in Grid Tree Control(not only in the node column)?

2. I want to change the Foreground of some cells, I do like that:
gridTreeControl1.Model[1, 2].Foreground = Brushes.Yellow;
gridTreeControl1.Model[0, 2].Foreground = Brushes.AliceBlue;

but when I select these cells, the Foreground is change back.

3. When initialize the Grid Tree Control，I want to just display the highest levle node, I don't know where add the code: gridTreeControl1.CollapseAllNodes();

4. The control apply the property：AllowDragColumns. After drag and drop the column, I need to catch the drop event,because I need to sent some message to server. How can I do that?

[Ganesan K]

Hi,

Thanks for using Syncfusion products.

For #1,

I am not clear with your requirements, can you please provide some more details

Also below are some code snippets for display the Bitmap image.







void InternalGrid_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
{
if (e.Style.CellType == "ImageCell")
{
Image image = new Image();
if (e.Style.Text != "")
{
var bitmapImage = new BitmapImage(new Uri(e.Style.Text, UriKind.Relative));
image.Source = bitmapImage as ImageSource;
e.Style.Image = image;
}
}


For #2, You can set the style info using QueryCellInfo event as shown below.

treeGrid.InternalGrid.QueryCellInfo += new GridQueryCellInfoEventHandler(InternalGrid_QueryCellInfo);

void InternalGrid_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
{
if (e.Cell.RowIndex == 1 && e.Cell.ColumnIndex == 2)
{
e.Style.Foreground= Brushes.Yellow;
}
}

For #3,

You can use treeGrid.Loaded event for this.

treeGrid.Loaded += new RoutedEventHandler(treeGrid_Loaded);

void treeGrid_Loaded(object sender, RoutedEventArgs e)
{
treeGrid.CollapseAllNodes();
}

#4, For this You need to listen the QueryAllowDragColumn event like below

treeGrid.InternalGrid.QueryAllowDragColumn += new GridQueryDragColumnHeaderEventHandler(InternalGrid_QueryAllowDragColumn);

void InternalGrid_QueryAllowDragColumn(object sender, GridQueryDragColumnHeaderEventArgs e)
{
if (e.Reason == GridQueryDragColumnHeaderReason.MouseUp)
{
MessageBox.Show("Dropped");
}
}

Download the workaround sample in the following location.

http://www.syncfusion.com/uploads/redirect.aspx?file=GTCSample_516421cc.zip&team=development

Please let us know if you need any more details.

Thanks
Ganesan

[J.T]

Thanks, that's very fast response. It's perfect.

There are some new questions。

1. Can I fix the size of Image?

When the size of the cell is changing, the Image is changing too. I hope to fix the size of Image.

2. How can I make the Image display in the center of the cell?

[Mohamed Suhaib Fahad A.]

Hi,

1) Fixing up image size,

We have recently added up an ENUM property that would let you specify if the image has to stretch or just stay with the default values.

2) Displaying Image at the center of the cell,

As of now, we only have to set the ImageMargins to specify the location of the image. This is because the Image present in the cell will be always present, even for the different cell types present with the Grid. You can check it out with code as given below,

double widthMargin = (grid.Model.ColumnWidths[0] - 16) / 2;
double heightMargin = (grid.Model.RowHeights[0] - 16) / 2;
grid.Model[0, colIndex].ImageMargins = new CellMarginsInfo(widthMargin, heightMargin, widthMargin, heightMargin);

Please let me know if you need any more details.

Thanks,
Fahad

[J.T]

Thanks for the response.

I have a question about the grid data control

There are two grid data control in one form, I want to drag one row from one control to another, Can i do that?

[Mohamed Suhaib Fahad A.]

Hi JT,

We have a sample that shows dragging row from one grid to the other,

http://www.syncfusion.com/uploads/redirect.aspx?&team=support&file=sample1624073636.zip

Please let me know if this helps.

Thanks,
Fahad

[J.T]

Thanks for the response.

I have a new question about the grid data control

Can the grid data control display like a card table?

[Ganesan K]

Hi JT,

Thanks for using Syncfusion products.

There is currently no direct support for Card Table in our WPF grids. But, you can probably use a cell template to get this effect with our current WPF library.

Here is a sample on using a template to do arbitrary multi row layouts. The idea is to define a Grid layout holding UIElements in a template.

http://www.syncfusion.com/uploads/redirect.aspx?&team=support&file=CardLayout-1293660794.zip

Below is a some information on the sample.

1) The Photo field in the Northwind database is a ole picture binary stream. Add a renderer class to handle displaying such fields in a grid, GridCellBitmapRenderer.

2) Also added a derived Image class, ImageBMP, that will display such picture fields through its BinaryBMP dependency object.

3) The code is written to work with 7.3.0.32. To run with 7.4, the code in Model_QueryUnboundColumnValue needs to be tweaked

void Model_QueryUnboundColumnValue(object sender, GridDataQueryUnboundColumnCellEventArgs args)
{
if (args.UnboundColumn.MappingName == uniqueName)
{
//use this code for 7.4 code base
//GridDataRecord rec = args.Record as GridDataRecord;
//args.Style.CellValue = rec == null ? args.Record : rec.Data;

//use this code for 7.3 code base
args.Style.CellValue = args.Record;

args.Style.CellType = cellTypeTemplateCell;
args.Style.CellTemplateKey = templateName;
args.Style.Background = Brushes.LightGray;
args.Handled = true;
}
}

4) The sample comes with 3 layouts in addition to the default GridDataControl. To create a layout, you define a DataTemplate holding a Grid that defines the location of the laid out cells as well as the UIElements in the cells.

Please let us know if you need any more details.

Thanks
Ganesan

[J.T]

Thanks for the response.

I have a question about the Grid Tree Control

When initialize the Grid Tree Control. It seems I need to get three levels' data. It is too inefficient for our project.

I hope only get the data of highest level when initialize(it look like collapse all nodes). then set a property to decide wheather the node has ChildList. After initial，user click the “+” flag of the highest level node，then the control get the second level data. Can I do that

Sorry for my poor English.

[Mohamed Suhaib Fahad A.]

Hi,

The GridTreeControl is exactly implemented for these scenarios, You can have N levels configured for your Grid, The below event is used to request the inner levels when the nodes are expanded,

private void treeGrid_RequestTreeItems(object sender, GridTreeRequestTreeItemsEventArgs args)
{
//when ParentItem is null, you need to set args.ChildList to be the root items...
if (args.ParentItem == null)
{
//get the root list - get all employees who have no boss
args.ChildList = employees.GetReportees(-1); //get all employees whose boss's id is -1 (no boss)
}
else //if ParentItem not null, then set args.ChildList to the child items for the given ParentItem.
{ //get the children of the parent object
Employee emp = args.ParentItem as Employee;
if (emp != null)
{
//get all employees that report to the parent employee
args.ChildList = employees.GetReportees(emp.ID);
}
}
}

You can also check out the samples located in our install,

Documents\Syncfusion\EssentialStudio\7.4.0.20\WPF\Grid.WPF\Samples\3.5\WindowsSamples\Grid Tree Control

Please let me know if you need any more details.

Thanks,
Fahad

[J.T]

Sorry, It seems I don't clearly express what I mean，I express it again in th attachment, please see it again.



Some questions _c1a15fb3.rar

[Ganesan K]

Hi,

Sorry for the delay in getting back to you.

Regarding #1, For taking the data of the Expanded level, You can use InternalGrid_ExpandStateChanged event like follows

void InternalGrid_ExpandStateChanged(object sender, GridTreeNodeEventArgs e)
{
if (e.Action == GridTreeNodeActions.Expanded)
{
var parentNode = e.Node as GridTreeNode;
var childNodes = parentNode.ChildNodes;
}
}

Download the workaround sample from the following location.

http://www.syncfusion.com/uploads/redirect.aspx?&team=support&file=GTCSample-329596821.zip

Regarding #2, It seems like an issue. Please create an incident for this. Our development team will fix it.

Regarding #3, We can achieve this by using the following steps.

1.Create a flag for the each column.

2.Implement the INotifyPropertyChanged for the Data object.

3.set the ConditionalFormatting according to the Flag value changed in OnPropertyChanged event.

Download the workaround sample from the following location.

http://www.syncfusion.com/uploads/redirect.aspx?&team=support&file=GDCCF-800360176.zip

Please let us know if you need any more details.

Thanks
Ganesan

[Amitha]

Hi,

I am trying my best since morning to fix the below issue where i need a Grid Tree control to display an image along side a text in cells of a particular row.I am setting this in the Query Cell Info and based on the key,i try to set the Style of the Cell with the image.I am doing as below.But what ever i try,the Image comes in a Bloated way and stretches along with the column.The image size is small but when it is displayed in the cell,it is showing huge and expanded.What am i doing wrong here

Image newImg = new Image();

BitmapImage mbitmap = new BitmapImage();

mbitmap.BeginInit();

mbitmap.UriSource = new Uri(@"C:\Cash_Monitor_CodeBase\a490560_CM4.3\vob_fi_trading\src\applications\FMRCo.Fi.CashMonitor\FMRCo.Fi.CashMonitor\Resources\warning.png");

mbitmap.EndInit();

newImg.Source = mbitmap;

newImg.RenderSize = new Size(2, 2);

style.ImageMargins = new CellMarginsInfo(0, 2, 100, 2);

style.ImageList = new System.Collections.ObjectModel.ObservableCollection<Image>(new List<Image>() { newImg });

style.ImageIndex = 0;

style.ImageContentStretch = ImageContentStretch.Absolute;

style.Image.Stretch = Stretch.None;

[Shakul Hameed M]

Hi Amitha

 

Thank you for contacting Syncfusion support,

 

We have analyzed your query and we could find that you have set the ImageContentStretch to absolute. If we set this as absolute, then our GridDataControl renders the image by using the Exact Image Size(Pixel). Here, I recommend you to use the  ImageContentStretch.Uniform  to achieve the requirement.

 

Please refer the below code snippet for reference:

 

Code Snippet:

void InternalGrid_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)

        {

            if (e.Style.RowIndex == 3)

           {

                Image image = new Image();

                BitmapImage mbitmap = new BitmapImage();

                mbitmap.BeginInit();

                mbitmap.UriSource = new Uri(@"image location");

                mbitmap.EndInit();

                image.Source = mbitmap;

                image.RenderSize = new Size(2, 2);

                e.Style.Image = image;

                e.Style.ImageMargins = new CellMarginsInfo(0, 2, 100, 2);

                e.Style.ImageIndex = 0;

                e.Style.ImageContentStretch = ImageContentStretch.Uniform;

                e.Style.Image.Stretch = Stretch.Uniform;

            }     

        }

 

We have created the sample based on your requirement and you can find the sample from the below location:

 

Sample: Image.zip

 

Please let us know, if you have any query.

 

Thanks,

Shakul Hameed