Custom Column Binding Confusion

[Marco]

Hi Telerik Team,

I create some custom columns and observed some strange behavior. Many columns use the same custom column with different values (bindings) but sometimes show the same values, especially when scrolling. So I use the CustomColumn example to investigate further.

I can reproduce this 100%. Column2 switches to the binding from Column1. I attached a sample project + video.

I can "solve" this problem by setting the Binding every time the CreateCellElement method is called. BUT this happends every time a value changed and it is used for a stock exchange software, were values changing a lot so I believe it can be a performance issue.

if (bar == null)
{
    bar = new RadProgressBar();
    bar.Height = 20;
    cell.Content = bar;
}

bar.SetBinding(RadProgressBar.ValueProperty, this.DataMemberBinding);

Is this a bug? Do I understand this wrong? Why is the cell "created" on every value change?

PS: the real grid has about 100 columns and the CustomColumns had multiple Bindings also to DependencyProperties wich had to be constructed every time.

regards,
marco

[Martin Ivanov]

Hello Marco,

The described behavior is expected and it appears because of the built-in UI virtualization feature of RadGridView. Basically, the containers (like row and cell visuals) are re-used by the items brought into the viewport. So, initially you are giving the cell visual the RadProgressBar content, but afterwards the same cell visual could be responsible for another cell in another column. 

To achieve your requirement you will need to avoid this type of caching code and instead create the element in the CreateCellElement and CreateCellEditElement each time they are called. In your case, you can only remove the usage of cell.Content from the CreateCellElement method override. Here is an example of the modified code:

public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem)
{
	var bar = new RadProgressBar();
	bar.Height = 20;
	bar.SetBinding(RadProgressBar.ValueProperty, this.DataMemberBinding);
	return bar;
}

This is how the CreateCellElement method should be used. If you want to implement some kind of caching you will need to link the cached visual elements with the underlying data item and column. However, this will be quite complex to implement and also hard to maintain. Especially, if you compare it against the benefits it will bring. This should not improve the performance noticeably because the cell itself will be redrawn when the CreateCellElement method is called.

If you need to improve the performance, I would recommend you to read the performance Tips and Tricks article.

I hope this information helps. If you have other questions, please let me know.

Regards,
Martin Ivanov
Progress Telerik

[Marco]

Thank you for the clarification!

regards,
marco

[Marco]

Hello Martin,

one thing is still not clear for me: why is the CreateCellElement method called on every ValueChange? Even when the cells are in View. So the DataBinding make no sense!?

In my case the customer views a lot of cells on ~9 monitors with stock exchange values changing multiple times within a second, so there is a performance impact I think.

regards, marco

[Martin Ivanov]

The CreateCellElement is executed when when the property value bound to DataMemberBinding is changed. This happens to ensure that the UI meets the new value. In your case, the call is not needed, but there is no proper mechanism to disable this behavior. One way to get the desired result could be to remove the DataMemberBinding setting of the column and bind the ProgressBar manually to the data item. However, this way you will lose the ability of the column to sort and filter. I've attached a small sample showing this approach. I hope it helps.