How display the correlation between filters by lines in DataFilter control.

[Dariush]

Hi everybody,

I'd like to  to display the correlation between filters in FilterControl. I managed it by path and resources and customizing it although I can't make it more clear since some properties in FilterViewModel are internal and don't have access to children and parent in some scenarios.

The picture is attached

Is there any smooth solution to do that?

Thanks

[Dilyan Traykov]

Hi Dariush,

It appears that for some reason the picture you reference was not attached:

To avoid any misunderstandings in the expected result, can you please try reattaching it or uploading it to a third-party service and providing a link?

Thank you in advance for your cooperation on the matter and apologies for the caused inconvenience.

[Martin Ivanov]

Hello Dariush,

The RadDataFilter control doesn't have a built-in lines visualization. To achieve this, you will need to draw lines manually. One way to do so is to add Line or Path controls on top of the control and update their geometry based on the parent-child correlation. It sounds like you are already doing something similar. I am afraid that currently, there isn't any good approach that I can suggest. However, if you tell me what part of the internal API stops you can take a look and see if I can give some ideas.

Regards,
Martin Ivanov
Progress Telerik

[Dariush]

Thanks for your comment,

The main problem is I can't recognize children of a node in deeper points to control the path control. Moreover, the FilterViewModel class members are internal and I can't access to some useful methods.

[Martin Ivanov]

You can use the FilterDescriptors collection of the RadDataFilter control to collected information about the different levels. For example, the collection can contain two type of descriptors - CompositeFilterDescriptor or FilterDescriptor. If the item is a CompositeFilterDescriptor, you can get its children using its FilterDescriptors collection. Otherwise (if FilterDescriptor), you've reached the bottom of the hierarchy. 

Here is an example that shows how to get the descriptors of the current level. You can repeat that action in a recursive method or another method that allows you traverse data trees. Then, based on the collected information, you can draw the lines.

var descriptors = this.dataFilter.FilterDescriptors
foreach (IFilterDescriptor descriptor in descriptors)
{
	if (descriptor is FilterDescriptor)
	{
		// this is a bottom level descriptor (it has no nested children)
	}
	else if (descriptor is CompositeFilterDescriptor)
	{
		// this descriptor has nested IFilterDescriptors
	}
}

 

[Dariush]

I tried that, But the main problem still exists.
Please have a look at the attached images. The main issue is drawing the red line.

[Martin Ivanov]

I can't tell what is the exact issue without getting familiar with your implementation. At this point the suggested APIs are the only entry points that I can suggest for getting the needed information.

In general, the drawing of this type of lines is not very straightforward task, and doing that in an encapsulated component where you don't have direct access over the UI generation makes it even harder. There are different approaches that you can use, but I can't guarantee that they are going to work properly. In my opinion, the ratio between the benefit of such visualization and the implementation/maintenance code and the possible visual glitches is not very good.

What you can do is to post a new feature in the feedback portal if you really believe that this is a must-have feature in the control.

In the meantime, here is an idea that you can try. It is not tested, but it may be worth exploring it. Basically, each time the control is loaded or a new filter is added, you can use the ChildrenOfType<T> extension method to get all the related visual elements. These are DataFilterPresenter for the filter elements and FilterControl for the "And" and "Or" operators. Then, you can get the bounds of each visual and group them by X position. This should give you information about the levels of the different filters. Then, you should be able to use this information in order to draw Line or Path elements in a separate Canvas panel place on top of the RadDataFilter element.

[Dariush]

Thanks for your answer. The problem is as exact as you said.  The main members ar internal and it makes that impossible to draw a line between two nodes with children.
The other way which worth to try is visualization of it. But it needs to have the location of each nodes.
Is there any way to find out the location (x,y) of each item?

[Martin Ivanov]

I've prepared a small example showing my idea. I hope it helps.

[Dariush]

Thanks you Martin. I got some ideas from your sample and the ask is almost done. The only problem is elated to EditorCreated event. I've called the connector method in this event but when new data filter is created the size information is not updated in that event yet.
The method works correctly. Currently I called the method in the mouse over vent which is not best practice. 
Would you look into the problem please?
I also attached the final result of the connector, I've done it with recursive and using Path element.

[Dariush]

And also the another problem is when the Datafilter part gets smaller size, the drawing stuff get out of the section. Please see the attached image.

[Martin Ivanov]

To fix the problem with the wrong lines when they are updated on EditorCreated event you can delay the execution of the custom code a bit. For example:

private void DataFilter_EditorCreated(object sender, EditorCreatedEventArgs e)
{
	Dispatcher.BeginInvoke(new Action(() =>
	{
		UpdateLines();
	}), (DispatcherPriority)3);
}

private void UpdateLines()
{
	this.linesCanvas.Children.Clear();
	CreateVerticalLines();
	CreateHorizontaLines();
}

About the second issue, I am not sure what it means that the DataFilter part gets smaller. Can you tell me what exactly does that mean?

Also, please keep in mind that this is a customization that is not part of the DataFilter and also it isn't well tested, so I can't guarantee that it will work properly in all expected scenarios.