Working with DataForm

Dataform has changed a lot in the RTM version from the beta and my previous post on DataForm is no longer valid now.
Here is something I did earlier.

I created EF model using Northwind database and added DomainService. To start with simple form. I started with Categories(Add/Edit)

so I created a Dataform with ReadOnlyTemplate and EditTemplate

Only the NavigationButtons are enabled. so we can navigate to an item, click ‘edit’ where we can edit the item and save/cancel.
We can also add a Category by clicking the Add button

<dataFormToolkit:DataForm Width=”400″ Height=”400″ AutoEdit=”False”  x:Name=”dataform1″  CommandButtonsVisibility=”Navigation”>
            <dataFormToolkit:DataForm.ReadOnlyTemplate>
                <DataTemplate>
                    <StackPanel>
                        <StackPanel Width=”Auto” Orientation=”Horizontal”>
                            <Button Content=”Add New” Click=”AddButton_Click”/>
                        </StackPanel>
                        <dataFormToolkit:DataField Label=”Category Name:”>
                            <TextBlock Text=”{Binding CategoryName}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”Description:”>
                            <TextBlock Text=”{Binding Description}”/>
                        </dataFormToolkit:DataField>
                        <StackPanel Width=”Auto” Orientation=”Horizontal”>
                            <Button Width=”100″ Height=”28″ Content=”Edit” Click=”EditButton_Click”/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.ReadOnlyTemplate>
            <dataFormToolkit:DataForm.EditTemplate>
                <DataTemplate>
                    <StackPanel>
                        <dataFormToolkit:DataField Label=”Category Name:”>
                            <TextBox Text=”{Binding CategoryName, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”Description:”>
                            <TextBox Text=”{Binding Description, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <StackPanel Width=”Auto” Orientation=”Horizontal”>
                            <Button Width=”100″ Height=”28″ Content=”Save” Click=”SaveButton_Click”/>
                            <Button Width=”100″ Height=”28″ Content=”Cancel” Click=”CancelButton_Click”/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.EditTemplate>
        </dataFormToolkit:DataForm>

 That was pretty simple. what if the dataform is bit more complex with a combobox, AutocompleteBox etc.
 products table has got a couple of columns that have look ups and is close to real scenario

 <dataFormToolkit:DataForm x:Name=”dataform1″ AutoEdit=”True” AutoGenerateFields=”False”>
            <dataFormToolkit:DataForm.EditTemplate>
                <DataTemplate>
                    <StackPanel>                       
                        <dataFormToolkit:DataField Label=”ProductName:”>
                            <TextBox Text=”{Binding ProductName, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”Category:”>
                            <ComboBox x:Name=”cbCategory” DisplayMemberPath=”CategoryName”
                                      SelectedItem=”{Binding Category, Mode=TwoWay}” />
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField >
                            <CheckBox Content=”Discontinued” IsChecked=”{Binding Discontinued, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”QuantityPerUnit:”>
                            <TextBox Text=”{Binding QuantityPerUnit, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”Supplier:”>
                            <input:AutoCompleteBox x:Name=”acb1″ SelectedItem=”{Binding Suppliers, Mode=TwoWay}”
                                                   ItemTemplate=”{StaticResource dt}” FilterMode=”StartsWith”   
                                                   MinimumPrefixLength=”1″  ></input:AutoCompleteBox>
                           
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”UnitPrice:”>
                            <TextBox Text=”{Binding UnitPrice, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”UnitsInStock:”>
                            <TextBox Text=”{Binding UnitsInStock, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”UnitsOnOrder:”>
                            <TextBox Text=”{Binding UnitsOnOrder, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <StackPanel Width=”Auto” Orientation=”Horizontal”>
                            <Button Width=”100″ Height=”28″ Content=”Save” Click=”SaveButton_Click”/>                           
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.EditTemplate>
        </dataFormToolkit:DataForm>

 <DataTemplate x:Key=”dt”>
            <TextBlock Text=”{Binding CompanyName}”/>
        </DataTemplate>

I defined a Dataform to Add/edit a product with a combobox for Categories and AutoCompleteBox for picking a supplier.
the main change was to set the ItemSource properties of the ComboBox and AutoCompleteBox in the ContentLoaded handler

 void dataform1_ContentLoaded(object sender, DataFormContentLoadEventArgs e)
        {
            ComboBox cb = dataform1.FindNameInContent(“cbCategory”) as ComboBox;
            cb.ItemsSource = ctx.Categories;
            acb = (dataform1.FindNameInContent(“acb1″) as AutoCompleteBox);
            acb.ItemsSource = ctx.Suppliers;
            acb.ItemFilter = (searchText, item) => {
                if ((item as Suppliers).CompanyName.ToLower().StartsWith(searchText.ToLower()))
                {                   
                    return true;
                }
                else
                    return false;
                };
        }

I was not able to set the Text that is displayed when you select a supplier in the AutoCompleteBox.
So I created a Suppliers.shared.cs class in the WebProject which basically overrides ToString implementation. so when the supplier is picked, we get the value we want rather than ‘Suppliers :6’ or something like that

 public partial class Suppliers
    {
        public override string ToString()
        {
            return this.CompanyName + ” (” + this.City + “)”;
        }
    }

you can download the code  here

Change the connectionstring in Web.config as  applicable.

By default the startpage is MainPage.xaml.  To view/edit products, make sure you modify App.xaml.cs  to use “products.xaml” for the RootVisual”

Advertisements

11 thoughts on “Working with DataForm

  1. now i’m using another method of binding combobox to dataform, but I have a problem with the definition of the “BusinessCategory” under the current user, that’s what I’m doing:

    the first, i’m added domaindatasourse as key resource:

    the second:

    if use that method, it will be work simply for getting all businessCategories from domaindatasource, but i want get only businesscategory of the current user. how to do it?

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