WPF Toolkit DataGrid - rows overlapping (row height problem)

Question

I have a DataGrid with some template columns that contain another DataGrid. My problem is that if some rows have a lot of content in them their height doesn't adjust so the whole content is visible, but rather it's cut off, giving the impression that the rows overlap. However, as soon as I add a new row to the grid or add a new row to the mini-grid inside one of the main grid's rows, the layout gets updated and the row heights are resized correctly.

So the problem is only when loading the grid the first time.

Is there a way to force the grid to size the rows heights to their content?

Thanks

Answer 1

I had some serious trouble with this (bug?) today, so I'll share what I tried and what almost worked... (And hope that someone knows an actual fix)

In my case the bug only appeared when there were 10 or more rows. Out of the rows, ten first rows would in some cases have too small height for the contents. (I first thought that the nine items were drawn on top of each other, which was stupid of me.) There are quite many columns, so there's a scrollbar. Clicking on the scrollbar resizes the heights to proper values.

Some things that in my experience do not work:

• Changing virtualization settings had no effect.
• InvalidateVisual() and InvalidateArrange() don't work. Tried both datagrid and its parent.
• Changing the height of datagrid did not work (although I'm not quite happy with my tests here)
• Forcing the datatemplates of the cells to a specific size did not have an effect.
• Placing the datagrid inside a scrollviewer (so that the datagrid would have all the space it could ever need...) did not work.

However:

The one thing (I found) that the datagrid seems to respect is MinRowHeight-setting, so now I've got there a moronic value and I'm hoping that this won't cause problems later on when the datatemplates are modified.

Answer 2

I experienced the same bug with the DataGrid that comes with the .NET Framework 4.0. Under certain circumstances (no horizontal scrollbar, window is bigger than a specific size, ...) the rows were not displayed correctly but placed on top of another (with a small offset), so just the last row was completely visible.

First I tried to perform a UI-action automatically after the rows are filled in the DataGrid, so the layout is updated. But then I found out, that you can just re-render the control using the dispatcher, which, in my case, fixed the bug eventually.

My whole code-change basically is this (right after filling the DataGrid):

Action emptyAction = delegate() { };
myDataGrid.Dispatcher.Invoke(DispatcherPriority.Render, emptyAction);

Answer 3

I'm not sure what is this, but you could try call InvalidateVisual(), some time later, when element is loaded. This forces complete new layout pass...

Answer 4

The DataGrid in my UserControl is doing the same thing. In this example, there are only 32 rows of data with five DataGridTemplateColumns consisting of an <Image> and four <TextBlock>s.

My control shows search results, if I rerun the same search it does not always do this. In addition, the cropping only occurs, roughly, on the first pageful of results. Rows further down are ok.

Using InvalidateVisual() does not help.

If anyone has any ideas on how to solve this or can indicate if this is a known issue with that control, I'd be interested in hearing about it.

Answer 5

In my case I just needed to add the first row before the loop adding extras.

I wanted 4 columns and n rows like this:

    private void InitToList() {
        Grid wp = new Grid();
        wp.Margin = new Thickness(0);
        wp.ColumnDefinitions.Add(new ColumnDefinition());
        wp.ColumnDefinitions.Add(new ColumnDefinition());
        wp.ColumnDefinitions.Add(new ColumnDefinition());
        wp.ColumnDefinitions.Add(new ColumnDefinition());
        wp.RowDefinitions.Add(new RowDefinition());  // adding this fixed the overlapping

        int curCol = 0;
        int curRow = 0;
        foreach (string name in toIds) {
            if (curCol >= wp.ColumnDefinitions.Count()) {
                wp.RowDefinitions.Add(new RowDefinition());
                curCol = 0;
                curRow++;
            }
            CheckBox cb = new CheckBox();
            cb.Name = String.Format("{0}Check", name.ToLower().Replace(" ", ""));
            cb.IsChecked = false;
            cb.Margin = new Thickness(5, 5, 5, 5);
            cb.Content = name;

            Grid.SetColumn(cb, curCol);
            Grid.SetRow(cb, curRow);
            wp.Children.Add(cb);
            curCol++;
        }