Rowdetails on insert row

[ed cooke]

Hi, I am wondering how I would go about showing the details row when you click on the "Click here to add new item". It shows the + sign next to the row like a normal row, but it never shows the details. I need this because of the massive amount of data (about 20 fields) that are required on each new record. If I can't do this, do you have any suggestions on how to use the "Add New Item row" to bring up a new window with the all the required fields?
Thanks in advance,
Ed

[Rossen Hristov]

Hello ed cooke,

Currently, this is not available out-of-the-box, but we will think about adding this feature. Meanwhile, I have prepared and attached a sample project that does this. Here is how I did it:

<UserControl x:Class="NewRowRowDetails.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
             xmlns:my="clr-namespace:NewRowRowDetails"
             mc:Ignorable="d" d:DesignHeight="700" d:DesignWidth="700">
    <UserControl.Resources>
        <my:MyViewModel x:Key="MyViewModel"/>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot"
          Background="White"
          DataContext="{StaticResource MyViewModel}">
        <Grid.Resources>
            <DataTemplate x:Key="RowDetailsTemplate">
                <StackPanel Orientation="Vertical">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Name:" Width="100"/>
                        <TextBox Text="{Binding Name, Mode=TwoWay}" Width="100"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Established:" Width="100"/>
                        <TextBox Text="{Binding Established, Mode=TwoWay}" Width="100"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Capacity:" Width="100"/>
                        <TextBox Text="{Binding StadiumCapacity, Mode=TwoWay}" Width="100"/>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>
        <telerik:RadGridView Grid.Row="0"
                             ShowInsertRow="True"
                             Name="clubsGrid"
                             ItemsSource="{Binding Clubs}"
                             AutoGenerateColumns="False"
                             RowDetailsTemplate="{StaticResource RowDetailsTemplate}"
                             Margin="5">
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
                                            Header="Est."
                                            DataFormatString="{}{0:yyyy}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"
                                            Header="Stadium"
                                            DataFormatString="{}{0:N0}"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;
using Telerik.Windows.Data;
using System.Collections;
using System.Collections.ObjectModel;
using Telerik.Windows.Controls.GridView;

namespace NewRowRowDetails
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.clubsGrid.AddingNewDataItem += new EventHandler<Telerik.Windows.Controls.GridView.GridViewAddingNewEventArgs>(clubsGrid_AddingNewDataItem);
        }

        void clubsGrid_AddingNewDataItem(object sender, Telerik.Windows.Controls.GridView.GridViewAddingNewEventArgs e)
        {
            e.Cancel = true;
            Club newClub = new Club();
            ObservableCollection<Club> itemsSource = (ObservableCollection<Club>)this.clubsGrid.ItemsSource;
            itemsSource.Add(newClub);
            this.clubsGrid.CurrentItem = newClub;

            this.clubsGrid.ScrollIntoViewAsync(newClub, this.OnNewClubAdded);
        }

        private void OnNewClubAdded(FrameworkElement row)
        {
            ((GridViewRow)row).DetailsVisibility = Visibility.Visible;
        }
    }
}

The whole project is attached. I hope this helps.

Kind regards,
Ross
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[codeputer]

I wish I had read this thread a few days ago!

I'm wondering why the AddNewRow section of the grid does not honor the same rowdetailstemplate of all the other rows?  I suspect the RowDetailsTemplate came later than the AddNewRow, and hence the AddNewRow only takes into account the "columns" of the grid, rather than the "RowTemplate". 

Why not add a switch that allows one or the other?  If there is a RowDetailsTemplate - the switch would either visualize the  "Columns" or the Row Details Template.

Just a thought...

R

[Rossen Hristov]

Hi codputer,

I have logged your feature request in our PITS system. You can vote for it here.

Best wishes,
Ross
the Telerik team

[bwood]

This works good but I can't get the Add button to work. It is staying disabled when I enter into Add mode.


<telerik:RadButton x:Name="btnAdd" Content="Add" HorizontalAlignment="Left" Command="telerikGrid:RadGridViewCommands.CommitEdit" CommandTarget="{Binding ElementName=rgv1}"
                                        Width="100" Height="26" Margin="10" />

[Rossen Hristov]

Hello ksieburg,

With the Q3 Release row details will be supported for the new row out of the box.

Kind regards,
Ross
the Telerik team

[Par Developer]

Thanks, that helped to open the row details, BUT: the details are not on the screen. The user still has to scroll down to see the details. What happens is: the new row is added and the grid scrolls down to make it visible, so the new row is exactly at the bottom of the screen. Then the grid opens the details, which go right below the screen, so is not visible. How can I make the details also visible programmatically? The idea is that the user clicks on the "Add" button, and is immediately able to enter data in the row detail without the need to scroll down.

Thanks,
Serge.

[Rossen Hristov]

Hello Par Developer,

When the 2010 Q3 Release is out in about a week, the new row will have its row details shown out of the box and you will no longer need to do this manually.

Therefore, you will not have this problem once you upgrade to the 2010 Q3 version since the new row will always stay on top when you use the property ShowInsertRow=True.

I hope this helps.

Greetings,
Ross
the Telerik team

[neo e]

is there a way to bind a DetailVisibity to a viewmodel property?

[Vlad]

Hi,

 Indeed you can do that. If you want to bind it to boolean property you will need to use some boolean to visibility IValueConverter - like our own BooleanToVisibilityConverter.

Greetings,
Vlad
the Telerik team

[Michael Gaigg]

Thanks, that was very helpful.

[Nathan]

Hi

I'm using the Q3 2010 and when I add a new row, the RowDetailsTemplate is still not expanded.

Is this the default behaviour or is there some property I have to set?

Thanks

[Maya]

Hi Nathan,

Generally, the RowDetails should be visible in case you are inserting new items by setting the ShowInsertRow property to "True". However, we encountered an issue in similar scenarios that have recently been fixed. How do you add the items ? Do you set the RowDetailsVisibilityMode property or you are using the GridViewToggleRowDetailsColumn ? Furthermore, may you try your application with one of our Latest Internal Build ?

All the best,
Maya
the Telerik team

[Nathan]

I add the Items using the GridViewToggleRowDetailsColumn and I have the latest internal build (2010.3.1414.1040). Should it work out of the box then?

[Maya]

Hello Michael Gaigg,

The expected behavior when having GridViewToggleRowDetailsColumn should be as follows:
1.  ShowInsertRow = "True", RowDetailsVisibilityMode="VisibleWhenSelected"/"Visible" - the RowDetails should be visible for the new row;
2. ShowInsertRow = "True", RowDetailsVisibilityMode="Collapsed" - the RowDetails should not be visible for the new row;
3. ShowInsertRow = "False", RowDetailsVisibilityMode="Collapsed" - the RowDetails should not be visible for the new row;
4. ShowInsertRow = "False", RowDetailsVisibilityMode="VisibleWhenSelected"/"Visible" - the RowDetails should not be visible for the new row;

Greetings,
Maya
the Telerik team

[Nathan]

ok that spells things out loud and clear thanks