RadDataGrid rendering issues

[byrialsen]

Recently I started using RadDataGrid and it will be a vital part of my LOB application. I love the grid and its functionality, but my eyes are a little annoyed by some of the rendering. I have attached a screendump from the "UI for UWP Demos" that shows some of these issues.

• Most of the times selection border is not show at the right when row is selected (actually not an issue on the screendump)
• In generel row selection border is not shown consistent if cells contains graphics etc.
• The scroller seems to be hidden behind GroupHeaders.

Are there any plans to look into such rendering issues. I assume others have seen this behavior also.

Thanks in advance
/Paw

[APopatanasov]

@byrialsen The observed appearance of the image is caused by the image itself and by the example. What I can suggest you in order to visualize it as expected is to change the Height of the image. You can also consider changing the height of the Row using the RowHeight property of the DataGrid in order to achieve the desired rendering.

About the ScrollViewer it is implemented in such way because the frozen Group headers should always be on top of the content the ScrollViewer has. I agree that could be improved, however currently the Framework prevent us from visualizing the frozen header in any other way - if the ScrollViewer goes above the frozen panel the control of the ScrollViewer will be on top of it as well.

I hope the provided information is helpful for you.

[byrialsen]

FYI...

...RowHeight does not fix anything in my own grid example, but changing the image (in my example colored rectangle) margin does fix the issue except first and last row. They seem to have smaller height than the others. (Please check the new screendump)

Additional you can also see in the screendump that vertical lines are drawn a bit inconsistent.

[APopatanasov]

@byrialsen In the example with the Dasboard I was not able to observe the demonstrates visualization issue:

Maybe you should add a bigger Margin on the bottom to achieve a better layout for the Image? If it doesn't help please provide me a sample project that demonstrates your exact setup of the DataGrid.

[byrialsen]

Hi.

Weird, I just open the "UI for UWP Demos" from the Store and I see the problem right away.

But looking at your screendump I assume you have added some extra margin/rowheight as you have space in top/bottom of each rows image. But if you zoom in on your screendump I can see that last row has less space in bottom compared to top. In the first row I guess you see the opposite. And all the middle row has the same space in top/bottom. It believe the behavior is hidden inside the control, and maybe kind of hard to fix from the outside.

[APopatanasov]

@byrialsen Some of the inappropriate layout of the cell is caused by the CellContentTemplate in my example. Inside the template there is a TextBlock whose Margin is affecting the layout:
<StackPanel Orientation="Horizontal"> <Image Source="{Binding PictureSource}" Width="96" Margin="5, 5, 0, 5"/> <TextBlock Text="{Binding ProductName}" VerticalAlignment="Center" Margin="8"/> </StackPanel>

I agree that when selection is made in the first and last row there is a little difference between the top and bottom. I believe this is caused by the way the selection border is placed around the row - in same way it covers a bigger part of the cell than expected. I will mark that issue as a bug. If you are interested on working on it you can check the arrange logic of that decorations in the following class:
https://github.com/telerik/UI-For-UWP/blob/master/Controls/Grid/Grid.UWP/View/Layers/XamlDecorationLayer.cs

Here the borders are measured and arrange. If you are able to find the issue in the mechanism you can make a pull request with a fix. If everything is fine with it I will merge it.

Thanks for you assistance and bringing this issue to our attention.