iPhone Settings Control

[Henry]

Hello there!

I am looking the control like the iPhone Settings.

It is almost like a one column grid, but you can click on a row to drill down to that specific detail.

Fill in the detail and then go back.

I have the picture attached.

What is this control?

Thank you!

Attachment: DrillDown_f4e1770e.zip

[Shivagurunathan Kamalakannan]

Hi Henry,   

   

Thank you for contacting Syncfusion support.  

   

We have checked the provided screenshot. You can use SfDataGrid in your application which has grouping feature that allow you achieve your requirement. We have prepared a sample in which grouping can been applied and template has been loaded in the caption summary row so that you could load your view based on your requirement. To fit the column with the device screen width you can set column sizer as Star for SfDataGrid.   

   

You can use GridTemplateColumn to load the views in the data rows based on your requirement. We have loaded entry and switch for your reference.   

   

Please refer the below user guidelines to know more about styles, grouping and GridTemplateColumn.    

   

Styles UG link: https://help.syncfusion.com/xamarin/sfdatagrid/styles   

   

Grouping UG link: https://help.syncfusion.com/xamarin/sfdatagrid/grouping   

   

Caption summary link: https://help.syncfusion.com/xamarin/sfdatagrid/summary   

   

Template column UG link: https://help.syncfusion.com/xamarin/sfdatagrid/column-types#gridtemplatecolumn   

   

Xaml code:   

   

<datagrid:SfDataGrid x:Name="dataGrid"    

                     ColumnSizer="Star"    

                     HeaderRowHeight="0"   

                     GridLoaded="DataGrid_GridLoaded"   

                     AllowGroupExpandCollapse="True"   

                     AutoGenerateColumns="False"        

                     RowHeight="90"   

                     ItemsSource="{Binding OrderInfoCollection, Mode=TwoWay}" >   

   

    <datagrid:SfDataGrid.Columns x:TypeArguments="syncfusion:Columns">   

        <datagrid:GridTemplateColumn MappingName="ShipCountry">   

            <datagrid:GridTemplateColumn.CellTemplate>   

                <DataTemplate>   

                    <Grid>   

                        <Grid.ColumnDefinitions>   

                            <ColumnDefinition Width="*"/>   

                            <ColumnDefinition Width="Auto"/>   

                        </Grid.ColumnDefinitions>   

   

                        <Grid.RowDefinitions>   

                            <RowDefinition/>   

                        </Grid.RowDefinitions>   

   

                        <Frame  Grid.Column="0"    

                                BorderColor="Tomato"    

                                CornerRadius="8"    

                                Padding="3"   

                                HeightRequest="50"   

                                HasShadow="True">   

                            <Entry Text="{Binding Customer}" HeightRequest="50"/>   

                        </Frame>   

                           

                        <Switch Grid.Column="1" />   

                           

                    </Grid>   

                </DataTemplate>   

            </datagrid:GridTemplateColumn.CellTemplate>   

        </datagrid:GridTemplateColumn>   

    </datagrid:SfDataGrid.Columns>   

   

    <datagrid:SfDataGrid.GroupColumnDescriptions>   

        <datagrid:GroupColumnDescription ColumnName="ShipCountry"/>   

    </datagrid:SfDataGrid.GroupColumnDescriptions>   

   

    <datagrid:SfDataGrid.CaptionSummaryTemplate>   

        <DataTemplate>   

            <StackLayout Orientation="Horizontal">   

                <Label Grid.Column="1"    

                       TextColor="Black"   

                       BackgroundColor="White"   

                       Text="{Binding Converter={StaticResource customconverter}, ConverterParameter={x:Reference dataGrid}}"   

                       VerticalTextAlignment="Center"   

                       HorizontalTextAlignment="Start"   

                       HorizontalOptions="FillAndExpand"   

                       VerticalOptions="FillAndExpand">   

                    <Label.Style>   

                        <Style TargetType="Label">   

                            <Setter Property="FontAttributes" Value="Bold,Italic"/>   

                        </Style>   

                    </Label.Style>   

                </Label>   

            </StackLayout>   

        </DataTemplate>   

    </datagrid:SfDataGrid.CaptionSummaryTemplate>   

   

    <datagrid:SfDataGrid.CaptionSummaryRow>   

        <datagrid:GridSummaryRow Name="CaptionSummary"    

                                 Title="ShipCountry"    

                                 ShowSummaryInRow="true">   

            <datagrid:GridSummaryRow.SummaryColumns>   

                <datagrid:GridSummaryColumn Name="ShipCountry"   

                                                                                            Format="{}{Count}"   

                                                                                            MappingName="ShipCountry"   

                                                                                            SummaryType="CountAggregate"/>   

            </datagrid:GridSummaryRow.SummaryColumns>   

        </datagrid:GridSummaryRow>   

    </datagrid:SfDataGrid.CaptionSummaryRow>   

</datagrid:SfDataGrid>    

  

   

   

Code behind:   

   

   

public partial class MainPage : ContentPage   

{   

    public MainPage()   

    {   

        InitializeComponent();   

        dataGrid.GridStyle = new CustomStyle();   

    }   

   

    private void DataGrid_GridLoaded(object sender, GridLoadedEventArgs e)   

    {   

        dataGrid.CollapseAllGroup();   

    }   

}   

   

/// <summary>   

/// Converter for the caption summary rows.   

/// </summary>   

public class CustomConverter : IValueConverter   

{   

    public CustomConverter()   

    {   

   

    }   

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)   

    {   

        var data = value != null ? value as Group : null;   

        if (data != null)   

        {   

            SfDataGrid dataGrid = (SfDataGrid)parameter;   

            return data.Key + " - " + data.ItemsCount + " Items";   

        }   

        return null;   

    }   

   

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)   

    {   

        return value;   

    }   

}   

   

/// <summary>   

/// Style class to customize SfDatagrid.   

/// </summary>   

public class CustomStyle : DataGridStyle   

{   

    public CustomStyle()   

    {   

   

    }   

   

    public override ImageSource GetGroupCollapseIcon()   

    {   

        return ImageSource.FromResource("SfGridSample.GroupCollapser.png");   

    }   

   

    public override ImageSource GetGroupExpanderIcon()   

    {   

        return ImageSource.FromResource("SfGridSample.GroupExpander.png");   

    }   

   

  public override Color GetBorderColor()   

  {   

      return Color.Transparent;   

  }   

}   

   

  

   

Please refer the below sample for more details.   

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridSample1800866771   

   

Regards,   

Shivagurunathan  

[Henry]

Great thank you!

I will check this out!

[Farjana Parveen Ayubb]

Hi Henry, 

 

Thanks for your the update. Please get back to us if you need further assistance from us 

 

Regards, 

Farjana Parveen A 

[Henry]

Hello there,

I do not believe they sfDataGrid will work for me.

There are certain controls I will need in a row such as a date and time picker.

1. My first row will be where I pick a name of a worker.   Here I wanted to tap the row and navigate to a list to select the worker.

2. The next row would be a date picker.

3. I would then have a few other rows that would be something where I can pick values from a list.

I have attached a screen shot of what I had written in another program and I am not trying to redo with Xamarin.

Sorry new and trying to learn all the controls!!

Attachment: SampleEntry_8cbe5dcc.zip

[Karthikraja Kalaimani]

Hi Henry,  

 

Thank you for update. 

  

Currently we are validating your requirement, we will validate and let you know the details in one business day September 26, 2019. We appreciate your patience until then. 

   

Regards,   

Karthik Raja