DataForm in TabView

[Leon]

I am trying to create a "wizard like" form. I have a class with about 30 elements (fields) and I want to use a DataForm with a TabView. The question is how can I combine the DataForm and the TabView to show 6 elements (fields) by tab? I want to create the instance of the class in my view model and populate the data as the user moves to each tab. What would be the best approach to do this? I can change the visibility of the fields in each tab, but I would have to use 5 DataForms one per tab an all using the same data object. If I use this approach how can I trigger the DataForm_AutoGeneratingDataFormItem when I move from one tab to another?

Thanks in advance.

[Arun siva]

Hi Leon, 

 

Thank you for contacting Syncfusion support. 

 

We have analyzed your query “Adding DataForm inside tabview and divide the dataformitems with each tab” and you can achieve your requirement by set the AutoGenerateItems as false and manually adding the required DataFormItems from datasource to dataform items property. 

 

We have prepared a simple sample which contains 10 dataform items and we have split this into two tabview. 

 

Sample: DataForm 

 

Kindly refer our UG documentation for more information about adding custom dataform items by referring the following link. 

 

Link: https://help.syncfusion.com/xamarin/sfdataform/working-with-dataform?cs-save-lang=1&cs-lang=xaml#adding-custom-dataformitems 

 

Note: we have introduced the AutoGenerateItems, and Items property in our Volume 1 Beta release version (17.1.0.32), hence kindly update to our latest version to use these properties. 

 

If the sample doesn’t meet your requirement, kindly revert us by modifying the sample based on your scenario and share us more details about your requirement, which help us to analyze and resolve your query. 

 

Regards,
Arun Siva R 

[Leon]

Your example is using a TabbedPage. However I am using a tabView:SfTabView

<tabView:SfTabItem x:Name="Tab00"  Title="Tab 1">

    <tabView:SfTabItem.HeaderContent>

        <Grid VerticalOptions="Center" HeightRequest="400" WidthRequest="500"  StyleId="ChatsHeader" HorizontalOptions="CenterAndExpand">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*" />

                <ColumnDefinition Width="Auto" />

            </Grid.ColumnDefinitions>

            <Label Text="Data" TextColor="Black" FontSize="23" Grid.Row="0" Grid.Column="0"  VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>

            <StackLayout Grid.Row="0" Grid.Column="1" Spacing="5" Orientation="Horizontal">

            </StackLayout>

        </Grid>

    </tabView:SfTabItem.HeaderContent>

    <tabView:SfTabItem.Content>

        <Grid x:Name="G00">

            <dataForm:SfDataForm x:Name="dfData00" ValidationMode="Explicit" LabelPosition="Left" DataObject="{Binding ContactInfo}" AutoGenerateItems="False">

                <dataForm:SfDataForm.Items>

                    <dataForm:DataFormTextItem Name="FirstName" Editor="Text"/>

                    <dataForm:DataFormTextItem Name="MiddleName" Editor="Text"/>

                    <dataForm:DataFormTextItem Name="LastName" Editor="Text"/>

                    <dataForm:DataFormDropDownItem Name="City" Editor="DropDown"/>

                </dataForm:SfDataForm.Items>

            </dataForm:SfDataForm>

        </Grid>

    </tabView:SfTabItem.Content>

</tabView:SfTabItem>

<tabView:SfTabItem x:Name="Tab01" Title="Tab 2">

    <tabView:SfTabItem.HeaderContent>

        <Grid VerticalOptions="Center" HeightRequest="400" WidthRequest="500" StyleId="ChatsHeader" HorizontalOptions="CenterAndExpand">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*" />

                <ColumnDefinition Width="Auto" />

            </Grid.ColumnDefinitions>

            <Label Text="Inspection" TextColor="Black" FontSize="23" Grid.Row="0" Grid.Column="0"  VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>

        </Grid>

    </tabView:SfTabItem.HeaderContent>

    <tabView:SfTabItem.Content>

        <Grid x:Name="G01">

            <dataForm:SfDataForm x:Name="dfData01" ValidationMode="Explicit" LabelPosition="Left" DataObject="{Binding ContactInfo}" AutoGenerateItems="False">

                <dataForm:SfDataForm.Items>

                    <dataForm:DataFormDateItem Name="BirthDate" Editor="Date"/>

                    <dataForm:DataFormCheckBoxItem Name="IsNew" Editor="CheckBox"/>

                </dataForm:SfDataForm.Items>

            </dataForm:SfDataForm>

        </Grid>

    </tabView:SfTabItem.Content>

