We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DataForm in TabView

Thread ID:

Created:

Updated:

Platform:

Replies:

143846 Apr 8,2019 02:41 AM UTC May 30,2019 08:54 AM UTC Xamarin.Forms 11
loading
Tags: SfDataForm
Leon
Asked On April 8, 2019 02:41 AM UTC

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 [Syncfusion]
Replied On April 8, 2019 02:18 PM UTC

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. 
 
 
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
Replied On April 12, 2019 04:58 AM UTC

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 [Syncfusion]
Replied On April 13, 2019 08:43 AM UTC

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 16th 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
Replied On May 1, 2019 01:19 AM UTC

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 [Syncfusion]
Replied On May 1, 2019 12:16 PM UTC

Hi Leon,

We are validating your queryhow 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 3rd May 2019. We appreciate your patience until then. 

Regards,
Dinesh Babu Yadav
 


Subburaj Pandian Veluchamy [Syncfusion]
Replied On May 3, 2019 12:37 PM UTC

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 [Syncfusion]
Replied On May 7, 2019 10:11 AM UTC

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
Replied On May 28, 2019 05:07 AM UTC

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 [Syncfusion]
Replied On May 29, 2019 10:02 AM UTC

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
Replied On May 30, 2019 12:07 AM UTC

This works now thank you very much.

Subburaj Pandian Veluchamy [Syncfusion]
Replied On May 30, 2019 08:54 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon