Getting the NewRowPosition cake and eating it too…

Ah…a double post day!  I just bumped into this today so I figured I’d write about it in real time…oh yeah…from Bing to my brain to WordPress…

So I’ve been building this super duper massively all encompassing wonder app that’s supposed to be able to, you know…like time travel and crap…ok, so that’s a stretch goal feature…but it pretty much does everything else.  I’ve been using a Visual Studio WPF app as a template and using Telerik UI for WPF controls for pretty much everything else.  The specific control I’m blogging about is a RadGridView control.  This info should also apply to the Silverlight version of the control with the same name…but I’ve never actually used it to test so it’s just theoretically the same since it appears they both derive from the same base code…so…it should work.  *shrugs*

One of the things this mega app does is add rows to a table in a database…woah!!!!  Unheard of…I know.  Now what I will say up front is that the RadGridView made it super easy to add a row…it was very quick to implement and easy to understand.  Here’s what my little test grid looks like with just the very minimal default code.  Add functionality is technically enabled, but there’s no visible controls to use it (you can use the keyboard to put the grid into insert mode, but I’m not going to go into that here).

Example RadGridView XAML Code (sorry if the formatting looks bad, doing the best I can…feel free to give some suggestions on how to make it look better):
<telerik:RadGridView    AutoGenerateColumns="False"
                        ColumnWidth="*"
                        x:Name="AddNewRowExampleRadGridView">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject1}"
                                    Header="Property 1" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject2}"
                                    Header="Property 2" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject3}"
                                    Header="Property 3" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject4}"
                                    Header="Property 4" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject5}"
                                    Header="Property 5" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

Example RadGridView:
RadGridView-AddNewRowDefault

What was a little tricky was figuring out how to fiddle with it’s default UI that it displays for adding a new row.  Here’s what it looks like when adding in the property needed to enable the default built in UI.

XAML Code (just posting the additional parts):
<telerik:RadGridView    AutoGenerateColumns="False"
                        ColumnWidth="*"
                        NewRowPosition="Top"
                        x:Name="AddNewRowExampleRadGridView">

Example:
RadGridView-AddNewRowTop

You may or may not notice the additional “Click here to add new item” section under the column headers now.  Yup…that’s the default UI that comes along with the NewRowPosition property.  There’s also the values “Bottom” and “None” that you can use…”None” is the default value.

Personally I’m fine with the default, but the folks I’m making the app for didn’t like it and just wanted a button that would insert a new row when they were ready to do it rather than have the “Click here to add new item” row always taking up space on the grid.  Understandable…so what I first did was set NewRowPosition=”None” which makes sure the “Click here to add new item” row never shows up.  Then I added a button and wired it up to flip the grid into insert mode when clicked…I’m going to repost the entire example code now because I also added some RowDefinitions for the Grid container that ultimately contains the RadGridView.

XAML Code:
<Window x:Class="RadGridViewinator.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="RadGridView - Add New Row Example"
        WindowStartupLocation="CenterScreen"
        WindowState="Maximized">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <telerik:RadButton  Click="AddNewRowButton_Click"
                            Content="Add New Row"
                            Grid.Row="0"
                            Height="30"
                            HorizontalAlignment="Left"
                            Margin="5, 5, 5, 5"
                            Width="100"
                            x:Name="AddNewRowButton" />
        <telerik:RadGridView    AutoGenerateColumns="False"
                                ColumnWidth="*"
                                Grid.Row="1"
                                NewRowPosition="None"
                                x:Name="AddNewRowExampleRadGridView">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject1}"
                                            Header="Property 1" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject2}"
                                            Header="Property 2" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject3}"
                                            Header="Property 3" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject4}"
                                            Header="Property 4" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding PropertyFromYourBoundObject5}"
                                            Header="Property 5" />
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

C# Event Code for XAML Code Behind:
private void AddNewRowButton_Click(object sender, RoutedEventArgs e)
{
// calling .BeginInsert on a RadGridView flips it into insert mode

    AddNewRowExampleRadGridView.BeginInsert();
}

Example:
RadGridView-AddNewRowNoneWithButton

Yup…that’s the look they were wanting…however what quickly became obvious is that nothing happened when clicking the “Add New Row” button…and I’ll bet some of you are already figuring out why.  I still had the NewRowPosition=”None” set…so no matter if the grid was in insert mode or not, there was not going to be a UI displayed for doing the insert…and actually there’s 3 reasons why it doesn’t work yet.  I also still need wire up telling the grid what kind of new object to add to the grid by using the “AddingNewDataItem” event and then I need to tell the grid what to do with the new data after it’s been collected by using the “RowEditEnded” event.  Here’s what the code changes look like for the relevant pieces of code.

XAML Code:
<telerik:RadGridView    AddingNewDataItem="AddNewRowExampleRadGridView_AddingNewDataItem" 
                       AutoGenerateColumns="False"
                       ColumnWidth="*"
                       Grid.Row="1"
                       NewRowPosition="None"                        RowEditEnded="AddNewRowExampleRadGridView_RowEditEnded"
                       x:Name="AddNewRowExampleRadGridView">

C# Event Code for XAML Code Behind:
private void AddNewRowButton_Click(object sender, RoutedEventArgs e)
{
    AddNewRowExampleRadGridView.NewRowPosition =
        GridViewNewRowPosition.Top;
    AddNewRowExampleRadGridView.BeginInsert();
}

private void AddNewRowExampleRadGridView_AddingNewDataItem(object sender,
Telerik.Windows.Controls.GridView.GridViewAddingNewEventArgs e)

{
    // put whatever object you're binding your grid to here
    e.NewObject = new object();
}

private void AddNewRowExampleRadGridView_RowEditEnded(object sender,
Telerik.Windows.Controls.GridViewRowEditEndedEventArgs e)

{
    if (e.EditAction == GridViewEditAction.Cancel)
    {
        AddNewRowExampleRadGridView.NewRowPosition =
            GridViewNewRowPosition.None;
        return;
    }

    if (e.EditOperationType == GridViewEditOperationType.Insert)
    {
        // add e.NewData to the database
    }
    else
    {
        // update e.NewData in the database
    }

    AddNewRowExampleRadGridView.NewRowPosition =
        GridViewNewRowPosition.None;

}

If you notice in the above code behind, I added code to set the NewRowPosition back to “Top” just before I flip the grid into insert mode and then back to “None” when I’m finished to achieve the desired effect.  The rest of the implementation details will vary depending on what kind of object you’re using and how you’re binding to your data source…but this should paint the basic picture of how I managed to make my customers happy.  Hope it helps…enjoy!

Advertisements
Getting the NewRowPosition cake and eating it too…

One thought on “Getting the NewRowPosition cake and eating it too…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s