</tabView:SfTabItem>    

The only problem I have now is that I think the Behaviors are not invoked when  AutoGenerateItems="False". I am using the xaml bellow

    <ContentPage.Behaviors>

        <helpers:FormBehavior/>

    </ContentPage.Behaviors >

and the method:

protected override void OnAttachedTo(ContentPage bindable)

        {

            base.OnAttachedTo(bindable);

            dataForm = bindable.FindByName<SfDataForm>("dfData00");

            dataForm.SourceProvider = new ListValues();

            dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

            dataForm.RegisterEditor("City", "DropDown");

        }

is not called, preventing the city DropDown to be populated.

How can I populate my dropdown with AutoGenerateItems="False"

Thanks

[Arun siva]

Hi Leon, 

 

Thank you for the update. 

 

Currently, we are validating the reported issue “SourceProvider doesn’t work to populate data to dropdown item for custom dataform items” based on source and sample level, we will update you further details on this in two business days on 16^th April 2019. We appreciate your patience until then. 

 

As of now you can add the custom dataform items in the behavior class and add the itemsource directly to the dropdown editor to achieve your requirement. 

 

Sample: DataForm. 

 

Kindly revert us if you have any concern. 

 

Regards, 

Arun Siva R 

[Leon]

In the sample you provided: how do I define a DataFormMultiLineTextItem ?

items.Add(new DataFormMultiLineTextItem() { Name = "Comment", Editor = "MultilineText" });

The code above does not work.

Thanks

[Dinesh Babu Yadav]

Hi Leon,

We are validating your query “how do define a DataFormMultiLineTextItem” on both the sample and source level and it needs some time, so we will update you further details in two business days on 3^rd May 2019. We appreciate your patience until then. 

Regards,
Dinesh Babu Yadav 

[Subburaj Pandian Veluchamy]

Hi Leon, 

  

Thank you for your patience. 

  

We have analyzed and fixed the reported issue “MultilineText editor doesn’t work properly when using custom dataform item in dataform”. We will include this issue fix in our upcoming weekly NuGet update which is expected to be available by next week (May 7, 2019). We appreciate your patience until then. 

 

Regards,
Subburaj Pandian V 

[Subburaj Pandian Veluchamy]

Hi Leon,

We have fixed the reported issue “MultilineText editor doesn’t work properly when using custom DataForm item in DataForm” and included the issue fix in our weekly NuGet update version 17.1.0.44 and is available for download (nuget.org). This issue fix will be included in our 2019 Volume 1 Service pack release as well, which is expected to be available by mid of May 2019. 

 

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance. 

 

Regards,
Subburaj Pandian V 

[Leon]

I am using version 17.1.0.48 but it is not working. I get the error: The type DataFormMultiLineTextItem could not be found.

The code:

items.Add(new DataFormMultiLineTextItem() { Name = "Comment", Editor = "MultilineText" });

Does not work. 

Try to add a DataFormMultiLineTextItem and you will see that it is not available.

[Subburaj Pandian Veluchamy]

Hi Leon, 

  

Sorry for the inconvenience caused. 

  

We have analyzed the reported query “MultilineTextItem cannot be created in custom DataFormItem in DataForm”. MultilineText editor comes under DataFormText editor, it can be created using DataFormTextItem and providing Editor= “MultilineText”.  

 

We have attached sample for your reference, 

  

Sample link: DataForm 

 

Code Snippet: 

ObservableCollection<DataFormItemBase> items = newObservableCollection<DataFormItemBase>(); 

items.Add(new DataFormTextItem() { Name = "Comment", Editor ="MultilineText" }); 

dataForm.Items = items; 

 

  

We hope that this helps. Kindly revert us if you have any concern. 

  

Regards,
Subburaj Pandian V 

[Leon]

This works now thank you very much.

[Subburaj Pandian Veluchamy]

Hi Leon,

Thank you for the update. We glad that the given solution meets your requirement. 

 

Please get in touch with us if you would require any further assistance. 

 

Regards,
Subburaj Pandian V