RadGridView inside DataForm

[Louis Bouchard]

Hello,

Someone can share information about aRadGridView inside a DataForm.  It's a master (DataForm) and detail (RadGridView).  I wonder how to link theme.  The DomainDataSource have one filed in common (uniqueidentifier type).

I use a BusinessApplication with SL4.

Thanks for any help.

[Maya]

Hello Louis Bouchard,

Please give us some more details about your scenario and the way you want to use RadGridView inside a DataForm. Thus we would be able to provide you with a more suitable solution so that it meets your requirements.


Kind regards,

Maya
the Telerik team

[Louis Bouchard]

Hello Maya,

Well, from the database view, I have two tables, customers and orders.  In my DataForm, I can see my customers (one per page).  And I want to see (and manage) orders related to each of my customers.

So, I want in a RadGridView view orders of one customer at time.  When I press to the next button of the DataForm, I see the next customer and I want to see the ordrers of this customer in a RadGridView.

<toolkit:DataForm   Name="DataFormcustomers"  EditEnding="DataFormcustomers" BeginningEdit="DataFormcustomers" Background="Beige" Width="1024" CommandButtonsVisibility="Add, Cancel, Commit, Delete, Edit, Navigation" ItemsSource= "{Binding Data,  ElementName=customersDomainDataSource}"
AutoGenerateFields="False"  AutoCommit="False" AutoEdit="False" AddingNewItem="DataFormcustomers_AddingNewItem"  ContentLoaded="DataFormcustomers_ContentLoaded" Loaded="DataFormcustomers_Loaded" EditEnded="DataFormcustomers_EditEnded" DeletingItem="DataFormcustomers_DeletingItem" CurrentItemChanged="DataFormcustomers_CurrentItemChanged">
        <toolkit:DataForm.Header>
        <TextBlock Text="" FontSize="8"></TextBlock>
        </toolkit:DataForm.Header>
                <toolkit:DataForm.EditTemplate>
                <DataTemplate>
                            <Grid ShowGridLines="True">
                            <Grid.RowDefinitions>
                                    <RowDefinition Height="30" />
                                    <RowDefinition Height="30" />
                                    <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <toolkit:DataField Grid.Row ="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left">
                                    <TextBox Name="CustomerNo" Visibility="Collapsed" Width="0" Text="{Binding CustomerNo, Mode=TwoWay}" />
                            </toolkit:DataField>
                            <toolkit:DataField Grid.Row="0" Grid.Column="3" Width="0" Height="0">
                                    <TextBox Name="CustomerName" Visibility="Collapsed" Width="0" Text="{Binding CustomerName, Mode=TwoWay}"  />
                            </toolkit:DataField>
                            <toolkit:DataField Grid.Row="14" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Left">
                                        <telerik:RadGridView  x:Name="RadGridViewOrders"  ShowInsertRow="True"     HorizontalAlignment="Right" Margin="0,0,20,0"  MaxHeight="350" Height="350"  Width="800" ItemsSource="{Binding ElementName=ordersDomainDataSource, Path=Data, Mode=TwoWay}"  IsBusy="False" ShowGroupPanel="False" SelectionMode="Extended"  CanUserDeleteRows="True" CanUserInsertRows="True">
                                                <telerik:RadGridView.Columns>
                                                        <telerik:GridViewSelectColumn>
                                                        </telerik:GridViewSelectColumn>
                                                                <telerik:GridViewDataColumn x:Name="OrderId"  IsVisible="True"   Width="10" DataMemberBinding="{Binding OrderId, Mode=TwoWay}" >
                                                        </telerik:GridViewDataColumn>
                                                                <telerik:GridViewDataColumn x:Name="ProductId" Width="350" DataMemberBinding="{Binding ProductId, Mode=TwoWay, NotifyOnValidationError=True,  ValidatesOnExceptions=True}" >
                                                        </telerik:GridViewDataColumn>
                                                                <telerik:GridViewDataColumn x:Name="Qty" Width="350" DataMemberBinding="{Binding Qty, Mode=TwoWay, NotifyOnValidationError=True,  ValidatesOnExceptions=True}" >
                                                        </telerik:GridViewDataColumn>
                                                </telerik:RadGridView.Columns>
                                        </telerik:RadGridView>
                            </toolkit:DataField>
                            </Grid>
                </DataTemplate>
                </toolkit:DataForm.EditTemplate>
</toolkit:DataForm>

[Frank -]

Louis, I'm interested to see how this works for you.
I'm about to run into the same scenario as you. I have an EntitySet of Sites in my DataForm. The Sites Collection has another EntitySet with SiteModules. These SiteModules can differ from site to site and I want a RadGrid/RadGridView to display these as I cycle my Sites in the DataForm.
Also I need my RadGrid/RadGridView to contain text, pictures and a CheckBox on each row which I can edit.

I will post my solution and follow your thread, good  luck :)

[Louis Bouchard]

Hello Frank,

A big thank you.  Ireally appreciate.  You right, we got the same challenge!

While you post your solution, I continue to check on Internet for this issue.  My project use BusinessApplication template with SL4.  May be I have to make a association between customers entity and orders entity?  But I sure it's more of just doing that.  And the common fields of my two tables are Guid type...

Since few days, it's almost nothing on the web.  May this article can help but it's not use databases (http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/03/create-silverlight-master-detail-ui-using-data-sources-window-object-datasource.aspx) . 

So we stay in touch dear friend.

[Maya]

Hi Louis Bouchard,

 
The problem here is with the binding of the data in RadGridView as the ElementName=ordersDomainDataSource is not "visible" for the grid. What you need to do in this case is:
1. Add the "Orders" into the Query for the Customers:

public IQueryable<Customer> GetCustomers()
        {
            return this.ObjectContext.Customers.Include("Orders");
        }

