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”

---

Possibly related posts: (automatically generated)

• AD cmdlets 1.1 RTM!