Many problems with row details

[Patrick]

Hello,
there are annoying problems when the row details is used in a GridView. These can be seen from the online demo for RadGridView:

1. Go to the last row of the GridView.
2. Open the row details (note that you had to scroll to see the content!!!)
3. Select the Performance Chart tab.
4. Scroll up then down: the Details tab is displayed.

In this scenario, there are two problems:

1. We have to scroll the grid after the row details is open in order to view it.
2. When the details are scrolled out of view, they are initialized again.

For the first problem, you should scroll automatically the grid so that the details are visible. if the details are too high, leave the original row to the top.

The second problem is more annoying: sometimes I had the row loading again without scrolling it out of view: for example, take the scroller at the right and move it gently to the top; suddenly the row details are reinitialized even if they are still displayed...
I think a good solution would be to have a EnableRowDetailsVirtualization property, that has a default value to true for compatibility purposes and, when set to false, will keep the details for each row and never reload them.

Patrick

[Maya]

Hi Patrick,

Generally, the element in row details is measured with infinity and that is why it is now scrolled up - since its height is unknown, the grid is not aware of how much to scroll.  
Considering the second issue, this is a result of the UI virtualization and the fact that the visual elements are recycled and reused. What you can do is to expose a property in your business object that will keep the selected index of the opened tab for each item. And since the DataContext of the RowDetails is the corresponding data item, you can easily bind the SelectedIndex of the tab control as follows:

<telerik:RadGridView.RowDetailsTemplate>
            <DataTemplate>
                <telerik:RadTabControl SelectedIndex="{Binding SelectedTabIndex, Mode=TwoWay}">
                    <telerik:RadTabItem Header="Tab1">
                        <telerik:RadButton Content="Button 1" Background="HotPink" Height="50" Width="250"/>
                    </telerik:RadTabItem>
                    <telerik:RadTabItem Header="Tab2">
                        <telerik:RadButton Content="Button 2" Background="Yellow" Height="50" Width="250" />
                    </telerik:RadTabItem>
                    <telerik:RadTabItem Header="Tab3">
                        <telerik:RadButton Content="Button 3" Background="Aquamarine" Height="50" Width="250"/>
                    </telerik:RadTabItem>
                </telerik:RadTabControl>
            </DataTemplate>
        </telerik:RadGridView.RowDetailsTemplate>

I am attaching a sample project illustrating the suggested approach.

Kind regards,
Maya
the Telerik team

[Patrick]

Hi Maya,
thank you for your response.
For the first problem, you can add an event handler to know when the layout of the row details is calculated and do the scrolling at this time.

For the second issue, it is not so easy in my case, because the user can modify some fields in the detail view and will lose his/her changes if it doesn't save them before scrolling. Nad its very annoying. In addition, the display of the row details makes a call to a web service to request additional information. If I can avoid this, it will diminish the load on the web service.
The only solution I see is to keep myself the UI part of each row details to restore it when the same row is opened again. It will be a huge thing to implement correctly and will complicate the grid view.
You have an EnableRowVirtualization property, why not define a EnableRowDetailsVirtualization property?

But, the row details should in any case not be loaded again while they are visible. After opening the details in the last row of the example, a small move of the scroller up reloads them even if they are displayed.

Patrick

[Vlad]

Hello,

 Row details are part of the row itslef. You cannot virtualize them separateley. On the other hand if your UI is TwoWay bound to your model you will never loose any values during scroll since they will be save immedaitelly. 

All the best,
Vlad
the Telerik team

[Patrick]

Vlad,
the fields are TwoWay bound, but the user has the option to Save or Cancel the changes, so the server is not updated until he/she presses the Save changes button. That's a requirement for the application.
Patrick

[Vlad]

Hello,

 If your data are bound to a model (in memory) your data will be updated in the model and later you can save or cancel changes.

Kind regards,
Vlad
the Telerik team

[Patrick]

Vlad,
when reinitialized, the row details exits from Change mode and returns to View mode.
In addition, the old data are saved in the row details to implement the Cancel changes option.
Patrick