2. Define the ItemsSource for the grid as:

ItemsSource="{Binding Orders}"

In this way for the appropriate orders of every customer will be shown.
I am sending you a sample project so that you can test the proposed solution. In this case the sample database Northwind is used.

All the best,
Maya
the Telerik team

[2next]

Thank you Maya for your sample project.
In your project, I would like to able to edit order rows. I had to move RadGridView outside the DataField. Now I can edit order rows but I can't insert a new row even I have enable ShowInsertRow and CanUserInsertRow property.

                  .......
                       <toolkit:DataField
                            Grid.Row="14"
                            Grid.Column="0"
                            Grid.ColumnSpan="3"
                            HorizontalAlignment="Left">

                        </toolkit:DataField>
                        <telerik:RadGridView
                            x:Name="RadGridViewOrders"
                            HorizontalAlignment="Right"
                            Margin="0,0,20,0"
                            MaxHeight="350"
                            Height="350"
                            Width="800"
                            Grid.Row="2"
                            ItemsSource="{Binding Orders}"
                            ShowInsertRow="True"
                            CanUserInsertRows="True">
                            <telerik:RadGridView.Columns>
                                <telerik:GridViewSelectColumn>
                                </telerik:GridViewSelectColumn>
                                <telerik:GridViewDataColumn
                                    x:Name="OrderId"
                                    DataMemberBinding="{Binding OrderID, Mode=TwoWay}">
                                </telerik:GridViewDataColumn>
                                <telerik:GridViewDataColumn
                                    x:Name="CustomerID"
                                    DataMemberBinding="{Binding CustomerID, Mode=TwoWay, NotifyOnValidationError=True,  ValidatesOnExceptions=True}">
                                </telerik:GridViewDataColumn>
                                <telerik:GridViewDataColumn
                                    x:Name="ShipCity"
                                    DataMemberBinding="{Binding ShipCity, Mode=TwoWay, NotifyOnValidationError=True,  ValidatesOnExceptions=True}">
                                </telerik:GridViewDataColumn>
                            </telerik:RadGridView.Columns>
                        </telerik:RadGridView>
                    </Grid>


......

Any ideas?
Thanks

2Next

[Maya]

Hello 2next 2next,

The problem with inserting new rows in the grid comes from the fact that the collection providing data for it is implementing neither IList, nor IEditableCollectionView interfaces. As a result elements cannot be inserted or deleted.
So, what you can do is to implement IList interface in the definition of the data for the grid.
You can find more information as well as sample project that you may use as a reference in this forum thread. The scenario for the application provided is with a hierarchy but still it is implements the same idea.
As you can see in the project from the forum, the data for the child grid is:

private EntityCollection<Album> _albums;

However, as we need it to be IEditableCollectionView or implementing IList, a class EntityCollectionViewis created and it is used as the ItemsSource for the child grid. Thus you can insert and delete items from it.

Regards,
Maya
the Telerik team

[2next]

Thank you for your reply.
I think to be understood your explanation, but I can't yet resolve my problem even yoour help.
The problem is that I have a DTO collection built on a Linq to Entities query.
The DTOs are herebelow:

Public Class CustomerDTO

    <Key()>

    Public Property id As Integer

 

    Public Property Name As String

 

    <Include>

    <Association("Custemer_Orders","id","idCustomer")

    Public Property Orders as IEnumerable(Of OrderDTO)

end class

 

 

Public Class OrderDTO

    <Key()>

    Public Property id As Integer

   
     Public Property idCustomer As Integer

    Public Property Total As Decimal

    Public Property dateOrder As DateTime

 

end class

To retrive Customers collection I call this query from DomainService:

<EnableClientAccess()> _
Public Class CustomerDomainService
 inhertis DomainService


    Public Function GetClienti() As System.Linq.IQueryable(Of CustomerDTO)
        Dim ObjectContext As New DTOEntities

        Dim customers = From c In ObjectContext.Customers()
                        Select New CustomerDTO With {
                           .id = c.id,
                           .Name=c.Name,
                           .Orders = c.Orders.Select(Function(p)
                                 New OrderDTO With {
                                     .id=p.id,
                                     .idCustomer=c.id,
                                     .dateOrder=c.dateOrder})
                             }

    return customers

    End Function

On client side, binding Data property of DomainService all works fine.
In the Dataform I have placed a RadGridView binded to the Orders property of selected customer. I can't insert rows in that RadGridView because the Order collection, as you explain, is a IEnumerable and not a IList or IEditableCollectionView.
How can in this scenario trasform Orders collection to a IList? I have tried to put .ToList in the Linq query but the results is an error like 'Unable to cast object of type 'System.Collections.Generic.IEnumerable`1[OrdersDTO]' to type System.Collections.Generic.IList`1[OrdersDTO]'."
I could trasform customers and orders collection into List collections but I don't want to do it because i have a lot (thousand) customers item and I want return a IQueryable to filter and paging...
What do you think about my problem?
Thanks

2Next

[Maya]

Hi 2next 2next,

Firstly, there is no need to use ToList() method and to convert the type of data on the server side.
You may try to follow the idea implemented in the sample project attached in this forum thread.
When using RIA Services, a generated code is added on the client side exposing the necessary classes, properties and queries. Thus following your case in this file you may encounter a property Orders of type IEnumerable. As the desired effect here is to enable inserting/ deleting items, which is not possible when working with collections of type IEnumerable, you can add a partial class and expose a new property OrdersView for example, which will be of different type.  Then you can bind it directly to the source of the grid. 
In the sample project an EntityCollectionView is added with all the necessary details so that it could "wrap" your IEnumerable property and provide the add/delete functionality. The partial class created is Artist and the newly exposed property is AlbumsView.

 

Sincerely yours,
Maya
the Telerik team