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

1 Answer 85 Views
DataFilter GridView
Dariush
Top achievements
Rank 1
Iron
Dariush asked on 14 Dec 2022, 02:25 PM | edited on 03 Jan 2023, 09:53 AM

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
Telerik team
commented on 19 Dec 2022, 10:42 AM

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.

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 04 Jan 2023, 08:16 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Dariush
Top achievements
Rank 1
Iron
commented on 06 Jan 2023, 09:42 AM

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
Telerik team
commented on 10 Jan 2023, 01:40 PM

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
Top achievements
Rank 1
Iron
commented on 13 Feb 2023, 02:40 PM

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
Telerik team
commented on 14 Feb 2023, 10:50 AM

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
Top achievements
Rank 1
Iron
commented on 20 Feb 2023, 11:17 AM

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
Telerik team
commented on 23 Feb 2023, 11:12 AM

I've prepared a small example showing my idea. I hope it helps.
Dariush
Top achievements
Rank 1
Iron
commented on 13 Mar 2023, 09:23 AM

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
Top achievements
Rank 1
Iron
commented on 13 Mar 2023, 10:31 AM

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
Telerik team
commented on 16 Mar 2023, 08:59 AM

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. 

Tags
DataFilter GridView
Asked by
Dariush
Top achievements
Rank 1
Iron
Answers by
Martin Ivanov
Telerik team
Share this question
or